Jetpack Compose中Column内子视图如何分别设置对齐规则
解决方案
你的问题根源是当前Column2默认是包裹内容高度,其高度刚好等于内部Image+Text的总高度,所以设置的垂直居中规则没有生效,按以下方式修改即可:
- 给Column2添加
Modifier.fillMaxHeight()修饰符,让它撑满父Row的高度 - 保留现有Column2的
verticalArrangement = Arrangement.Center和horizontalAlignment = Alignment.CenterHorizontally配置,这两个属性会让Image和Text作为一个整体在Column2内水平、垂直居中,且Text自动排列在Image正下方
修改后的代码如下:
// 卡片内容 Row( verticalAlignment = Alignment.CenterVertically ) { // 第一列 Column( Modifier .weight(1f) .padding(start = 16.dp, top = 14.dp, bottom = 14.dp) ) { // 原有第一列内容 .... } // 第二列 Column( modifier = Modifier.fillMaxHeight(), // 新增该行,让第二列撑满父容器高度 verticalArrangement = Arrangement.Center, horizontalAlignment = Alignment.CenterHorizontally ) { Image(contentDescription = "", painter = painterResource(id = R.drawable.ic_maximize), modifier = Modifier .padding(start = 25.dp, end = 25.dp) .height(44.dp) .width(44.dp) .clickable( onClick = { // 点击逻辑 } ) ) Text( fontSize = 11.sp, color = colorResource(id = seeMoreTextColor), text = "查看更多" ) } }
布局效果参考:
内容的提问来源于stack exchange,提问作者user924941
相关产品推荐
相关产品推荐

