SwiftUI学习笔记-【列表】

路很长OoO
1,232 阅读12分钟

前言

上节我们学习了基本布局的编写,这节课我们必须把列表给玩坏了

提示：文章中错误希望指正

一、List

基本上每一个大型的移动端App或者PC端对于大量的同类型数据或规则排布的UI都会选择列表。在Android里面可能都用过【ListView，GridView和RecyclerView】，Flutter中可能用过ListView以及GridView等。那我们来试一试SwiftUI

1.List基本的滑动容器控件

List作为基本的滑动容器部件。当开UI页面是单纯的控件排版[无数据源,很少数据源且固定数据]那么我们可以使用List和HStack以及VStack组合等进行绘制。如下:图片显的古老别在意,模仿喜马拉雅听说写的页面喜欢的可以去阅读。

  • 如上图我们应该经常遇到123狂欢这样的水平超出可滑动的布局吧。 代码分析
List{
 HStack{
    CicleImage
    Text
 }
 HStack{
    CicleImage
    Text
 }
 HStack{
    CicleImage
    Text
 }
 HStack{
    CicleImage
    Text
 }
 HStack{
    CicleImage
    Text
 }
 HStack{
    CicleImage
    Text
 }
 .......
}

拿出你最快的两分钟写出来，再用剩下的5秒钟ctrl+c,ctrl+v...ctrl+v...慢点我怕你滑不完我的代码如下:

