android 如何在按钮中使用权重来对齐左边的文本和右边的图标

csbfibhn  于 2023-03-16  发布在  Android
关注(0)|答案(2)|浏览(148)

我正在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中,这样它就可以填充任何额外的空间。但是这会导致没有固定宽度的按钮尽可能多地占用空间。

如何构建在两种情况下都能工作的合成组件:什么时候定义宽度,什么时候按内容换行?
我的屏幕布局:

@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)
        )
    }
}
z31licg0

z31licg01#

一个Button的内容就是一个RowScope,只需要在Text上加上一个weight(1f)修饰符就可以了。
比如:

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
    )
}

5lhxktic

5lhxktic2#

我相信你需要在你的按钮上设置一个固有的宽度。

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

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

相关问题