如何在不增加Button高度的情况下添加CircularProgressIndicator

在Jetpack Compose中，我希望在Button内同时使用CircularProgressIndicator和Text组件。仅包含Text时，按钮显示正常：

Button(
    onClick = { }
) {
    Row() {
        Text("Some action")
    }
}

但添加CircularProgressIndicator后，按钮高度明显增加：

Button(
    onClick = {  }
) {
    Row() {
        CircularProgressIndicator(color = Color.White)
        Text("Some action")
    }
}

请问如何在Button中添加CircularProgressIndicator的同时，保持按钮初始高度？

CircularProgressIndicator默认尺寸会超出Button的内边距范围，导致按钮被撑开。可以通过以下几种方式解决：

• 缩小指示器尺寸：直接用modifier.size()指定适配Button高度的小尺寸，同时让Row垂直居中对齐，提升美观度：

  Button(
      onClick = { }
  ) {
      Row(verticalAlignment = Alignment.CenterVertically, gap = 8.dp) {
          CircularProgressIndicator(
              color = Color.White,
              modifier = Modifier.size(16.dp)
          )
          Text("Some action")
      }
  }
  

• 限制指示器布局大小：通过wrapContentSize()让指示器在Button的可用空间内自适应，配合垂直居中避免偏移：

  Button(
      onClick = { }
  ) {
      Row(verticalAlignment = Alignment.CenterVertically, gap = 8.dp) {
          CircularProgressIndicator(
              color = Color.White,
              modifier = Modifier.wrapContentSize(align = Alignment.Center)
          )
          Text("Some action")
      }
  }
  

• 调整Button内边距：自定义Button的contentPadding，抵消指示器带来的额外高度：

  Button(
      onClick = { },
      contentPadding = PaddingValues(horizontal = 16.dp, vertical = 8.dp)
  ) {
      Row(verticalAlignment = Alignment.CenterVertically, gap = 8.dp) {
          CircularProgressIndicator(color = Color.White)
          Text("Some action")
      }
  }
  

其中第一种方法最直观，既能保持Button初始高度，又能让组件布局更协调。

内容的提问来源于stack exchange，提问作者me.at.coding