【SwiftUI】Listの区切り線の余白を埋める方法(左端まで区切り線を引く方法)

概要

Listを使用した際に区切り線の左端に余白ができる問題を解消する方法の備忘録です。

環境

Xcode 16.1
Swift 6

結論

Formビュー使用時

区切り線左端の余白を埋めるにはListのデフォルト余白を削除すればListの端から端までの区切り線が引けそうです。
この状態だとListの余白が全てなくなってしまうので
Text($0)をpadding(.leading, 16)などで余白の調整するといいかもしれません。

import SwiftUI

struct ContentView: View {
    let data: [String] = ["1", "2", "3"]
    var body: some View {
        VStack {
            Text("List").font(.title)
            Form {
                Section(header: Text("Section")) {
                    List(data, id: \.self) {
                        Text($0).padding(.leading, 16) // paddingでTextの余白調整
                    }
                    .listRowInsets(EdgeInsets()) // Listのデフォルト余白を削除
                }
            }
            Spacer(minLength: 0)
        }
    }
}

Formビュー未使用時

Formビュー未使用時はList内でlistRowInsets(EdgeInsets())を指定すると余白が削除できそうです。

import SwiftUI

struct ContentView: View {
    let data: [String] = ["1", "2", "3"]
    var body: some View {
        VStack {
            Text("List").font(.title)
            List(data, id: \.self) {
                Text($0)
                    .listRowInsets(EdgeInsets())
            }
        }
    }
}

ただ、上記だとText左の余白が確保できません。
Text左の余白を確保したい場合はlistRowSeparatorLeadingにマイナス値を設定すれば左端まで区切り線を引くことができそうです。
他にもっとスマートな方法があれば教えてください。

import SwiftUI

struct ContentView: View {
    let data: [String] = ["1", "2", "3"]
    var body: some View {
        VStack {
            Text("List").font(.title)
            List(data, id: \.self) {
                Text($0)
                    .alignmentGuide(.listRowSeparatorLeading) {_ in -20}
            }
        }
    }
}
スポンサーリンク
PR
PR

シェアする

  • このエントリーをはてなブックマークに追加

フォローする