书接前文，背景图写好之后，给女朋友瞅了一下，女朋友表示
并下达指示，希望背景图做成烟花的样子，我一寻思，那也简单，也同样是在Canvas里面画圆，扩大画笔的宽度，使用画笔的画虚线API，即可达到烟花的样子。
paint.pathEffect = dashPathEffect(FloatArray(2) { 5f }, 5f)
略微修改了代码，便完成了修改，最后效果如下
看上去还不错，我给7分。但是但是但是，女票当即表示
好家伙，原来她想要的是抖音聊天界面的那种烟花效果，那抖音的动画肯定是美工画的啊，我只是个瑟瑟发抖的程序员，肯定是写不出来哇。
最后一番沟通之后，背景图问题决定暂时搁置，先把APP的主体功能完成了。
一、背景图
第一步给主界面加背景图，Modifier 的 Background 背景图属性，不支持图片，仅支持颜色，所以要加背景图，需要在子布局中添加 Image 组件
ConstraintLayout(
modifier = Modifier
.fillMaxHeight()
.fillMaxWidth()
) {
Image(
painter = painterResource(id = R.mipmap.main_bg),
contentDescription = "",
contentScale = ContentScale.Crop,
modifier = Modifier
.fillMaxHeight()
.fillMaxWidth(),
)
}
所有的Resource资源，都要通过 Compose 新提供的API去获取
API的位置
二、列表
使用LazyColumn组件
LazyColumn(
modifier = Modifier.constrainAs(list) {
start.linkTo(parent.start)
end.linkTo(parent.end)
}.padding(top = 100.dp),
content = {
items(data.size) {
Item(data[it].title, data[it].content, data[it].bg)
}
})
modifier为控件基础的属性，content为列表内容属性，items( size ),内部填item的布局
ViewHolder 布局
private fun Item(
titleString: String,
contentString: String,
bg: Int
) {
Column(
Modifier
.fillMaxWidth()
.height(Dp(150f))
.padding(top = 10.dp, start = 20.dp, end = 20.dp)
) {
ConstraintLayout(
modifier = Modifier
.fillMaxHeight()
.fillMaxWidth()
.clip(RoundedCornerShape(15.dp))
) {
val (title, content) = createRefs()
createVerticalChain(title, content, chainStyle = ChainStyle.Packed)
Image(
painter = painterResource(id = bg),
contentDescription = "",
contentScale = ContentScale.Crop,
modifier = Modifier
.fillMaxHeight()
.fillMaxWidth()
.alpha(0.6f)
)
Text(
text = titleString,
Modifier
.constrainAs(title) {
start.linkTo(parent.start)
end.linkTo(parent.end)
top.linkTo(parent.top)
},
fontSize = 20.sp,
fontWeight = FontWeight.Bold,
)
Text(
text = contentString,
Modifier
.constrainAs(content) {
start.linkTo(parent.start)
end.linkTo(parent.end)
top.linkTo(title.bottom)
},
fontSize = 20.sp,
fontWeight = FontWeight.Bold,
)
}
}
}
