Jetpack Compose实现基础布局Flex对比Const

实现此布局

分析：
1.布局整体方式为左右布局，左侧图片 右侧文字 Row。

2. 右侧文本 为上下布局，布局第一层为左右布局，两个文本分别在ui的左右两端。Column 嵌套 Row 和Text。

3.布局整体为圆角，Image为圆形 。
参考代码：

@Preview
@Composable
fun FlexItem() {
    Row(
        modifier = Modifier
            .padding(top = 5.dp, bottom = 5.dp)
            .clip(RoundedCornerShape(5.dp))
            .background(color = Color.White)
            .clickable { }
            .padding(10.dp)
            .fillMaxWidth()
            .wrapContentHeight()
    ) {
        Image(
            painter = painterResource(id = R.mipmap.dog),
            contentDescription = null,
            contentScale = ContentScale.FillBounds,
            modifier = Modifier
                .clip(RoundedCornerShape(50))
                .width(80.dp)
                .height(80.dp)
        )
        Column(Modifier.padding(start = 10.dp)) {
            Row(
                verticalAlignment = Alignment.CenterVertically,
                horizontalArrangement = Arrangement.SpaceBetween,
                modifier = Modifier.fillMaxWidth()
            ) {
                Text(text = "周杰伦", fontSize = 18.sp, fontWeight = FontWeight.Bold)
                Text(text = "未发行", fontSize = 16.sp, fontWeight = FontWeight.Bold, color = Color.Blue)
            }
            Text(text = "今天发新专辑啦", modifier = Modifier.padding(top = 10.dp), color = Color.Gray)
            Text(text = "2022年01月24日15:18:33", modifier = Modifier.padding(top = 10.dp), color = Color.LightGray)
        }
    }
}

对比 ConstraintLayout 布局方式为

@ExperimentalComposeUiApi
@Composable
fun ConstraintLayoutItem(item: Int) {
    ConstraintLayout(
        modifier = Modifier
            .padding(top = 5.dp, bottom = 5.dp)
            .clickable { }
            .fillMaxWidth()
            .clip(RoundedCornerShape(5.dp))
            .background(color = Color.White)
            .padding(10.dp)
            .wrapContentHeight()
//            .border(border = BorderStroke(width = 1.dp, color = Color.Green), shape = RoundedCornerShape(5.dp))
    ) {
        val (img_header, tv_name, tv_content, tv_date, tv_status) = createRefs()
        Image(
            painter = painterResource(id = R.mipmap.dog),
            contentDescription = null,
            contentScale = ContentScale.FillBounds,
            modifier = Modifier
                .constrainAs(img_header) {
                    top.linkTo(parent.top)
                    start.linkTo(parent.start)
                }
                .height(80.dp)
                .width(80.dp)
                .clip(shape = RoundedCornerShape(50))
        )
        Text(text = "周杰伦${item}", modifier = Modifier
            .constrainAs(tv_name) {
                top.linkTo(img_header.top)
                start.linkTo(img_header.end)
            }
            .padding(start = 10.dp),
            fontWeight = FontWeight.Bold,
            fontSize = 18.sp)

        Text(
            text = "今天发新专辑啦",
            modifier = Modifier
                .constrainAs(tv_content) {
                    top.linkTo(tv_name.bottom)
                    start.linkTo(img_header.end)
                }
                .padding(start = 10.dp, top = 10.dp), style = TextStyle(color = Color.Gray))

        Text(
            text = "2022年01月24日11:55:51", modifier = Modifier
                .constrainAs(tv_date) {
                    top.linkTo(tv_content.bottom)
                    start.linkTo(tv_content.start)

                }
                .padding(start = 10.dp, top = 10.dp), style = TextStyle(color = Color.LightGray)
        )
        Text(
            text = "已发行", modifier = Modifier.constrainAs(tv_status) {
                top.linkTo(tv_name.top)
                end.linkTo(parent.end)
            }, color = Color.Blue, fontWeight = FontWeight.Bold, fontSize = 16.sp
        )
    }
}

可以看到从代码量来说，明显Flex布局更少，结构也更清晰。所以推荐Flex布局。