如何在按钮中使用重量来对齐左侧的文本和右侧的图标答案

【问题标题】：How to use weight in a Button to align Text on the left and Icon on the right如何在按钮中使用重量来对齐左侧的文本和右侧的图标
【发布时间】：2022-11-22 07:05:56
【问题描述】：

我正在 Jetpack Compose 中构建一个可重复使用的 Button 组件，它基本上是一个 Row。该按钮应该在左端有一个文本，在右端有一个图标。这可以像这样直接工作：

@Composable
fun MyButton(
    text: String,
    modifier: Modifier = Modifier
) {
    Button(
        onClick = { /* */ },
        modifier = modifier
    ) { // RowScope
        Text(
            text = text
        )
        Spacer(modifier = Modifier.width(8.dp))
        Icon(
            painter = painterResource(
                id = android.R.drawable.ic_dialog_info
            ),
            contentDescription = null
        )
    }
}

但是，如果按钮应用固定宽度，则文本和图标居中而不是左/右端。

所以我尝试将 modifier = Modifier.weight(1F) 添加到 Text 以便它填满任何额外的空间。但这会导致没有固定宽度的按钮尽可能多地占用空间。

如何构建适用于两种情况的 Compose 组件：定义宽度时和包装到内容时？

我的屏幕布局：

@Composable
fun MyScreen() {
    Column(
        horizontalAlignment = Alignment.CenterHorizontally,
        modifier = Modifier.fillMaxSize()
    ) {
        Spacer(modifier = Modifier.height(8.dp))
        MyButton(
            text = "variable width",
            modifier = Modifier.wrapContentWidth()
        )
        Spacer(modifier = Modifier.height(8.dp))
        MyButton(
            text = "fixed width",
            modifier = Modifier.width(300.dp)
        )
    }
}

【问题讨论】：

标签： android android-layout android-jetpack-compose android-compose-button

【解决方案1】：

Button的内容是RowScope。只需将weight(1f)修饰符与TextOverflow.Ellipsis一起应用于Text即可。

就像是：

Button(
    onClick = { /* */ },
    modifier = modifier.width(IntrinsicSize.Max)
) { // RowScope
    Text(
        text = text,
        maxLines = 1,
        modifier = Modifier.weight(1f),
        overflow = TextOverflow.Ellipsis
    )
    Spacer(modifier = Modifier.width(8.dp))
    Icon(
        painter = painterResource(
            id = android.R.drawable.ic_dialog_info
        ),
        contentDescription = null
    )
}

【讨论】：

【解决方案2】：

我相信您需要在 Button 上设置固有宽度。就像是

Button(
        onClick = { /* */ },
        modifier = modifier.width(IntrinsicSize.Min)
    )

请参阅此处的文档，https://developer.android.com/jetpack/compose/layouts/intrinsic-measurements

【讨论】：