Skip to content

SwiftUI组件-list组件

样式预览

图片来自: https://sarunw.com/posts/swiftui-list-style/

示例代码:

swift
import SwiftUI

struct DemoForListDefault: View {
    var body: some View {
        List(0 ..< 50) { x in
            Text("\(x)")
        }.listStyle(.automatic)
    }
}

struct DemoForListPlain: View {
    var body: some View {
        List(0 ..< 50) { x in
            Text("\(x)")
        }.listStyle(.plain)
    }
}

struct DemoForListPlainGroupd: View {
    var body: some View {
        List {
            Section {
                Text("row 1")
                Text("row 2")
                Text("row 3")
            } header: {
                Text("Header")
            } footer: {
                Text("Footer.")
            }
        }.listStyle(.plain)
    }
}

struct DemoForListAutomaticeGrouped: View {
    var body: some View {
        List {
            Section {
                Text("row 1")
                Text("row 2")
                Text("row 3")
            } header: {
                Text("Header")
            } footer: {
                Text("Footer.")
            }
        }.listStyle(.automatic)
    }
}

struct DemoForListGrouped: View {
    var body: some View {
        List {
            Section {
                Text("row 1")
                Text("row 2")
                Text("row 3")
            } header: {
                Text("Header")
            } footer: {
                Text("Footer.")
            }
        }.listStyle(.grouped)
    }
}

@available(iOS 14.0, *)
struct DemoForListInset: View {
    var body: some View {
        List {
            Section {
                Text("row 1")
                Text("row 2")
                Text("row 3")
            } header: {
                Text("Header")
            } footer: {
                Text("Footer.")
            }
        }
        .listStyle(.inset)
    }
}

@available(iOS 14.0, *)
struct DemoForListInsetGroup: View {
    var body: some View {
        List {
            Section {
                Text("row 1")
                Text("row 2")
                Text("row 3")
            } header: {
                Text("Header")
            } footer: {
                Text("Footer.")
            }
        }
        .listStyle(.insetGrouped)
    }
}

#Preview("Default", body: {
    DemoForListDefault()
})

#Preview("Default with Grouped data", body: {
    DemoForListAutomaticeGrouped()
})

#Preview("Grouped", body: {
    DemoForListGrouped()
})

#Preview("Inset", body: {
    if #available(iOS 14.0, *) {
        return DemoForListInset()
    } else {
        return Text("")
    }
})

#Preview("InsetGroup", body: {
    if #available(iOS 14.0, *) {
        return DemoForListInsetGroup()
    } else {
        return Text("")
    }
})

#Preview("Plain", body: {
    DemoForListPlain()
})

#Preview("PlainGrouped", body: {
    DemoForListPlainGroupd()
})
import SwiftUI

struct DemoForListDefault: View {
    var body: some View {
        List(0 ..< 50) { x in
            Text("\(x)")
        }.listStyle(.automatic)
    }
}

struct DemoForListPlain: View {
    var body: some View {
        List(0 ..< 50) { x in
            Text("\(x)")
        }.listStyle(.plain)
    }
}

struct DemoForListPlainGroupd: View {
    var body: some View {
        List {
            Section {
                Text("row 1")
                Text("row 2")
                Text("row 3")
            } header: {
                Text("Header")
            } footer: {
                Text("Footer.")
            }
        }.listStyle(.plain)
    }
}

struct DemoForListAutomaticeGrouped: View {
    var body: some View {
        List {
            Section {
                Text("row 1")
                Text("row 2")
                Text("row 3")
            } header: {
                Text("Header")
            } footer: {
                Text("Footer.")
            }
        }.listStyle(.automatic)
    }
}

struct DemoForListGrouped: View {
    var body: some View {
        List {
            Section {
                Text("row 1")
                Text("row 2")
                Text("row 3")
            } header: {
                Text("Header")
            } footer: {
                Text("Footer.")
            }
        }.listStyle(.grouped)
    }
}

@available(iOS 14.0, *)
struct DemoForListInset: View {
    var body: some View {
        List {
            Section {
                Text("row 1")
                Text("row 2")
                Text("row 3")
            } header: {
                Text("Header")
            } footer: {
                Text("Footer.")
            }
        }
        .listStyle(.inset)
    }
}

@available(iOS 14.0, *)
struct DemoForListInsetGroup: View {
    var body: some View {
        List {
            Section {
                Text("row 1")
                Text("row 2")
                Text("row 3")
            } header: {
                Text("Header")
            } footer: {
                Text("Footer.")
            }
        }
        .listStyle(.insetGrouped)
    }
}

#Preview("Default", body: {
    DemoForListDefault()
})

#Preview("Default with Grouped data", body: {
    DemoForListAutomaticeGrouped()
})

#Preview("Grouped", body: {
    DemoForListGrouped()
})

#Preview("Inset", body: {
    if #available(iOS 14.0, *) {
        return DemoForListInset()
    } else {
        return Text("")
    }
})

#Preview("InsetGroup", body: {
    if #available(iOS 14.0, *) {
        return DemoForListInsetGroup()
    } else {
        return Text("")
    }
})

#Preview("Plain", body: {
    DemoForListPlain()
})

#Preview("PlainGrouped", body: {
    DemoForListPlainGroupd()
})

如何移除padding

使用: .listRowInsets(EdgeInsets())

swift
List {
    ForEach(items) { item in
        ItemRow(item: item)
            .listRowInsets(EdgeInsets())
    }
}
List {
    ForEach(items) { item in
        ItemRow(item: item)
            .listRowInsets(EdgeInsets())
    }
}