struct SwiftUIView_List: View {
    var body: some View {
        return List(){
            ximalayaListenApp()
        }
   
}
 struct ximalayaListenApp: View{
        var body: some View{
            VStack{
                Image("laopo").resizable().clipShape(Circle()).frame(width: 60, height: 60, alignment:       .center      )
                Text("老婆")
            }
            VStack{
                Image("path_img").resizable().clipShape(Circle()).frame(width: 60, height: 60, alignment: .center)
                Text("老公")
            }
            VStack{
                Image("head_coply").resizable().clipShape(Circle()).frame(width: 60, height: 60, alignment:       .center      )
                Text("老爹")
            }
            VStack{
                Image("head_boy").resizable().clipShape(Circle()).frame(width: 60, height: 60, alignment:       .center      )
                Text("儿子")
            }
            VStack{
                Image("longnv").resizable().clipShape(Circle()).frame(width: 60, height: 60, alignment:       .center      )
                Text("老婆")
            }
            VStack{
                Image("laopo").resizable().clipShape(Circle()).frame(width: 60, height: 60, alignment:       .center      )
                Text("老婆")
            }
        }
    }

来看看效果,😂低级错误,设置一下方向即可,😄没找到...!特么尴尬。我在Android里面用过ScrollView,Flutter里面用过ScrollView以及ListView是可以实现的,只需要设置方向即可。 


import SwiftUI

struct SwiftUIView_List: View {
    var body: some View {
      List(){
            Text("这都可以么").frame(width:   100  , height:   100  , alignment:   .center  ).shadow(radius:   10  ).background(Color.blue).clipShape(RoundedCorner(corners: [UIRectCorner.allCorners], cornerRaduiWidth: 11, cornerRaduiHeight: 11)).foregroundColor(.white)
            Text("这都可以么").frame(width: 100, height:   100  , alignment:   .center  ).shadow(radius:   10  ).background(Color.blue).clipShape(RoundedCorner(corners: [UIRectCorner.allCorners], cornerRaduiWidth: 11, cornerRaduiHeight: 11)).foregroundColor(.white)
            Text("这都可以么").frame(width:   100  , height:   100  , alignment:   .center  ).shadow(radius:   10  ).background(Color.blue).clipShape(RoundedCorner(corners: [UIRectCorner.allCorners], cornerRaduiWidth: 11, cornerRaduiHeight: 11)).foregroundColor(.white)
            Text("这都可以么").frame(width:   100  , height:   100  , alignment:   .center  ).shadow(radius:   10  ).background(Color.blue).clipShape(RoundedCorner(corners: [UIRectCorner.allCorners], cornerRaduiWidth: 11, cornerRaduiHeight: 11)).foregroundColor(.white)
            Text("这都可以么").frame(width:   100  , height:   100  , alignment:   .center  ).shadow(radius:   10  ).background(Color.blue).clipShape(RoundedCorner(corners: [UIRectCorner.allCorners], cornerRaduiWidth: 11, cornerRaduiHeight: 11)).foregroundColor(.white)
            Text("这都可以么").frame(width:   100  , height:   100  , alignment:   .center  ).shadow(radius:   10  ).background(Color.blue).clipShape(RoundedCorner(corners: [UIRectCorner.allCorners], cornerRaduiWidth: 11, cornerRaduiHeight: 11)).foregroundColor(.white)
            Text("这都可以么").frame(width:   100  , height:   100  , alignment:   .center  ).shadow(radius:   10  ).background(Color.blue).clipShape(RoundedCorner(corners: [UIRectCorner.allCorners], cornerRaduiWidth: 11, cornerRaduiHeight: 11)).foregroundColor(.white)
            Text("这都可以么").frame(width:   100  , height:   100  , alignment:   .center  ).shadow(radius:   10  ).background(Color.blue).clipShape(RoundedCorner(corners: [UIRectCorner.allCorners], cornerRaduiWidth: 11, cornerRaduiHeight: 11)).foregroundColor(.white)
            Text("这都可以么").frame(width:   100  , height:   100  , alignment:   .center  ).shadow(radius:   10  ).background(Color.blue).clipShape(RoundedCorner(corners: [UIRectCorner.allCorners], cornerRaduiWidth: 11, cornerRaduiHeight: 11)).foregroundColor(.white)
            Text("这都可以么").frame(width:   100  , height:   100  , alignment:   .center  ).shadow(radius:   10  ).background(Color.blue).clipShape(RoundedCorner(corners: [UIRectCorner.allCorners], cornerRaduiWidth: 11, cornerRaduiHeight: 11)).foregroundColor(.white)
        }.onAppear(){
            UITableView.appearance().separatorStyle = .none
        }
    }
}

struct SwiftUIView_List_Previews: PreviewProvider {
    static var previews: some View {
        SwiftUIView_List()
    }
}

那么我们去找找SwiftUI ScrollView有没有,没问题的我们拿过来试一试效果。通过来控制水平滑动方向.horizontal

struct SwiftUIView_List: View {
    var body: some View {
        return ScrollView(.horizontal, showsIndicators: false){
            HStack(){
                ximalayaListenApp()
            }
        }
   
}
 struct ximalayaListenApp: View{
        var body: some View{
            VStack{
                Image("laopo").resizable().clipShape(Circle()).frame(width: 60, height: 60, alignment:        .center      )
                Text("老婆")
            }
            VStack{
                Image("path_img").resizable().clipShape(Circle()).frame(width: 60, height: 60, alignment: .center)
                Text("老公")
            }
            VStack{
                Image("head_coply").resizable().clipShape(Circle()).frame(width: 60, height: 60, alignment:        .center      )
                Text("老爹")
            }
            VStack{
                Image("head_boy").resizable().clipShape(Circle()).frame(width: 60, height: 60, alignment:        .center      )
                Text("儿子")
            }
            VStack{
                Image("longnv").resizable().clipShape(Circle()).frame(width: 60, height: 60, alignment:        .center      )
                Text("老婆")
            }
            VStack{
                Image("laopo").resizable().clipShape(Circle()).frame(width: 60, height: 60, alignment:        .center      )
                Text("老婆")
            }
            VStack{
                Image("head_coply").resizable().clipShape(Circle()).frame(width: 60, height: 60, alignment:        .center      )
                Text("老爹")
            }
            VStack{
                Image("head_boy").resizable().clipShape(Circle()).frame(width: 60, height: 60, alignment:        .center      )
                Text("儿子")
            }
            VStack{
                Image("longnv").resizable().clipShape(Circle()).frame(width: 60, height: 60, alignment:        .center      )
                Text("老婆")
            }
            VStack{
                Image("laopo").resizable().clipShape(Circle()).frame(width: 60, height: 60, alignment:        .center      )
                Text("老婆")
            }
            
        }
    }

今天的主角是列表控件，所以就此罢过...后面我们肯定会单独章节讲滑动控件...的使用以及滑动测量等..

