基于compose组件用LazyVerticalGrid实现3×3的网格数据显示的几种方法

最新推荐文章于 2025-04-07 17:07:51 发布

原创最新推荐文章于 2025-04-07 17:07:51 发布 · 362 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#kotlin #android jetpack

该文介绍了两种在KotlinCompose中使用LazyVerticalGrid显示用户图片的方法。第一种方法通过GridCells.Field定义每行3个图片，用items遍历显示。第二种方法使用GridCells.Fixed并结合forEachIndexed手动控制图片项的添加。

方法一:

class ImageShow(){
   @Composable
   fun UI(){
      LazyVerticalGrid(GridCells.Field(3)){
         items(9, itemContent = {
            UserImage(user = users[it])
         })
      }
   }
   @Composable
   fun userImage(){
      Image(
         painter = painterRecource(user, ImageId),
         contentDescription = null
      )
   }
   @Composable
   @Preview
   fun Preview(){
      TaskTheme{
         surface{
           UI()
         }
      }
   }
}

方法二：

class ImageShow(){
   @Composable
   fun UI(){
      LazyVerticalGrid(GriedCells.Fixed(3)){
         users.forEachIndexed{ index, user ->
            if(index in 0..9){
               item {
                  userImage(user = user)
               }
            }
            
         
         }
      }
   }
   
   fun userImage(user:User){
      Image(){
         painter = painterRecource(user.ImageId)
         contentDiscription = null
      }
   }
   
   fun Preview(){
      TaskTheme{
         surface{
           UI()
         }
      }
   }
}