【SwiftUI】

Listの背景色を変更する方法

listRowBackgroundとUITableViewの設定

投稿日 2021/03/14 更新日 2021/09/26


こんにちは。当サイトの管理者「元木皇天」です。

今回はSwiftUIのListの背景色を簡単に変える方法をご紹介したいと思います。

環境
OS:MacOS Big Sur
Xcode:バージョン12.3
Swift:バージョン5.3

やりたいこと

SwiftUIのListのセル単体の背景色とList全体の背景色を変更する。(以下イメージ画像)

Listのセルの背景色を変える画像 Listの全体の背景色を変える画像

Listのセル単体の背景色の変更

Listのセル単体とはなんだ?と思う方もいるかもしれないので、説明すると以下の赤で囲んだところを指しています。

ここをなんて呼ぶのか知ってたらTwitterのDMとかでこっそり教えてください...。

Listのセルの説明

ここの背景色を変更するには.listRowBackground(Color.XXX)を使用します。(XXXには設定したい背景色を入れます。)

以下が実際に使用した例です。

import SwiftUI

struct ContentView: View {

    var body: some View {

        List{
            Text("Test1")
                .listRowBackground(Color.red)
            Text("Test2")
                .listRowBackground(Color.blue)
            Text("Test3")
                .listRowBackground(Color.green)
            Text("Test4")
                .listRowBackground(Color.gray)
            Text("Test5")
                .listRowBackground(Color.yellow)
        }
    }
}

画面を表示すると以下のように背景色が変わっていることがわかります。

Listのセルの背景色を変えた結果

List全体の背景色の変更

List全体の背景色を変更するためにはUITableView.appearance().backgroundColorを使用します。

実際の変更イメージは以下の通りです。

Listの全体の背景色を変える画像

先程のUITableViewのコードをinit()内で使用することで、List全体の背景色を変更することができます。

以下がList全体の背景色の変更を実装したコードです。

import SwiftUI

struct ContentView: View {

    init(){
        //List全体の背景色の設定
        UITableView.appearance().backgroundColor = UIColor.lightGray
    }

    var body: some View {

        List{
            Text("Test1")
            Text("Test2")
            Text("Test3")
            Text("Test4")
            Text("Test5")
        }
    }
}

実際に画面を起動すると以下のようになります。

List全体の背景色の変更

まとめ

SwiftUIのListの背景色を変更するにはlistRowBackgroundUITableView.appearance().backgroundColor を使用します。

参考文献・おすすめ文献

元木皇天

化学系大学出身
現在は3年目SEとして
日々がんばっています

Twitter