android - 修复 Jetpack Compose 按钮​​中心的文本位置

Question

我目前正在开发一个按钮，它有 3 个元素:一个图标(具有固定大小)、一个标题(例如立即购买!)和商品价格。应显示的价格是自适应的，可能是 2,00 欧元或 2000,00 欧元。标题应该居中，基于按钮本身，而不是它可以占据的区域。

object 的价格在按钮内具有优先权，应始终以设定的样式完整显示。因此，该对象的大小是可变的，无法事先确定。

当价格对象的长度增加时，标题的可用空间自然会减少。但是，当尝试将文本居中时，我只能根据可用空间将其居中，这导致文本偏离了中心。

如何解决这个问题，允许文本基于父级(按钮)而不是可用的文本大小居中？

Answer 1

你可以试试这个:

Button(
    modifier = Modifier
      .wrapContentHeight()
      .padding(horizontal = 8.dp),
    onClick = {}
) {
      Row(
          modifier = Modifier.fillMaxWidth(),
          verticalAlignment = Alignment.CenterVertically,
          horizontalArrangement = Arrangement.SpaceAround
      ) {

           Box(
               modifier = Modifier.weight(1f),
               contentAlignment = Alignment.TopStart
           ) {
               Icon(
                  imageVector = Icons.Default.ImageSearch,
                  contentDescription = null
               )
           }

           Box(
               modifier = Modifier.weight(1f),
               contentAlignment = Alignment.Center
           ) {
               Text(
                     text = "Buy Now"
               )
           }

           Box(
                modifier = Modifier.weight(1f),
                contentAlignment = Alignment.TopEnd
           ) {
               Text(
                   text = "€ 2.00"
                 // text = "€ 2000.00"
               )
           }
       }
 }

Button有一个内容参数，您可以使用它来设置其内容，在本例中我们使用 Row在水平轴上设置内容。

请注意每个组件，Icon Text和 Text包裹在 Box 中用weight的 1f , 将每个盒子作为它们的容器，也占用父级的等分空间 Row .

中间Box将它的 child 放在中心，而第一个和最后一个 Box将他们的 child (即 Icon 和 Text )放在 TopStart 中和 TopEnd对齐，尽管您不必担心“顶部”定位，因为它在这里被忽略了，因为父级 Row对齐所有子项 center-vertically

如果我们把 background每个颜色 Box ,

Modifier.background(Color.LightGray/Gray/DarkGray)

我们可以清楚的看到他们相等width