1. 隐藏/取消List的分割线
iOS 13.0+ (全局效果)
List (0..<50) { index in
Text("\(index)")
}
.onAppear {
UITableView.appearance().separatorStyle = .none
}
iOS 14.0+
List (0..<50) { index in
Text("\(index)")
}
.listStyle(SidebarListStyle())
iOS 15.0+
func listRowSeparator(_ visibility: Visibility, edges: VerticalEdge.Set = .all) -> some View
其调用方式为
List (0..<50) { index in
Text("\(index)")
.listRowSeparator(.hidden)
}
其他的方式可参考 stackoverflow对应问答
详情以Apple Developer Documentation为准
2. 设置左滑删除Cell
struct ListViewDemo: View {
//数据数组
@State private var streets = [Street(name: "The Lodon Street"), Street(name: "The Joe's Street"), Street(name: "The House Street")]
var body: some View {
func deleteRow(at offsets:IndexSet) {
streets.remove(atOffsets:offsets)
}
return List{
ForEach(streets, id: \.self) { street in
StreetRow(street: street)
}.onDelete(perform: deleteRow)
}
}
}
3. List添加section分组以及设置grouped类型
struct ListViewDemo: View {
var body: some View {
return List{
Section(header:Text("some streets one"), footer: Text("Fotter1")){
TaskRow()
TaskRow()
TaskRow()
}
Section(header:Text("some streets two"), footer: Text("Fotter2")){
TaskRow()
TaskRow()
TaskRow()
}
}
}
}
struct TaskRow: View {
var body: some View {
Text("Task data goes here")
}
}
在UITableView中我们可以设置plain和grouped两种样式,而默认是plain样式,SwiftUI也一样。在swiftUI中设置grouped样式很简单,只需要为list添加相应的listStyle modifier:
struct ListViewDemo: View {
var body: some View {
return List{
Section(header:Text("some streets one"), footer: Text("Fotter1")){
TaskRow()
TaskRow()
TaskRow()
}
Section(header:Text("some streets two"), footer: Text("Fotter2")){
TaskRow()
TaskRow()
TaskRow()
}
}.listStyle(GroupedListStyle())
}
}
4. 点击Cell跳转的实现
struct ListViewDemo: View {
var body: some View {
let streets = [
Street(name: "The Lodon Street"),
Street(name: "The Joe's Street"),
Street(name: "The House Street")
]
return NavigationView{
List(streets){ street in
NavigationLink(destination:ListViewDetial()){
StreetRow(street: street)
}
}.navigationBarTitle("Streets")
}
}
}
5. 去除Cell右边自带的箭头
NavigationLink会自动为List的Cell添加一个箭头,要想去掉箭头将Cell 放在NavigationLink的外边即可
struct ListViewDemo: View {
var body: some View {
let streets = [
Street(name: "The Lodon Street"),
Street(name: "The Joe's Street"),
Street(name: "The House Street")
]
return NavigationView{
List(streets){ street in
ZStack{
NavigationLink(destination:ListViewDetial()){
EmptyView()
}
StreetRow(street: street)
}
}.navigationBarTitle("Streets")
}
}
}