Zaczynam wypróbowywać SwiftUIi jestem zaskoczony, że zmiana koloru tła w pliku nie wydaje się łatwa View. Jak to robisz używając SwiftUI?

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.

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

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

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:

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

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

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

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

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

Kod na delegacie Scene w Swift UI

Kolor tła widoku zawartości

window.rootViewController? .view.backgroundColor = .lightGray