SwiftUI列出颜色背景

时间:2019-07-20 20:59:22

标签: ios swift list colors swiftui

如果我列出了静态项目,则无法更改视图的背景颜色。这是我的代码:

NavigationView {
        ZStack {
            Color("AppBackgroundColor").edgesIgnoringSafeArea(.all)
            List {
                Section(header: Text("Now in theaters")) {
                    ScrollMovies(type: .currentMoviesInTheater)
                }
                Section(header: Text("Popular movies")) {
                    ScrollMovies(type: .popularMovies)
                }
            }.listStyle(.grouped)
        }
    }

9 个答案:

答案 0 :(得分:7)

<form method="POST" enctype="multipart/form-data" action="{{ route('logout') }}">
<input type="submit" value="Logout">
</form>

PlaygroundPage.current.liveView = UIHostingController(rootView:ContentView())

答案 1 :(得分:5)

List不能被“绘制”。请改用以下内容:

项目列表:

ForEach(items) { item in
    HStack {
        Text(item)
    }
}.background(Color.red)

可滚动的项目列表:

ScrollView {
    ForEach(items) { item in
        HStack {
            Text(item)
        }
    }.background(Color.red)
}

在您的情况下:

VStack { // or HStack for horizontal alignment
    Section(header: Text("Now in theaters")) {
        ScrollMovies(type: .currentMoviesInTheater)
    }
    Section(header: Text("Popular movies")) {
        ScrollMovies(type: .popularMovies)
    }
}.background(Color.red)

答案 2 :(得分:4)

对于macOS上的SwiftUI,此方法有效:

extension NSTableView {
    open override func viewDidMoveToWindow() {
        super.viewDidMoveToWindow()

        // set the background color of every list to red
        backgroundColor = .red
    }
}

它将每个列表的背景色设置为红色(在该示例中)。

答案 3 :(得分:1)

目前最简单的方法就是使用UIAppearance代理。 SwiftUI还很年轻,因此其中一些功能尚未被Apple正确地实现。

h_addr_list

答案 4 :(得分:1)

在iOS中,所有SwiftUI的List都由UITableView支持。因此您需要更改 tableView 的背景颜色。但是,由于ColorUIColor的值略有不同,因此您可以摆脱UIColor

struct ContentView: View {

    init(){
        UITableView.appearance().backgroundColor = .clear
    }

    var body: some View {
        Form {
            Section(header: Text("First Section")) {
                Text("First cell")
            }
            Section(header: Text("Second Section")) {
                Text("First cell")
            }
        }
        .background(Color.yellow)
    }
}

现在,您可以使用任何背景(包括所有Color

Preview

请注意,这些顶部和底部白色区域是安全区域,您可以使用.edgesIgnoringSafeArea()修饰符删除它们。

还请注意 List.listStyle(GroupedListStyle())修饰符可以替换为简单的Form。但是请记住,SwiftUI控件的行为视其封闭视图而定。

答案 5 :(得分:1)

使用 UITableView.appearance().backgroundColor 会影响应用中所有 List 控件的背景颜色。如果您只想影响一个特定的视图,作为一种解决方法,您可以将其设置为 onAppear,然后将其设置回默认的 onDisappear。

import SwiftUI
import PlaygroundSupport

struct PlaygroundRootView: View {
    @State var users: [String] = ["User 1",
                                  "User 2",
                                  "User 3",
                                  "User 4"]
    var body: some View {
        Text("List")
        List(users, id: \.self){ user in
            Text(user)
        }
        .onAppear(perform: {
            UITableView.appearance().backgroundColor = UIColor.red
        })
        .onDisappear(perform: {
            UITableView.appearance().backgroundColor = UIColor.systemBackground
        })
    }
}
PlaygroundPage.current.setLiveView(PlaygroundRootView())

答案 6 :(得分:0)

因为,您要更改视图的背景颜色,

您可以使用.colorMultiply()

代码:

var body: some View {
        VStack {
            ZStack {
                List {
                    Section(header: Text("Now in theaters")) {
                        Text("Row1")
                    }
                    Section(header: Text("Popular movies")) {
                        Text("Row2")
                    }

                    /*Section(header: Text("Now in theaters")) {
                        ScrollMovies(type: .currentMoviesInTheater)
                    }
                    Section(header: Text("Popular movies")) {
                        ScrollMovies(type: .popularMovies)
                    } */
                }.listStyle(.grouped)
            }.colorMultiply(Color.yellow)
        }
}

输出:

enter image description here

答案 7 :(得分:0)

您可以为列表中的项目提供修饰符

NavigationView {
        ZStack {
            Color("AppBackgroundColor").edgesIgnoringSafeArea(.all)
            List {
                Section(header: Text("Now in theaters")) {
                    ScrollMovies(type: .currentMoviesInTheater)
                    .listRowBackground(Color.blue) // << Here
                }
                Section(header: Text("Popular movies")) {
                    ScrollMovies(type: .popularMovies)
                    .listRowBackground(Color.green)  // << And here
                }
            }.listStyle(.grouped)
        }
    }

答案 8 :(得分:0)

聚会有点晚,但这可能会有所帮助。我使用以下组合:

  • 设置 UITableView.appearance 外观
  • 设置 UITableViewCell.appearance 外观
  • 设置 List listRowBackground 修饰符。

设置外观会影响整个应用,因此您可能需要在适用的情况下将其重置为其他值。

示例代码:

struct ContentView: View {
    var body: some View {
        
        let items = ["Donald", "Daffy", "Mickey", "Minnie", "Goofy"]

        UITableView.appearance().backgroundColor = .clear
        UITableViewCell.appearance().backgroundColor = .clear
        
        return ZStack {
            Color.yellow
                .edgesIgnoringSafeArea(.all)
            List {
                Section(header: Text("Header"), footer: Text("Footer")) {
                    ForEach(items, id: \.self) { item in
                        HStack {
                            Image(systemName: "shield.checkerboard")
                                .font(.system(size: 40))
                            Text(item)
                                .foregroundColor(.white)
                        }
                        .padding([.top, .bottom])
                    }
                    .listRowBackground(Color.orange))
                }
                .foregroundColor(.white)
                .font(.title3)
            }
            .listStyle(InsetGroupedListStyle())
        }
        
    }
}