SwiftUI - Wie ändere ich die Hintergrundfarbe einer Ansicht?

113

Ich fange an zu probieren SwiftUIund bin überrascht, dass es nicht einfach zu sein scheint, die Hintergrundfarbe von a zu ändern View. Wie machst du das mit SwiftUI?

jeremyabannister
quelle

Antworten:

118

Sie können so etwas tun wie:

.background(Color.black)

um deine Sicht.

z.B. aus der Standardvorlage (ich umfasse sie um eine Gruppe):

    var body: some View {
        VStack {
          Text("Hello SwiftUI!")
        }
       .background(Color.black)
    }

Um etwas Deckkraft hinzuzufügen, können Sie auch die .opacityMethode hinzufügen :

.background(Color.black.opacity(0.5))

Sie können auch Gebrauch machen von der Einsicht Element der Ansicht von CMD + Klick auf die Ansicht und klicken machen Show SwiftUI Inspector> Background> Ihre Farbe

Ansicht überprüfen

Überprüfen Sie die Detailansicht

Simon
quelle
4
Ich konnte es nicht für die Navigationsansicht verwenden. Haben Sie eine Idee, was Sie mit der Navigationsansicht tun sollen?
Atalayasa
Welche Version verwenden Sie?
JuniorRubyist
atalayasa, UINavigationBar.appearance (). backgroundColor = .black
Kugutsumen
Wenn ich dies mit Rectangle () mache, erhalte ich einen schwarz gefüllten Bereich.
Chris Prince
114

Hintergrundfarbe des Bildschirms

(Ab Xcode Version 12)

Ich bin mir nicht sicher, ob das Originalplakat die Hintergrundfarbe des gesamten Bildschirms oder einzelner Ansichten bedeutet. Also füge ich einfach diese Antwort hinzu, um die Hintergrundfarbe des gesamten Bildschirms festzulegen.

Verwenden von ZStack

var body: some View {
    ZStack
        {
            Color.purple
                .ignoresSafeArea()
            
            // Your other content here
            // Other layers will respect the safe area edges
    }
}

Ich habe .ignoresSafeArea()sonst hinzugefügt , es wird an sicheren Bereichsrändern anhalten.

Verwenden des Überlagerungsmodifikators

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

Hinweis: Es ist wichtig , das zu halten , .ignoresSafeAreaauf nur die Farbe , damit Ihr Hauptinhalt ist die sicheren Bereich Kanten nicht zu ignorieren.

Mark Moeykens
quelle
6
Wissen Sie, wie Sie die Hintergrundfarbe für NavigationView ändern können?
Atalayasa
3
Dies funktioniert jedoch, wenn Sie eine Navigationsansicht und eine Liste oder Bildlaufansicht haben, wird der Titel der Navigationsleiste nicht zusammenbrechen
Richard Witherspoon
2
Ich habe nur beide ohne Glück versucht. Ich habe versucht, einen Weg zu finden, um die Hintergrundfarbe des Bildschirms mit einer Navigationsansicht und einer Bildlaufansicht zum Laufen zu bringen
Richard Witherspoon
1
Hey @Ryan, ich habe meine Lösungen aktualisiert, um .edgesIgnoringSafeArea(.all)nur die Farbe und nicht den anderen Inhalt zu verwenden. Dies sollte für Sie besser funktionieren.
Mark Moeykens
1
Verwenden Sie in Bezug auf NavigationView die oben beschriebene ZStack-Methode direkt in der NavigationView, wie hier gezeigt: stackoverflow.com/a/58230473/457478
Ryan
18

Füllen Sie den gesamten Bildschirm aus

var body : some View{
    Color.green.edgesIgnoringSafeArea(.all)
}

Geben Sie hier die Bildbeschreibung ein

Geben Sie hier die Bildbeschreibung ein

Mo Abdulmalik
quelle
15

so was

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))
    }
}
余书懿
quelle
1
Beachten Sie, dass Sie .edgesIgnoringSafeArea()die Hintergrundfarbe hinzufügen müssen . Von UIKit zu kommen ist bizarr, aber es funktioniert!
mbxDev
1
Hinweis: Dies funktioniert, weil der Spacer()VStack auf die Höhe des Bildschirms geschoben wird.
Mark Moeykens
9

