Zenn
🍣

SwiftUIの新機能を試してみるその2

2022/12/04に公開
SwiftUI
tech

リストのセパレータのインセットを調整する方法

SwiftUIはセパレータがテキストのリーディングエッジに揃うようにリストの行の挿入を自動的に調整するが、必要に応じてこれをカスタマイズできるように .listRowSeparatorLeadingと.listRowSeparatorTrailingというアライメントガイドが用意されている。

たとえば、セパレータの前縁を行全体の前縁に設定すると、セパレータはテキスト部分だけでなく、すべてのコンテンツに揃うようになる。

List(0..<51) { i in
    Label("Row \(i)", systemImage: "\(i).circle")
	.alignmentGuide(.listRowSeparatorLeading) { d in
	    d[.leading]
	}
}

この例では、d[.leading]の代わりに0を使用しても同じように動作する。

また、デザインに合ったカスタム値を使用することもできる。

List(0..<51) { i in
    Label("Row \(i)", systemImage: "\(i).circle")
	.alignmentGuide(.listRowSeparatorLeading) { _ in
	    100
	}
}

また、リスト行の区切り線の後端を、行の区切り線の先頭のインセットに追加して、カスタマイズすることもできる。たとえば、このコードでは、先頭のセパレータインセットはそのままにして、末尾のセパレータインセットをコンテンツの端に合わせ、行セパレータを行テキストの下にのみ配置する。

List(0..<51) { i in
    Label("Row \(i)", systemImage: "\(i).circle")
	.alignmentGuide(.listRowSeparatorTrailing) { d in
	    d[.trailing]
	}
}

https://zenn.dev/articles/72b40ae0c07134<前

Discussion