ฉันกำลังเริ่มลองใช้SwiftUIและฉันแปลกใจที่การเปลี่ยนสีพื้นหลังของViewไฟล์ คุณทำอย่างไรโดยใช้SwiftUI?

สีพื้นหลังของหน้าจอ

(ณ Xcode เวอร์ชัน 12)

ฉันไม่แน่ใจว่าโปสเตอร์ต้นฉบับหมายถึงสีพื้นหลังของทั้งหน้าจอหรือของแต่ละมุมมอง ผมจะเพิ่มคำตอบนี้เพื่อกำหนดสีพื้นหลังของหน้าจอทั้งหมด

ใช้ ZStack

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

ฉันเพิ่ม.ignoresSafeArea()ไม่เช่นนั้นมันจะหยุดที่ระยะขอบของพื้นที่ปลอดภัย

ใช้ Overlay Modifier

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

หมายเหตุ: มันเป็นสิ่งสำคัญที่จะเก็บ.ignoresSafeAreaในเพียงสีเพื่อให้เนื้อหาหลักของคุณไม่ได้ละเลยพื้นที่ปลอดภัยขอบเกินไป

คุณสามารถทำสิ่งต่างๆเช่น:

.background(Color.black)

รอบ ๆ มุมมองของคุณ

เช่น. จากเทมเพลตเริ่มต้น (ฉันรวมไว้รอบ ๆ กลุ่ม):

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

หากต้องการเพิ่มความทึบคุณสามารถเพิ่ม.opacityวิธีการได้เช่นกัน:

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

คุณยังสามารถใช้ประโยชน์จากองค์ประกอบการตรวจสอบของมุมมองโดย CMD + คลิกที่มุมมองและคลิกShow SwiftUI Inspector>> Backgroundสีของคุณ

เติมเต็มหน้าจอ

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

แบบนี้

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

สำหรับList:

SwiftUI ทั้งหมดListได้รับการสนับสนุนโดยUITableViewใน iOS ดังนั้นคุณจึงจำเป็นต้องเปลี่ยนสีพื้นหลังของtableView แต่เนื่องจากColorและUIColorค่าแตกต่างกันเล็กน้อยคุณจึงสามารถกำจัดไฟล์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)
    }
}

ตอนนี้คุณสามารถใช้พื้นหลังใดก็ได้ (รวมถึงทั้งหมดColor) ที่คุณต้องการ

ก่อนอื่นดูที่ผลลัพธ์นี้:

อย่างที่คุณเห็นคุณสามารถกำหนดสีของแต่ละองค์ประกอบในลำดับชั้นของมุมมองดังนี้:

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

และคนแรกคือwindow:

window.backgroundColor = .magenta

ปัญหาที่พบบ่อยมากคือเราไม่สามารถลบสีพื้นหลังของ SwiftUI ได้HostingViewController(ยัง) ดังนั้นเราจึงไม่เห็นบางมุมมองเช่นnavigationViewผ่านลำดับชั้นของมุมมอง คุณควรรอ API หรือพยายามปลอมมุมมองเหล่านั้น ( ไม่แนะนำ )

วิธีนี้จะได้ผลหรือไม่:

เพิ่มบรรทัดต่อไปนี้ใน 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
}

ความเป็นไปได้หลายประการ: (SwiftUI / Xcode 11)

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

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

3. มิฉะนั้นคุณสามารถทำCommand+ Clickกับองค์ประกอบและเปลี่ยนจากที่นั่นได้

หวังว่าจะช่วยได้ :)

ฉันต้องการประกาศตัวปรับแต่งสำหรับการเปลี่ยนสีพื้นหลังของมุมมอง

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

จากนั้นฉันใช้ตัวปรับแต่งโดยส่งผ่านสีไปยังมุมมอง

struct Content: View {

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

}

คุณสามารถเพียงแค่เปลี่ยนสีพื้นหลังของมุมมอง:

var body : some View{


    VStack{

        Color.blue.edgesIgnoringSafeArea(.all)

    }


}

และคุณยังสามารถใช้ ZStack:

var body : some View{


    ZStack{

        Color.blue.edgesIgnoringSafeArea(.all)

    }


}

ใช้โค้ดด้านล่างสำหรับการปรับแต่งสีของแถบนำทาง

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

เพียงใช้ ZStack เพื่อเพิ่มสีพื้นหลังหรือภาพในมุมมองหลักของคุณใน SwiftUI

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

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

รหัสบน Scene delegate ใน Swift UI

สีพื้นหลังของมุมมองเนื้อหา

window.rootViewController? .view.backgroundColor = .lightGray