Jetpack Compose中如何让Trash图标垂直居中（不使用Padding）

我有上述UI界面，其中“Trash”图标需要垂直居中，但目前未实现该效果。如何在Jetpack Compose中不使用Padding来实现？以下是我使用包含两个Row的Column编写的代码：

@Composable
fun DisplayShelfInfo(shelfHistoryItem: ShelfHistoryItem){
    Column(modifier = Modifier
        .fillMaxWidth()
        .height(60.dp)
        .padding(top = 5.dp , bottom = 5.dp)
        .background(color = colorResource(R.color.row_back_ground)),
        verticalArrangement = Arrangement.Center,
        horizontalAlignment = Alignment.CenterHorizontally) {
        Row(modifier = Modifier
            .fillMaxWidth()
            .wrapContentHeight()){
            Text(
                text = stringResource(R.string.shelf_nr), color = Color.Black,
                modifier = Modifier.padding(start = 16.dp)
            )
            Text(
                text = (shelfHistoryItem.shelfId).toString(), color = Color.Black,
                modifier = Modifier.padding(start = 16.dp)
            )
            Spacer(Modifier.weight(1f))
            Image(
                painter = painterResource(id = R.drawable.ic_delete),
                modifier = Modifier
                    .padding(end = 5.dp)
                    .align(Alignment.CenterVertically)
                    .clickable {},
                contentDescription = "Delete Image"
            )
        }
        Row(modifier = Modifier
            .fillMaxWidth()
            .wrapContentHeight()){
            Text(
                text = shelfHistoryItem.noOfArticles.toString(), color = Color.Black,
                modifier = Modifier.padding(start = 16.dp)
            )
            Text(
                text = stringResource(R.string.article_count_label), color = Color.Black,

            )
        }
    }
}

解决方法 #

问题根源在于当前Trash图标仅在第一个Row内部垂直居中，而非整个60dp高度的条目容器。通过调整布局结构，利用外层布局的对齐属性即可实现需求：

修改后的代码：

@Composable
fun DisplayShelfInfo(shelfHistoryItem: ShelfHistoryItem){
    Row(
        modifier = Modifier
            .fillMaxWidth()
            .height(60.dp)
            .padding(top = 5.dp, bottom = 5.dp)
            .background(color = colorResource(R.color.row_back_ground)),
        verticalAlignment = Alignment.CenterVertically
    ) {
        // 左侧文本区域，占据剩余水平空间
        Column(modifier = Modifier.weight(1f)) {
            Row(modifier = Modifier.fillMaxWidth()){
                Text(
                    text = stringResource(R.string.shelf_nr), 
                    color = Color.Black,
                    modifier = Modifier.padding(start = 16.dp)
                )
                Text(
                    text = shelfHistoryItem.shelfId.toString(), 
                    color = Color.Black,
                    modifier = Modifier.padding(start = 16.dp)
                )
            }
            Row(modifier = Modifier.fillMaxWidth()){
                Text(
                    text = shelfHistoryItem.noOfArticles.toString(), 
                    color = Color.Black,
                    modifier = Modifier.padding(start = 16.dp)
                )
                Text(
                    text = stringResource(R.string.article_count_label), 
                    color = Color.Black
                )
            }
        }
        
        // Trash图标，自动在整个Row中垂直居中
        Image(
            painter = painterResource(id = R.drawable.ic_delete),
            modifier = Modifier
                .padding(end = 5.dp)
                .clickable {},
            contentDescription = "Delete Image"
        )
    }
}

关键调整点 #

• 外层容器改为Row，并设置verticalAlignment = Alignment.CenterVertically，确保内部元素在垂直方向居中。
• 左侧文本区域用Column包裹并添加weight(1f)，占据除图标外的全部水平空间。
• 将Trash图标从第一个文本Row中移出，放到外层Row中，使其基于整个60dp高度的容器实现垂直居中，无需手动添加Padding调整位置。

内容的提问来源于stack exchange，提问作者Android_programmer_office