swiftUI基础-列表和导航

列表

构建数据模型

我们构建一个商品列表首先需要构建商品数据模型Commodity。

/// 我们首先构建列表数据模型
struct Commodity: Hashable, Codable {
    /// 商品id
    var id: Int
    /// 商品名称
    var commodityName: String
    /// 价格
    var price: Float
    /// 图片
    var imageStr: String
    /// 描述
    var description: String
}

创建一个 load(_:) 方法，从应用程序的主包中获取具有给定名称的 JSON 数据。load 方法依赖于返回类型对 Codable 协议的一致性。

func load<T: Decodable>(_ filename: String) -> T {
    let data : Data
    guard let file = Bundle.main.url(forResource: filename, withExtension: nil)
    else {
        fatalError("Couldn't find \(filename) in main bundle.")
    }
    do {
        data = try Data(contentsOf: file)
    } catch {
        fatalError("Couldn't load \(filename) from main bundle:\n\(error)")
    }
    do {
        let decoder = JSONDecoder()
        return try decoder.decode(T.self, from: data)
    } catch {
        fatalError("Couldn't parse \(filename) as \(T.self):\n\(error)")
    }
}

/// 商品数组
var Commoditys:[Commodity] = load("Commoditys.json")
print(Commoditys)

创建行视图

创建单行视图CommodityRow

struct CommodityRow: View {
    var commodity: Commodity

    var body: some View {
        HStack {
            commodity.image
                .resizable()
                .frame(width: 50, height: 50, alignment: .center)
            Text(commodity.commodityName)
            Spacer()
        }
    }
}

创建列表视图CommodityView

struct CommodityView:View {
    
    var body: some View {
        List {
            CommodityRow(commodity:Commoditys[0])
            CommodityRow(commodity:Commoditys[1])
        }
    }
}

动态列表

struct CommodityView:View {
    
    var body: some View {
        List(Commoditys, id: \.id) { commodity in
            CommodityRow(commodity: commodity)
        }
    }
}

导航

当我们想要查看商品的时候，需要在商品详情和列表建立链接。通过将列表嵌入到 NavigationView 中，然后将每一行嵌套在 NavigationLink 中以设置到目标视图的转换，您可以向列表添加导航功能。

首先我们需要写一个详情界面

struct CommodityViewDetail: View {
    var body: some View {
        VStack {
            Image.init("image.png", bundle: Bundle.main)
                .frame(width: 300, height: 300)
            HStack {
                Text("商品名称：")
                    .frame(width: 100, height: 100, alignment: .leading)
                Text("商品价格：")
                    .frame(width: 100, height: 100, alignment: .leading)
                Text("商品描述：")
                    .frame(width: 100, height: 100, alignment: .leading)
            }
            
        }
    }
}

添加导航栏链接详情界面

struct CommodityView:View {
    
    var body: some View {
        NavigationView {
        List(Commoditys, id: \.id) { commodity in
            NavigationLink(destination: CommodityViewDetail(commodity: commodity)){
                CommodityRow(commodity: commodity)
            }
        }
        .navigationTitle("商品列表")
        }
    }
}