Compose中TextButton为何为容器增额外高度？如何灵活解决？

问题场景 #

我正在开发一个刻意设计得很小的非标准按钮，希望Row仅与子项文本高度一致，文本在按钮左侧水平排列，按钮呈现纯文本外观。但TextButton似乎会为父Row的容器添加额外内边距，我尝试了height(IntrinsicSize)、defaultMinSize、heightIn、wrapContentSize等多种修饰符组合，问题截图中可见按钮背景超出了Row的高度。目前唯一可行的方案是设置显式height(Dp)，但该方案无法适配系统级文本缩放。

代码示例：

@Composable
fun Test() {
    Row(verticalAlignment = Alignment.CenterVertically) {
        Text("Here is a linky button:")

        TextButton(
            onClick = { },
            modifier = Modifier
                .defaultMinSize(minWidth = 1.dp, minHeight = 1.dp)
                .background(Color.Cyan),
            contentPadding = PaddingValues(0.dp),
        ) {
            Text("Linky Button")
        }
    }
}

问题解答 #

1. 额外高度的来源是什么？ #

核心原因是Material Design的最小触摸目标规范：TextButton默认通过minimumInteractiveComponentSize修饰符强制设置了48x48dp的最小可点击区域，即便你设置了contentPadding = PaddingValues(0.dp)，这个隐式的最小尺寸限制依然会让按钮撑高Row。另外TextButton内部的Surface组件默认的elevation也可能带来极细微的高度增量，但主要问题还是最小触摸尺寸的限制。

2. 有没有比设置显式.height(Dp)更灵活的解决方案？ #

有两种适配系统文本缩放的方案：

• 方案一：用ClickableText替代TextButton
  完全摆脱TextButton的默认样式限制，直接实现纯文本可点击元素，完美贴合文本高度：

  @Composable
  fun Test() {
      Row(verticalAlignment = Alignment.CenterVertically) {
          Text("Here is a linky button:")
          
          ClickableText(
              text = AnnotatedString("Linky Button"),
              onClick = { /* 点击逻辑 */ },
              style = LocalTextStyle.current // 继承父文本样式，自动适配缩放
          )
      }
  }
  

• 方案二：移除TextButton的最小触摸限制
  如果必须使用TextButton，可以覆盖默认的最小交互尺寸限制，让按钮完全贴合文本：

  @Composable
  fun Test() {
      Row(verticalAlignment = Alignment.CenterVertically) {
          Text("Here is a linky button:")
  
          TextButton(
              onClick = { },
              modifier = Modifier
                  .wrapContentSize()
                  .minimumInteractiveComponentSize(minSize = Size.Zero) // 移除最小触摸尺寸限制
                  .background(Color.Cyan),
              contentPadding = PaddingValues(0.dp),
          ) {
              Text("Linky Button")
          }
      }
  }
  

  注意：这种方式会打破Material Design的触摸区域规范，若需要保证点击舒适度，可以给文本添加基于文本尺寸的动态padding，避免用固定dp值。

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