Skip to main content

3、List中使用自定义Cell

如果我们每次都要用到相同的Cell，而每次都重复写一些HStack肯定不是一个好的选择，此时我们可以把这些View封装成一个Cell，增加代码的可重用性。

Getting ready​

首先，新建一个SwiftUI项目：CustomRows

How to do it…​

首先，把上个项目的代码复制过来。

  1. 新建一个SwiftUI View文件WeatherRow，在这里定义cell
struct WeatherRow: View {
    var weather: WeatherInfo
    var body: some View {
        HStack {
            Image(systemName: weather.image)
                .frame(width: 50, alignment: .leading)
            Text("\(weather.temp)°F")
                .frame(width: 80, alignment: .leading)
            Text(weather.city)
        }
        .font(.system(size: 25))
        .padding()
    }
}
  1. 如果你要预览的话，可以在WeatherRow_Previews增加点数据
struct WeatherRow_Previews: PreviewProvider {
    static var previews: some View {
        WeatherRow(weather: WeatherInfo(image: "snow", temp: 5, city:"New York"))
    }
}
  1. 修改ContentView.swift，使用我们的WeatherRow
List {
    ForEach(self.weatherData) { weather in
       WeatherRow(weather: weather)
    }
}.listStyle(.grouped)

最终得到同样的结果：

image-20211226155748936

How it works…​

我们将cell的代码单独抽离到WeatherRow中，其他地方如果需要相同的View，那么就可以直接使用WeatherRow了。