{"id":6084,"date":"2022-06-14T15:08:09","date_gmt":"2022-06-14T07:08:09","guid":{"rendered":"http:\/\/123.57.164.21\/?p=6084"},"modified":"2022-06-14T15:08:09","modified_gmt":"2022-06-14T07:08:09","slug":"swiftui%ef%bc%9alist%e8%af%a6%e8%a7%a3","status":"publish","type":"post","link":"https:\/\/92it.top\/?p=6084","title":{"rendered":"SwiftUI\uff1aList\u8be6\u89e3"},"content":{"rendered":"\n

1. \u9690\u85cf\/\u53d6\u6d88List\u7684\u5206\u5272\u7ebf<\/strong><\/p>\n\n\n\n

iOS 13.0+ (\u5168\u5c40\u6548\u679c)<\/p>\n\n\n\n

List (0..<50) { index in\n      Text(\"\\(index)\")\n }\n .onAppear {\n      UITableView.appearance().separatorStyle = .none\n }<\/pre>\n\n\n\n
iOS 14.0+<\/p>\n\n\n\n
List (0..<50) { index in\n      Text(\"\\(index)\")\n }\n.listStyle(SidebarListStyle())\n<\/pre>\n\n\n\n
iOS 15.0+<\/p>\n\n\n\n
func listRowSeparator(_ visibility: Visibility, edges: VerticalEdge.Set = .all) -> some View\n\n\u5176\u8c03\u7528\u65b9\u5f0f\u4e3a\nList (0..<50) { index in\n      Text(\"\\(index)\")\n          .listRowSeparator(.hidden)\n }\n<\/pre>\n\n\n\n
2. \u8bbe\u7f6e\u5de6\u6ed1\u5220\u9664Cell<\/strong><\/p>\n\n\n\n
struct ListViewDemo: View {\n    \n    \/\/\u6570\u636e\u6570\u7ec4\n    @State private var streets = [Street(name: \"The Lodon Street\"), Street(name: \"The Joe's Street\"), Street(name: \"The House Street\")]\n    \n    var body: some View {\n        \n        func deleteRow(at offsets:IndexSet) {\n            streets.remove(atOffsets:offsets)\n        }\n        \n        return List{\n            ForEach(streets, id: \\.self) { street in\n                StreetRow(street: street)\n            }.onDelete(perform: deleteRow)\n        }\n    }\n}\n<\/pre>\n\n\n\n
3. List\u6dfb\u52a0section\u5206\u7ec4\u4ee5\u53ca\u8bbe\u7f6egrouped\u7c7b\u578b<\/strong><\/p>\n\n\n\n
struct ListViewDemo: View {\n    var body: some View {\n        return List{\n            Section(header:Text(\"some streets one\"), footer: Text(\"Fotter1\")){\n                TaskRow()\n                TaskRow()\n                TaskRow()\n            }\n            Section(header:Text(\"some streets two\"), footer: Text(\"Fotter2\")){\n                TaskRow()\n                TaskRow()\n                TaskRow()\n            }\n        }\n    }\n}\n\nstruct TaskRow: View {\n    var body: some View {\n        Text(\"Task data goes here\")\n    }\n}\n<\/pre>\n\n\n\n
\u5728UITableView\u4e2d\u6211\u4eec\u53ef\u4ee5\u8bbe\u7f6eplain\u548cgrouped\u4e24\u79cd\u6837\u5f0f\uff0c\u800c\u9ed8\u8ba4\u662fplain\u6837\u5f0f\uff0cSwiftUI\u4e5f\u4e00\u6837\u3002\u5728swiftUI\u4e2d\u8bbe\u7f6egrouped\u6837\u5f0f\u5f88\u7b80\u5355\uff0c\u53ea\u9700\u8981\u4e3alist\u6dfb\u52a0\u76f8\u5e94\u7684listStyle modifier\uff1a<\/p>\n\n\n\n
struct ListViewDemo: View {\n    var body: some View {\n        return List{\n            Section(header:Text(\"some streets one\"), footer: Text(\"Fotter1\")){\n                TaskRow()\n                TaskRow()\n                TaskRow()\n            }\n            Section(header:Text(\"some streets two\"), footer: Text(\"Fotter2\")){\n                TaskRow()\n                TaskRow()\n                TaskRow()\n            }\n        }.listStyle(GroupedListStyle())\n    }\n}\n<\/pre>\n\n\n\n
4. \u70b9\u51fbCell\u8df3\u8f6c\u7684\u5b9e\u73b0<\/strong><\/p>\n\n\n\n
struct ListViewDemo: View {\n    var body: some View {\n        let streets = [\n        Street(name: \"The Lodon Street\"), \n        Street(name: \"The Joe's Street\"), \n        Street(name: \"The House Street\")\n        ]\n        \n        return NavigationView{\n            List(streets){ street in\n                NavigationLink(destination:ListViewDetial()){\n                    StreetRow(street: street)\n                }\n            }.navigationBarTitle(\"Streets\")\n        }\n    }\n}<\/pre>\n\n\n\n
5. \u53bb\u9664Cell\u53f3\u8fb9\u81ea\u5e26\u7684\u7bad\u5934<\/strong><\/p>\n\n\n\n
NavigationLink\u4f1a\u81ea\u52a8\u4e3aList\u7684Cell\u6dfb\u52a0\u4e00\u4e2a\u7bad\u5934\uff0c\u8981\u60f3\u53bb\u6389\u7bad\u5934\u5c06Cell \u653e\u5728NavigationLink\u7684\u5916\u8fb9\u5373\u53ef<\/p>\n\n\n\n
struct ListViewDemo: View {\n        var body: some View {\n            let streets = [\n            Street(name: \"The Lodon Street\"),\n            Street(name: \"The Joe's Street\"),\n            Street(name: \"The House Street\")\n            ]\n\n            return NavigationView{\n                List(streets){ street in\n                    ZStack{\n                        NavigationLink(destination:ListViewDetial()){\n                            EmptyView()\n                        }\n\n                        StreetRow(street: street)\n                    }\n\n                }.navigationBarTitle(\"Streets\")\n            }\n        }\n    }\n<\/pre>\n\n\n\n
6.\u76f4\u63a5\u4f9d\u8d56Row\u7684\u663e\u793a\u8bbe\u5b9a<\/strong><\/p>\n\n\n\n
struct PrecentList: View {\n    @State var list:[Int] = []\n    var body: some View {\n        List(list,id:\\.self){ i in\n            Image(systemName: \"heart.fill\").foregroundColor(.red).font(.headline)\n            Text(\"\u5b8c\u6210\u5ea6:\")\n            Text(\"\\(i)\")\n                .bold()\n                .foregroundColor(.white).padding(.all,5)\n                .frame(width:(250 * CGFloat(i) \/ 100) + 40,alignment: .trailing)\n                .background(RoundedRectangle(cornerRadius: 10).fill(Color.blue))\n        }\n        .onAppear{\n            _ = (0...30).map{ _ in\n                self.list.append(Int.random(in: 0...50))\n            }\n        }\n    }\n}<\/pre>\n\n\n\n
\"\"<\/figure><\/div>\n\n\n\n
7.\u8bbe\u7f6e\u5355\u4e2aRow\u7684\u80cc\u666f<\/strong><\/p>\n\n\n\n
    .listRowBackground(Color.red)<\/pre>\n\n\n\n
struct ColorList:View{\n    var colors:[Color] = [.red,.yellow,.blue,.green,.pink,.orange]\n    var body:some View{\n        List{\n            ForEach(0..<20) { i in\n                Text(\"ID:\\(i)\").listRowBackground(self.colors[i % self.colors.count])\n            }\n        }\n    }\n}<\/pre>\n\n\n\n
\"\"<\/figure><\/div>\n\n\n\n
8.\u8bbe\u7f6eRow\u7684\u8fb9\u754c\u7f29\u8fdb<\/strong><\/p>\n\n\n\n
    .listRowInsets(EdgeInsets(top: 0, leading: 50, bottom: 0, trailing: 0))<\/pre>\n\n\n\n
struct InsetsList:View{\n    var body:some View{\n        List{\n            Text(\"\u8d1d\u591a\u82ac\").foregroundColor(.white)\n                .listRowBackground(Color.green)\n            Text(\"\u7b2c\u4e94\u94a2\u7434\u534f\u594f\u66f2\").foregroundColor(.blue)\n                .listRowInsets(.init(top: 0, leading: 40, bottom: 0, trailing: 0))\n            Text(\"\u82f1\u96c4\").foregroundColor(.blue)\n                .listRowInsets(.init(top: 0, leading: 40, bottom: 0, trailing: 0))\n            Text(\"\u547d\u8fd0\").foregroundColor(.blue)\n                .listRowInsets(.init(top: 0, leading: 40, bottom: 0, trailing: 0))\n            Text(\"\u83ab\u624e\u7279\").foregroundColor(.white)\n                .listRowBackground(Color.green)\n            Text(\"\u5510\u749c\").foregroundColor(.blue)\n                .listRowInsets(.init(top: 0, leading: 40, bottom: 0, trailing: 0))\n            Text(\"\u8d39\u52a0\u7f57\u7684\u5a5a\u793c\").foregroundColor(.blue)\n                .listRowInsets(.init(top: 0, leading: 40, bottom: 0, trailing: 0))\n        }\n    }\n}<\/pre>\n\n\n\n
\"\"<\/figure><\/div>\n","protected":false},"excerpt":{"rendered":"
1. \u9690\u85cf\/\u53d6\u6d88List\u7684\u5206\u5272\u7ebf iOS 13.0+ (\u5168\u5c40\u6548\u679c) iOS 14.0+ iOS 15.0+ 2 […]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"closed","ping_status":"","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[5],"tags":[],"_links":{"self":[{"href":"https:\/\/92it.top\/index.php?rest_route=\/wp\/v2\/posts\/6084"}],"collection":[{"href":"https:\/\/92it.top\/index.php?rest_route=\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/92it.top\/index.php?rest_route=\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/92it.top\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/92it.top\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=6084"}],"version-history":[{"count":2,"href":"https:\/\/92it.top\/index.php?rest_route=\/wp\/v2\/posts\/6084\/revisions"}],"predecessor-version":[{"id":6089,"href":"https:\/\/92it.top\/index.php?rest_route=\/wp\/v2\/posts\/6084\/revisions\/6089"}],"wp:attachment":[{"href":"https:\/\/92it.top\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=6084"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/92it.top\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=6084"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/92it.top\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=6084"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}