我正在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)
)
}
}
2条答案
按热度按时间z31licg01#
一个
Button
的内容就是一个RowScope
,只需要在Text
上加上一个weight(1f)
修饰符就可以了。比如:
5lhxktic2#
我相信你需要在你的按钮上设置一个固有的宽度。
请参阅此处的文档https://developer.android.com/jetpack/compose/layouts/intrinsic-measurements