實現(xiàn)此布局
image.png
分析：
1.布局整體方式為左右布局歪泳，左側(cè)圖片 右側(cè)文字 Row萝勤。
- 右側(cè)文本 為上下布局，布局第一層為左右布局呐伞，兩個文本分別在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 = "未發(fā)行", fontSize = 16.sp, fontWeight = FontWeight.Bold, color = Color.Blue)
}
Text(text = "今天發(fā)新專輯啦", 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 = "今天發(fā)新專輯啦",
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 = "已發(fā)行", modifier = Modifier.constrainAs(tv_status) {
top.linkTo(tv_name.top)
end.linkTo(parent.end)
}, color = Color.Blue, fontWeight = FontWeight.Bold, fontSize = 16.sp
)
}
}
可以看到從代碼量來說，明顯Flex布局更少癣防，結(jié)構(gòu)也更清晰蜗巧。所以推薦Flex布局。
