效果图
列表页效果图
详情页效果图
自定义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()
}
}
}
}
}
网友评论