五、使用Jetpack Compsoe编写一个写小说的Android应用：LazyColumn和ConstraintLayout的使用

前排叠甲：同上一篇。

原本打算这篇写viewModel的，但是它涉及到了很多内容，而且我不太明白，打算先研究研究再说。

本篇则优化一下主界面的视觉效果。

1、LazyColumn的使用

这个玩意查了一下竟然意外的简单，只需要将原来的Column直接改为LazyColumn就成功大半了。我们先定义一个数据，不然一会展示看不出效果。

在MainPage中定义一个数据：

val data = listOf("哈哈","喜喜")

随后改为LazyColumn并嵌套一个函数items：

LazyColumn(
            modifier = Modifier.padding(innerPadding),
        ) {
            items(data){
                Card(),
                ) {}
            }
        }

注意，这里的data就是你的数据集，后面的Card界面直接照搬过来，其中的Text控件中的text属性的值要改为it

Text(text = it）

同时，navController的导航代码也要修改一下，这里的意思就是将data中的对应项传给指定页，同时它传递变量的用法就是${变量}的形式。

navController.navigate("chapter_list_page/${it}")

2、ConstraintLayout的简单使用

原来的行列布局在排布Card中的控件布局时非常笨拙，但是ConstraintLayou却可以用约束来完成这项任务。

首先要添加依赖gradle（app）：

implementation ("androidx.constraintlayout:constraintlayout-compose:1.0.1")

之后在Card中新建ConstraintLayout：

ConstraintLayout(modifier = Modifier
                        .fillMaxSize()) {}

当然要确保这个布局填充满整个Card了，所以用了fillMaxSize()

接下来要在ConstraintLayout中创建变量名称，这一步要在ConstraintLayout的括号内写，在外面写无效：

ConstraintLayout(modifier = Modifier
                        .fillMaxSize()) {
                        val (btnRename , fictionName, btnDelete) = createRefs()}

因为Card里面有三个控件所以声明三个变量。

之后修改行列布局，将按钮放进ConstraintLayout然后添加约束：

IconButton(onClick = { },modifier = Modifier
                         .size(50.dp)
                         .constrainAs(btnRename) {
                             top.linkTo(parent.top)
                             bottom.linkTo(parent.bottom)
                             start.linkTo(parent.start, margin = 8.dp)
                                }) {
                            Image(
                                painter = painterResource(id = R.drawable.btn_rename),
                                contentDescription = "add a book"
                            )
                        }

这是ConstraintLayout的一种写法，这个布局比较简单，所以就用这种了。可以看到在modifier中添加了不少东西。

剩下两个控件也一样，直接贴代码了：

IconButton(onClick = { },modifier = Modifier.size(50.dp)
                            .constrainAs(btnDelete) {
                            top.linkTo(parent.top)
                            bottom.linkTo(parent.bottom)
                            end.linkTo(parent.end, margin = 8.dp)
                        }) {
                            Image(
                                painter = painterResource(id = R.drawable.btn_delete),
                                contentDescription = "add a book"
                            )
                        }

                        Text(
                            text = it,
                            modifier = Modifier
                                .padding(8.dp)
                                .constrainAs(fictionName) {
                                    top.linkTo(parent.top)
                                    bottom.linkTo(parent.bottom)
                                    start.linkTo(btnRename.end, margin = 8.dp)
                                    end.linkTo(btnDelete.start)
                                    width = Dimension.fillToConstraints},
                            fontSize = 20.sp
                        )

可以看到Text中多了一个width属性，它有几种模式，这个看英文就知道是填充满约束空间。

接下来给个图：

注意这里对Card的填充方式做了一下改变，这样观感更好一点。

运行的效果如下：

大功告成！

而这里的data就是日后我们要从数据库内取出的。