如何移除Material 3 TextButton文本周围的多余空白？

我用Material 3的TextButton实现Skip和Maybe Later按钮，要求按钮右对齐，但按钮右侧始终有多余空白，换成普通Text组件就能完全贴合边距。试过移除padding、调整contentPadding都没用，有时候修改文本内容反而能让按钮贴合侧边，预览里还能看到三个不同的空白区域，以下是解决方法：

核心问题：TextButton默认最小宽度限制 #

Material 3的TextButton默认有64.dp的最小宽度，这是导致右侧空白的关键原因——即使内容宽度更小，按钮也会强制撑到最小宽度。

具体解决方案 #

1. 取消默认最小宽度
   添加Modifier.minWidth(0.dp)，让按钮宽度完全贴合内部文本内容：

   modifier = modifier
       .height(48.dp)
       .minWidth(0.dp) // 强制取消最小宽度限制
   

2. 调整布局实现完全右对齐
   用fillMaxWidth().wrapContentWidth(Alignment.End)替代原来的wrapContentSize(Alignment.CenterEnd)，让按钮占满父容器宽度，内容自动右对齐：

   modifier = modifier
       .height(48.dp)
       .fillMaxWidth()
       .wrapContentWidth(Alignment.End)
       .minWidth(0.dp)
   

3. 精准控制内边距
   直接设置contentPadding = PaddingValues(0.dp)消除按钮内部的默认上下左右空白，如果需要左侧留间距，再单独调整start值：

   contentPadding = PaddingValues(start = 12.dp, top = 0.dp, end = 0.dp, bottom = 0.dp)
   

修改后的完整代码 #

TextButton(
    modifier = modifier
        .height(48.dp)
        .fillMaxWidth()
        .wrapContentWidth(Alignment.End)
        .minWidth(0.dp),
    elevation = null,
    contentPadding = PaddingValues(0.dp),
    onClick = { /*TODO*/ }
) {
    Text(
        text = "Skip",
        fontSize = 16.sp,
        lineHeight = 16.sp,
        fontWeight = FontWeight(500)
    )
}

关于预览中的三个空白区域 #

• 右侧空白：由默认最小宽度导致，添加minWidth(0.dp)即可消除
• 上下空白：来自ButtonDefaults.ContentPadding的默认上下内边距，设置contentPadding = PaddingValues(0.dp)解决
• 文本周围微小空白：若仍存在，检查Text组件的默认行高或字距，调整lineHeight或letterSpacing参数即可

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