Zaczynam wypróbowywać SwiftUI
i jestem zaskoczony, że zmiana koloru tła w pliku nie wydaje się łatwa View
. Jak to robisz używając SwiftUI
?
Zaczynam wypróbowywać SwiftUI
i jestem zaskoczony, że zmiana koloru tła w pliku nie wydaje się łatwa View
. Jak to robisz używając SwiftUI
?
Odpowiedzi:
(Od Xcode w wersji 12)
Nie jestem pewien, czy oryginalny plakat miał na myśli kolor tła całego ekranu czy poszczególnych widoków. Więc po prostu dodam tę odpowiedź, która polega na ustawieniu koloru tła całego ekranu.
var body: some View {
ZStack
{
Color.purple
.ignoresSafeArea()
// Your other content here
// Other layers will respect the safe area edges
}
}
Dodałem .ignoresSafeArea()
inaczej, zatrzyma się na bezpiecznych marginesach obszaru.
var body: some View {
Color.purple
.ignoresSafeArea(.vertical) // Ignore just for the color
.overlay(
VStack(spacing: 20) {
Text("Overlay").font(.largeTitle)
Text("Example").font(.title).foregroundColor(.white)
})
}
Uwaga: ważne jest, aby pozostawić .ignoresSafeArea
włączony tylko kolor, aby główna zawartość nie ignorowała również krawędzi bezpiecznego obszaru.
.edgesIgnoringSafeArea(.all)
do koloru, a nie innych treści. To powinno działać lepiej dla Ciebie.
Możesz zrobić coś takiego:
.background(Color.black)
wokół twojego widoku.
na przykład. z domyślnego szablonu (obejmuję go wokół grupy):
var body: some View {
VStack {
Text("Hello SwiftUI!")
}
.background(Color.black)
}
Aby dodać do niego trochę krycia, możesz również dodać .opacity
metodę:
.background(Color.black.opacity(0.5))
Można również skorzystać z następujących sprawdzać element widoku przez CMD + kliknij View i kliknięcie Show SwiftUI Inspector
> Background
> kolor
Wypełnij cały ekran
var body : some View{
Color.green.edgesIgnoringSafeArea(.all)
}
lubię to
struct ContentView : View {
@State var fullName: String = "yushuyi"
var body: some View {
VStack
{
TextField($fullName).background(SwiftUI.Color.red)
Spacer()
}.background(SwiftUI.Color.yellow.edgesIgnoringSafeArea(.all))
}
}
.edgesIgnoringSafeArea()
do koloru tła . Z UIKit to dziwne, ale działa!
Spacer()
przesuwa VStack na wysokość ekranu.
List
:Wszystkie interfejsy SwiftUI List
są obsługiwane przez system UITableView
iOS. więc musisz zmienić kolor tła tableView . Ale ponieważ wartości Color
i UIColor
są nieco inne, możesz pozbyć się rozszerzenia UIColor
.
struct ContentView : View {
init(){
UITableView.appearance().backgroundColor = .clear
}
var body: some View {
List {
Section(header: Text("First Section")) {
Text("First Cell")
}
Section(header: Text("Second Section")) {
Text("First Cell")
}
}
.background(Color.yellow)
}
}
Teraz możesz użyć dowolnego tła (w tym wszystkich Color
), które chcesz
Również najpierw spójrz na ten wynik:
Jak widać, możesz ustawić kolor każdego elementu w hierarchii widoku w następujący sposób:
struct ContentView: View {
init(){
UINavigationBar.appearance().backgroundColor = .green
//For other NavigationBar changes, look here:(https://stackoverflow.com/a/57509555/5623035)
}
var body: some View {
ZStack {
Color.yellow
NavigationView {
ZStack {
Color.blue
Text("Some text")
}
}.background(Color.red)
}
}
}
A pierwszy to window
:
window.backgroundColor = .magenta
Bardzo częstym problemem jest to, że nie możemy usunąć koloru tła SwiftUI HostingViewController
(jeszcze), więc nie możemy zobaczyć niektórych widoków, takich jak navigationView
hierarchia widoków. Powinieneś poczekać na API lub spróbować sfałszować te widoki ( niezalecane ).
ListCoreCellHost
że pozostaje biały. pasteboard.co/JeWCgMV.png
UITableViewCell.appearance().backgroundColor = .clear
. :)
Czy to rozwiązanie zadziała ?:
dodaj następujący wiersz do SceneDelegate: window.rootViewController? .view.backgroundColor = .black
func scene(_ scene: UIScene, willConnectTo session: UISceneSession, options connectionOptions: UIScene.ConnectionOptions) {
if let windowScene = scene as? UIWindowScene {
window.rootViewController?.view.backgroundColor = .black
}
Kilka możliwości: (SwiftUI / Xcode 11)
1 .background(Color.black) //for system colors
2 .background(Color("green")) //for colors you created in Assets.xcassets
Mam nadzieję, że to pomoże :)
Lubię zadeklarować modyfikator do zmiany koloru tła widoku.
extension View {
func background(with color: Color) -> some View {
background(GeometryReader { geometry in
Rectangle().path(in: geometry.frame(in: .local)).foregroundColor(color)
})
}
}
Następnie używam modyfikatora, przekazując kolor do widoku.
struct Content: View {
var body: some View {
Text("Foreground Label").foregroundColor(.green).background(with: .black)
}
}
Możesz po prostu zmienić kolor tła widoku:
var body : some View{
VStack{
Color.blue.edgesIgnoringSafeArea(.all)
}
}
i możesz również użyć ZStack:
var body : some View{
ZStack{
Color.blue.edgesIgnoringSafeArea(.all)
}
}
Użyj poniższego kodu, aby dostosować kolor paska nawigacji
struct ContentView: View {
@State var msg = "Hello SwiftUI😊"
init() {
UINavigationBar.appearance().backgroundColor = .systemPink
UINavigationBar.appearance().largeTitleTextAttributes = [
.foregroundColor: UIColor.white,
.font : UIFont(name:"Helvetica Neue", size: 40)!]
// 3.
UINavigationBar.appearance().titleTextAttributes = [
.font : UIFont(name: "HelveticaNeue-Thin", size: 20)!]
}
var body: some View {
NavigationView {
Text(msg)
.navigationBarTitle(Text("NAVIGATION BAR"))
}
}
}
Xcode 11.5
Po prostu użyj ZStack, aby dodać kolor tła lub obrazy do głównego widoku w SwiftUI
struct ContentView: View {
var body: some View {
ZStack {
Color.black
}
.edgesIgnoringSafeArea(.vertical)
}
}
var body: some View {
var body: some View {
NavigationView {
ZStack {
// Background
Color.blue.edgesIgnoringSafeArea(.all)
content
}
//.navigationTitle(Constants.navigationTitle)
//.navigationBarItems(leading: cancelButton, trailing: doneButton)
//.navigationViewStyle(StackNavigationViewStyle())
}
}
}
var content: some View {
// your content here; List, VStack etc - whatever you want
VStack {
Text("Hello World")
}
}