玩会儿Compose，原神主题列表

Jetpack Compose出来有一段时间了，一直都没有去尝试，这次有点想法去玩一玩这个声明性界面工具，就以“原神”为主题写个列表吧。

整体设计参考DisneyCompose

效果图：

数据源

因为数据比较简单，也就只包含图片、姓名、描述等。所以在后台数据存储上选择的是Bmob后端云，一个方便前端开发的后端服务平台。

主要数据也是从原神各大网站搜集下来的，新建表结构并且将数据填充，我们简单看一下Bmob的后台。

数据准备好了，那就开始我们的Compose之旅。

首页UI绘制

整体结构

从上面的项目效果图来看，首页总布局属于是一个网格列表，平分两格，列表中的每个Item上方带有头像，头像下面是角色名称以及角色其他信息。

网格布局

因为整体分成两列，所以选择的是网格布局，Compose提供了一个实现-LazyVerticalGrid。

fun LazyVerticalGrid(
    cells: GridCells,
    modifier: Modifier = Modifier,
    state: LazyListState = rememberLazyListState(),
    contentPadding: PaddingValues = PaddingValues(0.dp),
    content: LazyGridScope.() -> Unit
)

LazyVerticalGrid中有几个重要参数先说明一下：

• GridCells ：主要控制如何将单元格构建为列，如GridCells.Fixed(2)，表示两列平分。
• Modifier ： 主要用来对列表进行额外的修饰。
• PaddingValues ：主要设置围绕整个内容的padding。
• LazyListState ：用来控制或观察列表状态的状态对象

首页布局是平分两列的网格布局，那相应的代码如下：

LazyVerticalGrid(cells = GridCells.Fixed(2)) {}

单个Item

看过了外部框架，那现在来看每个Item的布局。每个Item为卡片式，外边框为圆角，且带有阴影。内部上方是一张图片Image，图片下方是两行文字Text。那Item具体该怎样布局？

我们先来看看在Compose之前，在xml中是怎么写？例如使用ConstraintLayout布局，顶部放一个ImageView，再来一个TextView layout_constraintTop_toBottomOf ImageView，最后在来个TextView也TopToBottomOf第一个TextView。

那使用Compose应该怎么写？

其实在Compose里也存在着ConstraintLayout布局并且具体Api的调用思路与在xml中使用也是一致的。我们就来看看具体操作。

ConstraintLayout() {
Image()
Text()
Text()
}