美文网首页
SwiftUI学习之列表

SwiftUI学习之列表

作者: 小熊学编程 | 来源:发表于2020-05-09 09:41 被阅读0次

    效果图

    列表页效果图 详情页效果图

    自定义cell

    struct exampleRow: View {
        var model: exampleModel
        
        var body: some View {
            
            return VStack {
                HStack {
                    Image(systemName: "tray")
                    Text(model.title)
                        .font(.headline)
                        .fontWeight(.heavy)
                    Spacer()
                    Text(model.detail)
                        .font(.subheadline)
                        .fontWeight(.light)
                }
                .frame(height: 55, alignment: .leading)
                .edgesIgnoringSafeArea(.all)
            }
        }
    }
    

    数据模型

    struct exampleModel: Identifiable, Hashable {
        var id =  UUID()
        var title: String
        var detail: String
    }
    

    写一个列表

    @State private var listData = [
            exampleModel(title: "Text", detail: "文本"),
            exampleModel(title: "Image", detail: "图像"),
            exampleModel(title: "Button", detail: "按钮")
        ]
        
        init() {
            UITableView.appearance().backgroundColor = UIColor(named: "ListBackgroundColor")
            UITableViewCell.appearance().backgroundColor = UIColor(named: "CellBackgroundColor")
            UITableView.appearance().tableFooterView = UIView()
            //        UITableView.appearance().separatorStyle = .none
            UITableView.appearance().separatorColor = UIColor(named: "ListBackgroundColor")
            UITableView.appearance().separatorInset = UIEdgeInsets(top: 0, left: 16, bottom: 0, right: 16)
            UITableViewCell.appearance().accessoryType = .none
        }
        
        var body: some View {
            func deleteRow(at offsets:IndexSet) {
                listData.remove(atOffsets:offsets)
            }
            
            return NavigationView{
                List{
                    Section(header: Text("我是Header"), footer: Text("我是Footer")) {
                        ForEach(listData, id: \.self) { item in
                            NavigationLink(destination: ExampleDetailView(title: item.title)) {
                                exampleRow(model: item)
                            }.navigationBarTitle(Text("首页"), displayMode: .inline)
                            
                        }.onDelete(perform: deleteRow)
                    }
                    
                }.listStyle(GroupedListStyle())
            }
            
        }
    

    跳转的详情页 (随便写个页面)

    struct ExampleDetailView: View {
        var title: String?
        
        
        var body: some View {
            return ScrollView {
                
                VStack {
                    FunctionView(name: title).padding()
                    FunctionView(name: title).padding()
                }
                
                }.padding(.all, 0.0).background(Color.init("ListBackgroundColor"))
                .navigationBarTitle(Text("家具商城"), displayMode: .inline)
        }
    }
    
    struct FunctionView: View {
        let arr = ["办公家具", "厨房家具", "厕所家具", "客厅家具"]
        var name: String?
        
        
        var body: some View {
            
            HStack {
                ForEach(arr, id: \.self) { item in
                    HStack {
                        Spacer()
                        Button(action: {
                            print(item)
                        }) {
                            VStack {
                                Spacer()
                                Image(systemName: "flame")
                                Text(item).foregroundColor(Color.init("TitleTextColor"))
                            }
                        }
                        Spacer()
                    }
                }
            }
        }
    }
    

    相关文章

      网友评论

          本文标题:SwiftUI学习之列表

          本文链接:https://www.haomeiwen.com/subject/zolbjctx.html