Für List:

Alle SwiftUIs Listwerden von einem UITableViewin iOS unterstützt. Sie müssen also die Hintergrundfarbe der tableView ändern . Aber da Colorund UIColorWerte etwas unterschiedlich sind, können Sie die loswerden 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)
    }
}

Jetzt können Sie einen beliebigen Hintergrund (einschließlich aller Colors) verwenden


Schauen Sie sich auch zuerst dieses Ergebnis an:

Hierarchie anzeigen

Wie Sie sehen können, können Sie die Farbe jedes Elements in der Ansichtshierarchie wie folgt festlegen:

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

Und der erste ist window:

window.backgroundColor = .magenta

Das häufigste Problem ist, dass wir die Hintergrundfarbe von SwiftUIs HostingViewController(noch) nicht entfernen können , sodass wir einige der Ansichten nicht wie navigationViewin der Ansichtshierarchie sehen können. Sie sollten auf die API warten oder versuchen, diese Ansichten zu fälschen ( nicht empfohlen ).

Mojtaba Hosseini
quelle
eine ähnliche Frage: Anstatt eine Farbe für die Listenzeile festzulegen, wie kann ich sie transparent machen? Es scheint, dass alle meine Versuche die zugrunde liegende Farbe nicht enthüllen und die Zeilen weiß bleiben, insbesondere gibt es eine ListCoreCellHost, die weiß bleibt. pasteboard.co/JeWCgMV.png
tGilani
Okay, ich dachte 15 Minuten später hier zu posten, musste auch einstellen UITableViewCell.appearance().backgroundColor = .clear. :)
tGilani
4

Würde diese Lösung funktionieren?:

Fügen Sie SceneDelegate die folgende Zeile hinzu: 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
}
Saxjax
quelle
4

Mehrere Möglichkeiten: (SwiftUI / Xcode 11)

1 .background(Color.black) //for system colors

2 .background(Color("green")) //for colors you created in Assets.xcassets

  1. Andernfalls können Sie Command+ Clickfür das Element tun und es von dort aus ändern.

Hoffe es hilft :)


quelle
3

Ich möchte einen Modifikator zum Ändern der Hintergrundfarbe einer Ansicht deklarieren.

extension View {
  func background(with color: Color) -> some View {
    background(GeometryReader { geometry in
      Rectangle().path(in: geometry.frame(in: .local)).foregroundColor(color)
    })
  }
}

Dann benutze ich den Modifikator, indem ich eine Farbe an eine Ansicht übergebe.

struct Content: View {

  var body: some View {
    Text("Foreground Label").foregroundColor(.green).background(with: .black)
  }

}

Geben Sie hier die Bildbeschreibung ein

jnblanchard
quelle
2

Sie können einfach die Hintergrundfarbe einer Ansicht ändern:

var body : some View{


    VStack{

        Color.blue.edgesIgnoringSafeArea(.all)

    }


}

und Sie können auch ZStack verwenden:

var body : some View{


    ZStack{

        Color.blue.edgesIgnoringSafeArea(.all)

    }


}
MannaICT13
quelle
2

Xcode 11.5

Verwenden Sie einfach ZStack, um Ihrer Hauptansicht in SwiftUI Hintergrundfarben oder Bilder hinzuzufügen

struct ContentView: View {
    var body: some View {
        ZStack {
            Color.black
        }
        .edgesIgnoringSafeArea(.vertical)
    }
}
Prashant Gaikwad
quelle
1

Verwenden Sie den folgenden Code für die Farbanpassung der Navigationsleiste

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

Geben Sie hier die Bildbeschreibung ein

ShigaSuresh
quelle
0

NavigationView Beispiel:

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")
    }
}
Rajee Jones
quelle
-6

Der Code für den Szenendelegierten in der Swift-Benutzeroberfläche

Hintergrundfarbe der Inhaltsansicht

window.rootViewController? .view.backgroundColor = .lightGray

CSE 1994
quelle