LoginSignup
6
3

More than 3 years have passed since last update.

SwiftUIのListの余白を消す方法

Posted at

みなさんSwiftUI楽しんでいますでしょうか?
自分はSwiftUIでNeumorphismデザインを適応するOSSを作ったり、Musicアプリを開発したりしています。
https://github.com/tsuzukihashi/NeumorphismUI

今回は、SwiftUIのListを使用した際に表示されるリストを消す方法を絶対忘れるのでメモしておきます。

準備

わかりやすいようにリストに色をつけてみました。
スクリーンショット 2020-04-11 22.38.23.png
Textの余白ではない物がついてますね〜

struct SwiftUIView: View {
    private let colors: [Color] = [.red, .blue, .green]
    var body: some View {
        List {
            ForEach(0..<3) { (row: Int) in
                Text("\(row)")
                    .background(Color.white)
                    .listRowBackground(self.colors[row])
            }
        }
    }
}

使用するメソッド

Listの余白を制御するには、listRowInsets(_:)を利用します。

struct SwiftUIView: View {
    private let colors: [Color] = [.red, .blue, .green]
    var body: some View {
        List {
            ForEach(0..<3) { (row: Int) in
                Text("\(row)")
                    .background(Color.white)
                    .listRowBackground(self.colors[row])
                    .listRowInsets(EdgeInsets())
            }
        }
    }
}

スクリーンショット 2020-04-11 23.02.28.png

このとき、気をつけなくてはいけないところはListの中の要素はForEachで呼ばないといけないところです。
そもそもこれをしないと、listRowBackground も適用されないのでお気をつけください。

スクリーンショット 2020-04-11 23.12.32.png

struct SwiftUIView: View {
    private let colors: [Color] = [.red, .blue, .green]
    var body: some View {
        List(0..<3) { (row: Int) in
            Text("\(row)")
                .background(Color.white)
                .listRowBackground(self.colors[row])
                .listRowInsets(EdgeInsets())
        }
    }
}

終わり!!!!

参考

6
3
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
6
3