  • 横着不行竖着来😅:只要超出屏幕就可滑动,基本和Flutter的ListView[Text,Text....]一样。List作为超出屏幕可滑动容器控件,里面可以任意的放置其他控件,不妨自己试一试。

2.List绑定集合数据源

  • 当然我们一般不会这么写。一般数据源可能百千条或者上千万条【淘宝滑动我是没超过200条..我对象应该可以破千破万】,这种情况我们就不能向上面这样去写了,而是绑定数据源【常见的有集合和数组对于基本的swift语言我是没看过所以后面我会拿出一两节补充，现在都是用kt和感觉+度娘基本解决】。首先我们来模拟一个数据源数组。数组类型定义如下:
//创建数据源模型,开始这里没有实现Identifiable粗错了，见笑了第一次写这玩意。
struct User:Identifiable{
    var id: Int
    var firstName: String
    var lastName: String
}
//创建SwiftUI List
struct SwiftUIView_List: View {
    var body: some View {
        let users=getDataList()
        return List(users) { user in
            //Flutter里面{this.musser}才用声明muser吧。用意何在？
            contentItem(muser: user)
        }
        
        
    }
   
}
//列表的item
struct contentItem: View{
    var muser:User
    var body: some View{
        Text("\(muser.firstName)").frame(width:   100   , height:   100   , alignment:   .center   ).shadow(radius:   10   ).background(Color.blue).clipShape(RoundedCorner(corners: [UIRectCorner.allCorners], cornerRaduiWidth: 11, cornerRaduiHeight: 11)).foregroundColor(.white)
    }
    
  
}


func getDataList()->Array<User>
{
    let user1 = User(id: 1, firstName: "Piper1", lastName: "Chapman")
    let user2 = User(id: 2, firstName: "GGloria", lastName: "Mendoza")
    let user3 = User(id: 3, firstName: "LGloria3", lastName: "Mendoza")
    let user4 = User(id: 4, firstName: "WGloria5", lastName: "SMendoza")
    let user5 = User(id: 5, firstName: "LGlorias", lastName: "MCendoza")
    let user6 = User(id: 6, firstName: "SSGAloria", lastName: "AMendoza")
    let user7 = User(id: 7, firstName: "LLCGloria", lastName: "CMendoza")
    let user8 = User(id: 8, firstName: "WGlria", lastName: "MMendoza")
    let user9 = User(id: 9, firstName: "GlorSSia", lastName: "LMendoza")
    let user10 = User(id: 10, firstName: "MGloria", lastName: "QMendoza")
    let user14 = User(id: 11, firstName: "WGloria", lastName: "WMendoza")
    let user11 = User(id: 12, firstName: "GGloria", lastName: "LJMendoza")
    let user12 = User(id: 13, firstName: "HGlid", lastName: "UMendoza")
    let user13 = User(id: 14, firstName: "Lme", lastName: "OMendoza")
    return [user1,user2,user3,user4,user5,user6,user7,user8,user9,user10,user11,user12,user13,user14]
}

struct SwiftUIView_List_Previews: PreviewProvider {
    static var previews: some View {
        Group {
            SwiftUIView_List()
        }
    }
}
  • 这里出现了错误,要求User是一个Identifiable持有身份标识的类。可以点List进去看看rowContent要求数据类需要去实现Identifiable。

更加简介的写法

    return List(users) { user in
            //阔怕这里和Flutter不一样呀Flutter里面{this.musser}才用声明muser吧
            contentItem(muser: user)
        }
    //可以替换为下面
     return List(users,rowContent: contentItem.init)

