SwiftUI Listを塗りつぶす

🎨背景色をつけるのでハマった

SwiftUIのListを使ったときに、背景色の設定でつまずくことが多かった💦

どうやら、UIkitの知識も必要みたいですね。init()メソッドで、ページが呼ばれたときに、背景色を塗り潰す処理が必要みたい。

参考になったサイト

init() {
        // UITableViewの背景色を設定
        UITableView.appearance().backgroundColor = .clear
        
        // UITableViewCellの背景色を設定
        UITableViewCell.appearance().backgroundColor = .clear
    }

全体のコード

.listStyle(GroupedListStyle())と、.colorMultiply(.yellow)を適用するといい感じ色をつけることができました。

import SwiftUI

struct ContentView: View {
    
    init() {
        // UITableViewの背景色を設定
        UITableView.appearance().backgroundColor = .clear
        
        // UITableViewCellの背景色を設定
        UITableViewCell.appearance().backgroundColor = .clear
    }
    
    var items: Array<String> = ["りんご", "バナナ", "ヨーグルト"]

    var body: some View {
        VStack {
            ZStack {
                Color.yellow.edgesIgnoringSafeArea(.all) // 背景色を黄色に設定
                
                List {
                    Section(header: Text("果物").foregroundColor(.black)) {
                        ForEach(items, id: \.self) { item in
                            Text(item)
                                .foregroundColor(.black) // テキストの色を黒に設定
                        }
                    }
                }
                .listStyle(GroupedListStyle())
            }
            .colorMultiply(.yellow) // リスト全体に黄色を乗算
        }
    }
}

struct ContentView_Previews: PreviewProvider {
    static var previews: some View {
        ContentView()
    }
}

まとめ

デフォルトの背景色だと、白とグレーなので地味ですよね。背景色を変えたい要件があるので、そんなときに、この方法を活用してみると良いかもしれないですね。