SwiftUI 列表顏色背景

Question

如果我列出靜態項目，我無法更改視圖的背景顏色。 這是我的代碼：

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

Answer 1

iOS 16

從 Xcode 14 beta 3 開始，您可以使用此修飾符更改所有列表和可滾動內容的背景：

.scrollContentBackground(.hidden)

您可以傳入.hidden以使其透明。 所以你可以看到下面的顏色或圖像。

---

iOS 15 及以下

所有 SwiftUI 的List都由UITableView支持（直到 iOS 16）。 所以你需要改變tableView的背景顏色。 你把它說clear ，這樣其他view就會在它下面可見：

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 ）

請注意，那些頂部和底部的白色區域是安全區域，您可以使用.edgesIgnoringSafeArea()修飾符來擺脫它們。

另請注意，帶有.listStyle(GroupedListStyle())修飾符的List可以替換為簡單的Form 。 但請記住，SwiftUI 控件的行為會根據其封閉視圖而有所不同。

此外，您可能還希望將UITableViewCell的背景顏色設置為clear以及普通表格視圖

Answer 2

@State var users: [String] = ["User 1",
                              "User 2",
                              "User 3",
                              "User 4"]

init(){
    UITableView.appearance().backgroundColor = .red
    UITableViewCell.appearance().backgroundColor = .red
    UITableView.appearance().tableFooterView = UIView()
}

var body: some View {
    List(users, id: \.self){ user in
        Text(user)
    }
    .background(Color.red)
}

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

Answer 3

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)

Answer 4

您可以為列表中的項目提供修飾符

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

Answer 5

對於 macOS 上的 SwiftUI，這適用：

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

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

它將每個列表的背景顏色設置為紅色（在該示例中）。

Answer 6

使用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: {
            // cache the current background color
            UITableView.appearance().backgroundColor = UIColor.red
        })
        .onDisappear(perform: {
            // reset the background color to the cached value
            UITableView.appearance().backgroundColor = UIColor.systemBackground
        })
    }
}
PlaygroundPage.current.setLiveView(PlaygroundRootView())

Answer 7

目前最簡單的方法就是使用 UIAppearance 代理。 SwiftUI 還很年輕，所以蘋果還沒有完全正確地實現一些功能。

UITableView.appearance().backgroundColor = .red

Answer 8

聚會有點晚了，但這可能會有所幫助。 我使用以下組合：

• 設置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())
        }
        
    }
}

Answer 9

因為，您要求更改視圖的背景顏色，

您可以為此使用.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)
        }
}

輸出：