Android Compose中IconButton内Column的图标水平居中问题

我编写了以下Android Material3 Compose代码：

IconButton({}) {
    Column(
        modifier = Modifier.fillMaxSize(),
        verticalArrangement = Arrangement.Center,
        horizontalAlignment = Alignment.CenterHorizontally
    ) {
        Icon(Icons.Filled.Notifications, contentDescription = "notify")
        Text("Notify", fontSize = 8.sp, maxLines = 1,
            overflow = TextOverflow.Clip, softWrap = false)
    }
}

在Android Studio预览中，图标并未水平居中，而是偏左，无法和下方的"Notify"文本对齐。我希望让图标在Column内水平居中，请问该如何修复？（我认为这不是预览Bug）

注：我使用的是Material3，相关导入如下：

import androidx.compose.material.icons.Icons
import androidx.compose.material.icons.filled.Home
import androidx.compose.material3.Button
import androidx.compose.material3.Icon
import androidx.compose.material3.IconButton
import androidx.compose.material3.Text

解决方案 #

问题源于IconButton的默认触摸区域内边距，以及Column设置fillMaxSize()后Icon的默认对齐逻辑。以下两种方式可修复：

1. 给Icon显式添加水平居中修饰符

IconButton({}) {
    Column(
        modifier = Modifier.fillMaxSize(),
        verticalArrangement = Arrangement.Center,
        horizontalAlignment = Alignment.CenterHorizontally
    ) {
        Icon(
            Icons.Filled.Notifications,
            contentDescription = "notify",
            modifier = Modifier.align(Alignment.CenterHorizontally)
        )
        Text("Notify", fontSize = 8.sp, maxLines = 1,
            overflow = TextOverflow.Clip, softWrap = false)
    }
}

2. 修改Column的尺寸修饰符为包裹内容

IconButton({}) {
    Column(
        modifier = Modifier.wrapContentSize(),
        verticalArrangement = Arrangement.Center,
        horizontalAlignment = Alignment.CenterHorizontally
    ) {
        Icon(Icons.Filled.Notifications, contentDescription = "notify")
        Text("Notify", fontSize = 8.sp, maxLines = 1,
            overflow = TextOverflow.Clip, softWrap = false)
    }
}

原因说明 #

• IconButton默认有48dp的最小触摸区域，当Column设置fillMaxSize()时会占满这个区域，但Icon自身尺寸小于该区域，默认左对齐，因此需要显式指定居中。
• 改用wrapContentSize()后，Column仅包裹内容宽度，此时horizontalAlignment = Alignment.CenterHorizontally会直接让内部元素自然居中。

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