如何在Jetpack Compose按钮中让标题文本居中于按钮本身？

要实现标题相对于按钮整体居中、价格完整显示的需求，核心是让标题的布局参考按钮的父容器中心，而非自身可用空间。以下是两种可行方案：

方法一：使用ConstraintLayout（推荐） #

利用ConstraintLayout的约束绑定能力，直接将标题与父容器的水平中心对齐，同时确保价格始终完整显示、图标固定位置。

Button(
    onClick = {},
    modifier = Modifier.fillMaxWidth(),
    contentPadding = PaddingValues(horizontal = 16.dp, vertical = 8.dp)
) {
    ConstraintLayout(modifier = Modifier.fillMaxWidth()) {
        val (icon, title, price) = createRefs()

        // 固定尺寸图标：左侧对齐，垂直居中
        Icon(
            imageVector = Icons.Default.ShoppingCart,
            contentDescription = "购物车图标",
            modifier = Modifier
                .size(24.dp)
                .constrainAs(icon) {
                    start.linkTo(parent.start)
                    centerVerticallyTo(parent)
                }
        )

        // 价格文本：右侧对齐，垂直居中，优先完整显示
        Text(
            text = "€2000,00",
            style = MaterialTheme.typography.titleMedium,
            modifier = Modifier.constrainAs(price) {
                end.linkTo(parent.end)
                centerVerticallyTo(parent)
            }
        )

        // 标题文本：绑定父容器水平中心，同时避免与图标、价格重叠
        Text(
            text = "Buy Now!",
            style = MaterialTheme.typography.bodyLarge,
            maxLines = 1,
            overflow = TextOverflow.Ellipsis,
            modifier = Modifier.constrainAs(title) {
                centerHorizontallyTo(parent)
                centerVerticallyTo(parent)
                start.linkTo(icon.end, margin = 8.dp)
                end.linkTo(price.start, margin = 8.dp)
            }
        )
    }
}

说明：

• 标题通过centerHorizontallyTo(parent)直接绑定按钮的水平中心，无论价格长度如何变化，标题中心始终与按钮中心对齐。
• 设置start和end约束避免标题与图标、价格重叠，空间不足时标题会自动省略显示。

方法二：使用自定义Layout（精细控制） #

如果需要更灵活的布局逻辑，可通过自定义Layout精确计算每个元素的位置：

@Composable
fun CustomActionButton(
    onClick: () -> Unit,
    icon: @Composable () -> Unit,
    title: @Composable () -> Unit,
    price: @Composable () -> Unit,
    modifier: Modifier = Modifier
) {
    Button(onClick = onClick, modifier = modifier) {
        Layout(
            content = {
                icon()
                title()
                price()
            },
            modifier = Modifier.fillMaxWidth()
        ) { measurables, constraints ->
            // 先测量图标和价格的尺寸
            val iconPlaceable = measurables[0].measure(constraints.copy(minWidth = 0, minHeight = 0))
            val pricePlaceable = measurables[2].measure(constraints.copy(minWidth = 0, minHeight = 0))
            
            // 计算标题的可用宽度（总宽度减去图标、价格宽度及间距）
            val titleMaxWidth = constraints.maxWidth - iconPlaceable.width - pricePlaceable.width - 16.dp.roundToPx() * 2
            val titlePlaceable = measurables[1].measure(
                constraints.copy(minWidth = 0, maxWidth = titleMaxWidth)
            )

            // 按钮总高度取所有元素的最大高度
            val totalHeight = maxOf(iconPlaceable.height, titlePlaceable.height, pricePlaceable.height)

            // 布局各元素位置
            layout(constraints.maxWidth, totalHeight) {
                // 图标靠左，垂直居中
                iconPlaceable.placeRelative(
                    x = 0,
                    y = (totalHeight - iconPlaceable.height) / 2
                )

                // 价格靠右，垂直居中
                pricePlaceable.placeRelative(
                    x = constraints.maxWidth - pricePlaceable.width,
                    y = (totalHeight - pricePlaceable.height) / 2
                )

                // 标题放在按钮水平中心，垂直居中
                titlePlaceable.placeRelative(
                    x = (constraints.maxWidth - titlePlaceable.width) / 2,
                    y = (totalHeight - titlePlaceable.height) / 2
                )
            }
        }
    }
}

// 使用示例
CustomActionButton(
    onClick = {},
    icon = {
        Icon(
            imageVector = Icons.Default.ShoppingCart,
            contentDescription = "购物车图标",
            modifier = Modifier.size(24.dp)
        )
    },
    title = {
        Text(
            text = "Buy Now!",
            style = MaterialTheme.typography.bodyLarge,
            maxLines = 1,
            overflow = TextOverflow.Ellipsis
        )
    },
    price = {
        Text(
            text = "€2000,00",
            style = MaterialTheme.typography.titleMedium
        )
    },
    modifier = Modifier.fillMaxWidth()
)

说明：

• 先测量图标和价格的实际尺寸，确保价格完整显示；再根据剩余空间计算标题的可显示宽度。
• 直接将标题放置在按钮的水平中心位置，彻底避免因可用空间变化导致的偏移问题。

注意事项 #

• 给标题设置maxLines = 1和overflow = TextOverflow.Ellipsis，防止内容过长超出按钮边界。
• 可根据需求调整按钮的contentPadding或元素间的margin，优化视觉间距。
• 若按钮宽度固定，两种方案均能稳定生效；若按钮宽度自适应，建议确保父容器有足够空间容纳最长价格。

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