效果图

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

自定义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()
                }
            }
        }
    }
}