带有可绘制对象的 JetPack Compose 按钮

Question

我们如何在 Jetpack Compose 中实现这一点

我正在做这样的事情

Button(
    elevation = ButtonDefaults.elevation(
        defaultElevation = 0.dp,
        pressedElevation = 8.dp,
        disabledElevation = 0.dp
    ),
    onClick = { onClick },
    shape = RoundedCornerShape(28.dp),
    modifier = modifier
        .fillMaxWidth()
        .shadow(0.dp),
    contentPadding = PaddingValues(15.dp),
    colors = ButtonDefaults.buttonColors(backgroundColor = Color.White),
    border = BorderStroke(1.dp, Color.Grey)
) {
    Box(modifier = modifier.fillMaxWidth(),
        contentAlignment = Alignment.Center) {
        Icon(
            imageVector = imageVector,
            modifier = Modifier
                .size(18.dp),
            contentDescription = "drawable icons",
            tint = Color.Unspecified
        )
        Spacer(modifier = Modifier.width(10.dp))
        Text(
            text = buttonText,
            color = Color.Black,
            textAlign = TextAlign.Center
        )
    }
}

正如您所见，Google 徽标就在文本的左侧，我需要它在方框的开头，所以我该怎么做。

Answer 1

Box(contentAlignment = Center){
  Icon(Modifier.align(CenterStart))

  Text()
}

Answer 2

您可以在 Icon's Modifier 参数上使用 align(Alignment.CenterStart) 使图标围绕 Box Composable 的开头居中。此对齐方式将优先于 Box 的对齐方式参数。

您还可以删除 Spacer 可组合项，因为 Box 布局子项按组合顺序堆叠在一起。所以 Spacer 可组合项基本上位于中心的 Text 可组合项下方。

如果您想在 Icon 和 Text 之间添加一些 space，您可以在 Icon 周围使用一些填充。

试试这个（对我有用）：

Box(modifier = modifier.fillMaxWidth(),
        contentAlignment = Alignment.Center) {
        Icon(
            imageVector = imageVector,
            modifier = Modifier
                .size(18.dp)
                .align(Alignment.CenterStart),
            contentDescription = "drawable icons",
            tint = Color.Unspecified
        )
        Text(
            text = buttonText,
            color = Color.Black,
            textAlign = TextAlign.Center
        )
    }

Answer 3

删除Box中的contentAlignment = Alignment.Center并使用：

 Box(modifier = Modifier.fillMaxWidth()) {
        Icon( /* ..... */ )
        Text(
            modifier = Modifier.fillMaxWidth(),
            text = "buttonText",
            textAlign = TextAlign.Center
        )
 }