importSwiftUIstructColorList:View{var body: some View{Text("Hello, World!")}}structColorList_Previews:PreviewProvider{staticvar previews: some View{ColorList()}}
二、颜色
在视图结构的顶部,添加一个变量来记录颜色:
var colors:[Color]
三、实现列表
在 body 变量的内部,删除掉占位 Text;在 ScrollView 嵌套中添加一个 HStack,如下:
var body: some View{ScrollView(.horizontal, showsIndicators:false){HStack(alignment:.center, spacing:50){}}}
四、展示矩形
使用 ForEach 在 HStack 内部根据 colors 中的数据分别创建不同颜色的矩形。
此外,修改矩形的 frame,让它看起来与传统 UI 布局更像一些:
var body: some View{ScrollView(.horizontal, showsIndicators:false){HStack(alignment:.center, spacing:20){ForEach(colors, id: \.self){ color inRectangle().foregroundColor(color).frame(width:200, height:300, alignment:.center)}}}}
在 Preview 结构体中传入如下的颜色参数:
structColorList_Previews:PreviewProvider{staticvar previews: some View{ColorList(colors:[.blue,.green,.orange,.red,.gray,.pink,.yellow])}}
var body: some View{ScrollView(.horizontal, showsIndicators:false){HStack(alignment:.center, spacing:230){ForEach(colors, id: \.self){ color inGeometryReader{ geometry inRectangle().foregroundColor(color).frame(width:200, height:300, alignment:.center)}}}}}