SwiftUI - Jak zmienić kolor tła widoku?


Odpowiedzi:


134

Kolor tła ekranu

(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.

Korzystanie z ZStack

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.

Korzystanie z modyfikatora nakładki

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ć .ignoresSafeAreawłączony tylko kolor, aby główna zawartość nie ignorowała również krawędzi bezpiecznego obszaru.


6
Czy wiesz, jak zmienić kolor tła w NavigationView?
atalayasa

3
To zadziała jednak, jeśli masz NavigationView i listę lub scrollview, tytuł paska nawigacji nie zwinie się
Richard Witherspoon

2
Po prostu spróbowałem obu bez powodzenia. Próbowałem wymyślić sposób, aby kolor tła ekranu działał z nawigacją i widokiem przewijania
Richard Witherspoon

1
Hej @Ryan, zaktualizowałem swoje rozwiązania, aby przejść .edgesIgnoringSafeArea(.all)do koloru, a nie innych treści. To powinno działać lepiej dla Ciebie.
Mark Moeykens

1
Jeśli chodzi o NavigationView, użyj metody ZStack powyżej tuż wewnątrz NavigationView, jak pokazano tutaj: stackoverflow.com/a/58230473/457478
Ryan

130

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ć .opacitymetodę:

.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

Sprawdź widok

Sprawdź widok szczegółów


4
Nie mogłem go użyć do widoku nawigacji. Czy masz pojęcie, co zrobić z widokiem nawigacji?
atalayasa

Jakiej wersji używasz?
juniorRubyist

atalayasa, UINavigationBar.appearance (). backgroundColor = .black
Kugutsumen

Kiedy robię to za pomocą Rectangle (), otrzymuję czarny obszar wypełniony.
Chris Prince


15

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))
    }
}

1
Pamiętaj, że musisz dodać .edgesIgnoringSafeArea()do koloru tła . Z UIKit to dziwne, ale działa!
mbxDev

1
Uwaga: To działa, ponieważ Spacer()przesuwa VStack na wysokość ekranu.
Mark Moeykens

9

Dla List:

Wszystkie interfejsy SwiftUI Listsą obsługiwane przez system UITableViewiOS. więc musisz zmienić kolor tła tableView . Ale ponieważ wartości Colori UIColorsą 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:

Wyświetl hierarchię

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 navigationViewhierarchia widoków. Powinieneś poczekać na API lub spróbować sfałszować te widoki ( niezalecane ).


podobne pytanie, zamiast ustawić kolor w wierszu listy, jak mogę uczynić go przezroczystym, wydaje się, że wszystkie moje próby nie ujawniają koloru podstawowego, a wiersze pozostają białe, szczególnie, ListCoreCellHostże pozostaje biały. pasteboard.co/JeWCgMV.png
tGilani

Okej, pomyślałem, że 15 minut później wysyłam tutaj, musiałem też ustawić UITableViewCell.appearance().backgroundColor = .clear. :)
tGilani

4

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
}

4

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

  1. W przeciwnym razie możesz zrobić Command+ Clickna elemencie i zmienić go stamtąd.

Mam nadzieję, że to pomoże :)


3

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)
  }

}

wprowadź opis obrazu tutaj


2

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)

    }


}

2

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"))       
    }
    }
}

wprowadź opis obrazu tutaj


2

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)
    }
}

0

Przykład NavigationView:

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")
    }
}

-6

Kod na delegacie Scene w Swift UI

Kolor tła widoku zawartości

window.rootViewController? .view.backgroundColor = .lightGray

Korzystając z naszej strony potwierdzasz, że przeczytałeś(-aś) i rozumiesz nasze zasady używania plików cookie i zasady ochrony prywatności.
Licensed under cc by-sa 3.0 with attribution required.