リストの区切り線カスタマイズ

List の行間に表示される区切り線（セパレーター）は、モディファイアを使ってカスタマイズできます。非表示にしたり、色を変えたり、インセットを調整したりできます。

区切り線を非表示にする

listRowSeparator モディファイアで区切り線の表示/非表示を切り替えます。

struct ContentView: View {
    let items = ["A", "B", "C", "D", "E"]
    
    var body: some View {
        List(items, id: \.self) { item in
            Text(item)
                .listRowSeparator(.hidden)
        }
    }
}

すべての行で非表示にする場合は、ForEach または List の中で個別に指定する必要があります。

特定の行だけ非表示

条件に応じて区切り線を制御することも可能です。

List(items, id: \.self) { item in
    Text(item)
        .listRowSeparator(item == items.last ? .hidden : .visible)
}

最後の行だけ区切り線を非表示にする例です。

区切り線の位置を指定

区切り線の表示位置（上端・下端）を指定できます。

Text(item)
    .listRowSeparator(.hidden, edges: .bottom)  // 下の区切り線のみ非表示

edges: .top

行の上端の区切り線を対象にする

edges: .bottom

行の下端の区切り線を対象にする

edges: .all

上下両方（デフォルト）

区切り線の色を変更

listRowSeparatorTint で区切り線の色を変更できます。

struct ContentView: View {
    let items = ["項目1", "項目2", "項目3"]
    
    var body: some View {
        List(items, id: \.self) { item in
            Text(item)
                .listRowSeparatorTint(.blue)
        }
    }
}

位置と組み合わせることも可能です。

Text(item)
    .listRowSeparatorTint(.red, edges: .bottom)

インセットの調整

区切り線の開始位置（左端からのインセット）を調整するには、alignmentGuide を使う方法があります。ただし、標準 API では直接的なインセット調整は限定的です。

行全体のインセットを変更する場合は listRowInsets を使います。

Text(item)
    .listRowInsets(EdgeInsets(top: 10, leading: 20, bottom: 10, trailing: 20))

実践例：カードスタイルのリスト

区切り線を非表示にして、カード風のデザインを作成する例です。

struct CardListView: View {
    let items = ["カード1", "カード2", "カード3"]
    
    var body: some View {
        List(items, id: \.self) { item in
            Text(item)
                .frame(maxWidth: .infinity, alignment: .leading)
                .padding()
                .background(Color.white)
                .cornerRadius(10)
                .shadow(color: .black.opacity(0.1), radius: 5, x: 0, y: 2)
                .listRowSeparator(.hidden)
                .listRowBackground(Color.clear)
        }
        .listStyle(.plain)
        .background(Color.gray.opacity(0.1))
    }
}

デフォルト

区切り線あり、標準的なリスト表示

カスタマイズ後

区切り線なし、カード風デザイン、影付き

区切り線のカスタマイズにより、List を使いながらも独自のデザインを実現できます。ただし過度なカスタマイズはプラットフォームの一貫性を損なうため、デザインの意図を明確にした上で適用しましょう。