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