  • 接下来我们把上节的B站布局拿过来看看效果。 
import SwiftUI

struct User:Identifiable{
    var id: Int
    var firstName: String
    var lastName: String
    var image:String
}

struct SwiftUIView_List: View {
    var body: some View {
        let users=getDataList()
       
       
          //无索引初始化
//        return List(users) { user in
//            //阔怕这里和Flutter不一样呀Flutter里面{this.musser}才用声明muser吧
//            contentItem(muser: user)
//        }



          //简便初始化
//        return List(users,rowContent: contentItem.init)
//        return List(users,rowContent: bilibliItem.init)
         
       
        return List(users,rowContent: bilibliHStackItem.init)
   
}
    //b站的item
struct bilibliHStackItem: View{
        var muser:User
        var body: some View {
            HStack(){
                bilibliItem(user: muser)
               
            }
        }
    }
//文字
struct contentItem: View{
    var muser:User
    var body: some View{
        Text("\(muser.firstName)").frame(width:   100   , height:   100   , alignment:   .center   ).shadow(radius:   10   ).background(Color.blue).clipShape(RoundedCorner(corners: [UIRectCorner.allCorners], cornerRaduiWidth: 11, cornerRaduiHeight: 11)).foregroundColor(.white)
    }
    
  
}

//Item
struct bilibliItem: View{
    var user:User
    var body: some View {
        VStack{
        VStack(alignment:.leading, spacing: 1){
            ZStack(alignment:.bottom){
                Image("\(user.image)").resizable().frame(width:190, height: 125, alignment:      .center    )
                HStack(){
                    HStack(){
                        Image("bofang").resizable().frame(minWidth: 15, idealWidth:7, maxWidth:7, minHeight: 15, idealHeight: 5, maxHeight:5, alignment:      .center    ).padding(EdgeInsets(top: 5, leading: 1, bottom: 5, trailing:1))
                        Text("35.5万").font(.footnote).foregroundColor(.white)
                    }.frame(alignment:      .center    )
                    Spacer()
                    HStack(){
                        Image("pinglun").resizable().frame(minWidth: 15, idealWidth:5, maxWidth:5, minHeight: 15, idealHeight: 5, maxHeight:5, alignment:      .center    ).padding(EdgeInsets(top: 5, leading: 1, bottom: 5, trailing:1))
                        Text("28.77").lineLimit(1).font(.footnote).foregroundColor(.white)
                    }
                    HStack(){
                        Text("14:45").font(.footnote).foregroundColor(.white)
                    }
                }.background(Color.black.opacity(0.6))
                //标题
                
            }.frame(width: 190, height:125, alignment:      .center    )
            Text("冰与火之歌").font(.system(size:22)).padding(EdgeInsets.init(top: 11.0, leading:11,bottom:0,trailing:26)).background(Color.white)
            HStack(alignment:.center) {
                Text("28万人点赞")
                Spacer()
                Image("ziyuan").resizable().frame(minWidth: 22, idealWidth:5, maxWidth:5, minHeight: 22, idealHeight: 5, maxHeight:5, alignment:      .center    ).padding(EdgeInsets(top: 5, leading: 1, bottom: 5, trailing:0))
            }.frame(width: 170,height:50).background(Color.white).padding(EdgeInsets(top: 11, leading: 11, bottom: 11, trailing:1))
        
           
        }
            
        }.frame(width: 180, height:210, alignment:      .center    ).background(Color.white).clipShape(RoundedCorner(corners:[UIRectCorner.topLeft,UIRectCorner.topRight], cornerRaduiWidth:22)).shadow(color: Color     .black    .opacity(0.3), radius:      10    , x: 11, y: 11).padding(EdgeInsets(top: 20, leading: 1, bottom: 11, trailing:1))
    }


}

func getDataList()->Array<User>
{
    let user1 = User(id: 1, firstName: "Piper1", lastName: "Chapman",image:"iimage")
    let user2 = User(id: 2, firstName: "GGloria", lastName: "Mendoza",image:"laopo")
    let user3 = User(id: 3, firstName: "LGloria3", lastName: "Mendoza",image:"path_img")
    let user4 = User(id: 4, firstName: "WGloria5", lastName: "SMendoza",image:"head_boy")
    let user5 = User(id: 5, firstName: "LGlorias", lastName: "MCendoza",image:"dao")
    let user6 = User(id: 6, firstName: "SSGAloria", lastName: "AMendoza",image:"head_coply")
    let user7 = User(id: 7, firstName: "LLCGloria", lastName: "CMendoza",image:"head_dog")
    let user8 = User(id: 8, firstName: "WGlria", lastName: "MMendoza",image:"head_god")
    let user9 = User(id: 9, firstName: "GlorSSia", lastName: "LMendoza",image:"head_godd")
    let user10 = User(id: 10, firstName: "MGloria", lastName: "QMendoza",image:"longnv")
    let user14 = User(id: 11, firstName: "WGloria", lastName: "WMendoza",image:"head_hl")
    let user11 = User(id: 12, firstName: "GGloria", lastName: "LJMendoza",image:"path_img")
    let user12 = User(id: 13, firstName: "HGlid", lastName: "UMendoza",image:"head_boy")
    let user13 = User(id: 14, firstName: "Lme", lastName: "OMendoza",image:"dao")
    return [user1,user2,user3,user4,user5,user6,user7,user8,user9,user10,user11,user12,user13,user14]
}

struct SwiftUIView_List_Previews: PreviewProvider {
    static var previews: some View {
        Group {
            SwiftUIView_List()
        }
    }
}

}

3.List实现网格布局GridView

一般都是两列的列表,我们这里只是一列。太low了我们竟然学了这一个列表那我们也来实现一下。我们可以想到通过HStack来排布如下:

struct bilibliHStackItem: View{
    var muser:User
    var body: some View {
        HStack(){
            bilibliItem(user: muser)
            bilibliItem(user: muser)
        }
    }
}

完整代码

import SwiftUI

struct User:Identifiable{
    var id: Int
    var firstName: String
    var lastName: String
}

struct SwiftUIView_List: View {
    var body: some View {
        let users=getDataList()
//        return List(users) { user in
//            //阔怕这里和Flutter不一样呀Flutter里面{this.musser}才用声明muser吧
//            contentItem(muser: user)
//        }
        
//        return List(users,rowContent: contentItem.init)
        //return List(users,rowContent: bilibliItem.init)
        return List(users,rowContent: bilibliHStackItem.init)
    }
   
}

struct contentItem: View{
    var muser:User
    var body: some View{
        Text("\(muser.firstName)").frame(width:   100   , height:   100   , alignment:   .center   ).shadow(radius:   10   ).background(Color.blue).clipShape(RoundedCorner(corners: [UIRectCorner.allCorners], cornerRaduiWidth: 11, cornerRaduiHeight: 11)).foregroundColor(.white)
    }
    
  
}

struct bilibliHStackItem: View{
    var muser:User
    var body: some View {
        HStack(){
            bilibliItem(user: muser)
            bilibliItem(user: muser)
        }
    }
}
//Item
struct bilibliItem: View{
    var user:User
    var body: some View {
        VStack{
        VStack(alignment:.leading, spacing: 1){
            ZStack(alignment:.bottom){
                Image("iimage").resizable().frame(width:190, height: 125, alignment:         .center       )
                HStack(){
                    HStack(){
                        Image("bofang").resizable().frame(minWidth: 15, idealWidth:7, maxWidth:7, minHeight: 15, idealHeight: 5, maxHeight:5, alignment:         .center       ).padding(EdgeInsets(top: 5, leading: 1, bottom: 5, trailing:1))
                        Text("35.5万").font(.footnote).foregroundColor(.white)
                    }.frame(alignment:         .center       )
                    Spacer()
                    HStack(){
                        Image("pinglun").resizable().frame(minWidth: 15, idealWidth:5, maxWidth:5, minHeight: 15, idealHeight: 5, maxHeight:5, alignment:         .center       ).padding(EdgeInsets(top: 5, leading: 1, bottom: 5, trailing:1))
                        Text("28.77").lineLimit(1).font(.footnote).foregroundColor(.white)
                    }
                    HStack(){
                        Text("14:45").font(.footnote).foregroundColor(.white)
                    }
                }.background(Color.black.opacity(0.6))
                //标题
                
            }.frame(width: 190, height:125, alignment:         .center       )
            Text("冰与火之歌").font(.system(size:22)).padding(EdgeInsets.init(top: 11.0, leading:11,bottom:0,trailing:26)).background(Color.white)
            HStack(alignment:.center) {
                Text("28万人点赞")
                Spacer()
                Image("ziyuan").resizable().frame(minWidth: 22, idealWidth:5, maxWidth:5, minHeight: 22, idealHeight: 5, maxHeight:5, alignment:         .center       ).padding(EdgeInsets(top: 5, leading: 1, bottom: 5, trailing:0))
            }.frame(width: 170,height:50).background(Color.white).padding(EdgeInsets(top: 11, leading: 11, bottom: 11, trailing:1))
        
           
        }
            
        }.frame(width: 180, height:210, alignment:         .center       ).background(Color.white).clipShape(RoundedCorner(corners:[UIRectCorner.topLeft,UIRectCorner.topRight], cornerRaduiWidth:22)).shadow(color: Color        .black       .opacity(0.3), radius:         10       , x: 11, y: 11).padding(EdgeInsets(top: 20, leading: 1, bottom: 11, trailing:1))
    }


}

func getDataList()->Array<User>
{
    let user1 = User(id: 1, firstName: "Piper1", lastName: "Chapman")
    let user2 = User(id: 2, firstName: "GGloria", lastName: "Mendoza")
    let user3 = User(id: 3, firstName: "LGloria3", lastName: "Mendoza")
    let user4 = User(id: 4, firstName: "WGloria5", lastName: "SMendoza")
    let user5 = User(id: 5, firstName: "LGlorias", lastName: "MCendoza")
    let user6 = User(id: 6, firstName: "SSGAloria", lastName: "AMendoza")
    let user7 = User(id: 7, firstName: "LLCGloria", lastName: "CMendoza")
    let user8 = User(id: 8, firstName: "WGlria", lastName: "MMendoza")
    let user9 = User(id: 9, firstName: "GlorSSia", lastName: "LMendoza")
    let user10 = User(id: 10, firstName: "MGloria", lastName: "QMendoza")
    let user14 = User(id: 11, firstName: "WGloria", lastName: "WMendoza")
    let user11 = User(id: 12, firstName: "GGloria", lastName: "LJMendoza")
    let user12 = User(id: 13, firstName: "HGlid", lastName: "UMendoza")
    let user13 = User(id: 14, firstName: "Lme", lastName: "OMendoza")
    return [user1,user2,user3,user4,user5,user6,user7,user8,user9,user10,user11,user12,user13,user14]
}

struct SwiftUIView_List_Previews: PreviewProvider {
    static var previews: some View {
        Group {
            SwiftUIView_List()
        }
    }
}

写过前端的都通过index处理过类似上图中的问题吧，如果没有我告诉你😄,users数组作为数据源，我们可以将item的左右通过index来分为users[index]和users[index+1]这样我们的列表就可以按照我们需求显示了好好想想。算了我们来分析一波:

index=0时候 users[0]  users[1] 
index=1时候 users[2]  users[3]
index=2时候 users[4]  users[5]如此类推
.....
index=index时候 users[index*2] users[index*2+1]
应该很完美了吧
...等等我们的index总共有14
index=14时候 user[14*2] user[14*2+1]?what？这样会出错吧。超出数组索引了。
我就不尝试了你们可以入坑。那我们需要判断[index小于7]才对。
我靠分析完美..靠swift有没有index提供的初始化方法呢？不要太尴尬了..
一顿疯狂操作发现的缺有。毫无问题

那么我们代码应该是如下：

struct SwiftUIView_List: View {
    var body: some View {
        let users=getDataList()
        //含有index初始化list
        return List(users.indices, id: \.self) { index in
         bilibliHStackItems(muser:users,indexs: index)

     }
   
}
struct bilibliHStackItems: View{
            var muser:Array<User>
            var indexs:Int
            var body: some View {
                if (indexs<7) {
                    HStack(){
                        bilibliItem(user: muser[indexs*2])
                        bilibliItem(user: muser[indexs*2+1])
                       
                    }
                }
               
            }
        }

说好的网格布局呢？我们来分析一波继续,网格布局意味着多行多列吧

index=0时候 users[0]  users[1] user[2]
index=1时候 users[3]  users[4] user[5]
index=2时候 users[6]  users[7] user[8]如此类推
.....
index=index时候 users[index*3] users[index*3+1] users[index*3+2]
需要判断 index小于users.size/3
所以我们可以通过这个公示来进行排列
这里需要注意这个index是list遍历的index

struct SwiftUIView_List: View {
    var body: some View {
        let users=getDataList()
        return List(users.indices, id: \.self) { index in
            //通过自定义columCount来限制列的个数。
            nColumItems(muser:users,indexs: index,columCount:1)
            }
   
}

struct nColumItems: View{
                var muser:Array<User>
                var indexs:Int
                var columCount=4
                var body: some View {
                    HStack(alignment: .center){
                        //每一行需要 columCount 遍历的次数
                        if(indexs<(muser.count/columCount)){
                            //users[index*3] users[index*3+1] users[index*3+2]
                            ForEach(0 ..< columCount) {mindex in
                                Spacer()
                                //Text(self.muser[indexs*columCount+mindex].firstName)
                                contentRowItem(muser:self.muser[indexs*columCount+mindex])
                                Spacer()
                            }
                      
                        }
}

效果如下:

细心的哥们会发现数据不全问题。如果我数据有14条。而我的一行有3列,那么还会剩余14-(14/3*3)=2条数据没画出来上图第三个就是。当然是我们计算时候把最后两天没有绘制,我们这里继续完善把剩余的也进行绘制出来。如下

代码如下：

struct SwiftUIView_List: View {
    var body: some View {
      let users=getDataList()
        return List(users.indices, id: \.self) { index in
            nColumItems(muser:users,indexs: index,columCount:3)
        
    

     }
   
}

struct nColumItems: View{
                var muser:Array<User>
                var indexs:Int
                var columCount=4
                var body: some View {
                    HStack(alignment: .center){
                        //每一行需要 columCount 遍历的次数
                        if(indexs<(muser.count/columCount)){
                            //users[index*3] users[index*3+1] users[index*3+2]
                            ForEach(0 ..< columCount) {mindex in
                                Spacer()
                                //Text(self.muser[indexs*columCount+mindex].firstName)
                                contentRowItem(muser:self.muser[indexs*columCount+mindex])
                                Spacer()
                            }
                      
                        }else if(indexs==(muser.count/columCount)){
                                //剩下的数据继续遍历即可
                                let couns=muser.count-columCount*(muser.count/columCount)
                                var width: CGFloat = 0
                                ForEach(0..<columCount){endIndex in
                                     if(endIndex<couns){
                                      Spacer()
                                       GeometryReader(){geo in
                                        contentRowItem(muser:self.muser[indexs*columCount]).onAppear(){
                                            width=geo.size.width


                                        }
                                        Spacer()
                                     }

                                    }else{
                                        //这里其实应该计算没有满足一行n列的个数来绘制同样宽度的容器来等分列表宽，才可以完美展示。这里就不费时间了
                                        Spacer()
                                        Text("").frame(width:41)
                                        Spacer()


                                    }
                                }


                            }
                        }.frame(alignment: /*@START_MENU_TOKEN@*/.center/*@END_MENU_TOKEN@*/)
                    
                   
                }
            }
    struct contentRowItem: View{
            var muser:User
            var body: some View{
                Text("\(muser.firstName)").frame(width:48   , height: 65   , alignment:   .center   ).shadow(radius:   10   ).background(Color.blue).clipShape(RoundedCorner(corners: [UIRectCorner.allCorners], cornerRaduiWidth: 11, cornerRaduiHeight: 11)).foregroundColor(.white)
            }
            
          
        }

通过上面的编写我们发现List来绘制网格布局是比较繁琐的且需要计算对其等...这样只会得不偿失。那Swift有没有提供相关的Api呢。我们继续探索。

11:55了明天继续...

avatar
文章
阅读
粉丝