Question

我试图在SwiftUI中使用滚动视图时使用彩色背景，但这会导致导航标题不再折叠。我已经尝试了多种方法，但这始终是一个问题。

struct Person : Identifiable{
    var id : Int
    var name : String
}

struct ContentView: View {
    let people = [
        Person(id: 1, name: "Ricky"),
        Person(id: 2, name: "Dani"),
        Person(id: 3, name: "Mark"),
        Person(id: 4, name: "Kailin"),
        Person(id: 5, name: "James"),
        Person(id: 5, name: "Jenna")
    ]

    var body: some View {
        NavigationView{
            ZStack{
                Color.red
                    .edgesIgnoringSafeArea(.all)
                ScrollView{
                    ForEach(people, id: \.id) { person in
                        Text(person.name)
                            .frame(width: 300, height: 400)
                            .background(Color.blue)
                            .padding()
                    }
                }.navigationBarTitle("Home")
            }
        }
    }

    //    init(){
    //        UIView.appearance().backgroundColor = .orange
    //    }
}

Answer 1

重新排列您的视图，

var body: some View {
    NavigationView {

        ScrollView {
            ZStack {
                Color.red
                VStack {
                    ForEach(people, id: \.id) { person in
                        Text(person.name)
                            .frame(width: 300, height: 400)
                            .background(Color.blue)
                            .padding()
                    }
                }
            }
        }.navigationBarTitle("Home")
    }

注意，您可以将UINavigationBar.appearance().backgroundColor = .red与UIColor之类的其他Color(UIColor.red)一起使用作为背景，以模拟透明的大NavigationBar直到直接可以在SwiftUI中更改适当颜色的API。

并且注意 UIColor.red与Color.red略有不同。

也注意，如果您想使用List而不是ScrollView，则应在.listRowInsets(EdgeInsets())上添加ZStack以摆脱多余的空白。

Answer 2

这是我想出的解决方案...此解决方案还允许您为背景单元格设置与列表元素不同的颜色。您可以使用ScrollView做类似的事情

如其他解决方案的注释中所述，使用ListView执行该解决方案会在单元格中留出一堆空白。（这就是为什么这样做有用的原因）

我想我会补充一点，因为没有其他解决方案对我有用。

struct ListBackgroundColor: ViewModifier {

    let color: UIColor

    func body(content: Content) -> some View {
        content
            .onAppear() {
                UITableView.appearance().backgroundColor = self.color
                //(Optional) Edit colour of cell background
                UITableViewCell.appearance().backgroundColor = self.color
            }
    }
}   

extension View {
    func listBackgroundColor(color: UIColor) -> some View {
        ModifiedContent(content: self, modifier: ListBackgroundColor(color: color))
    }

}

UI示例 https://imgur.com/a/TQ9c5Sc

带有ScrollView和导航栏SwiftUI的屏幕背景色

2 个答案: