我想要一个简单的可组合组件,它可以有两种状态。
1. 如果是状态1 -> 显示一个按钮 2. 如果是状态2 -> 显示一段文本
我面临的问题是按钮比文本要大很多,所以当状态改变时,整个组件的大小也会改变。我希望有一个固定的宽度和高度(基于按钮的大小),这样当显示文本时,它不会影响到宽度和高度。我该如何实现这个?
这是我能做到的最接近的,但还不完美。
1. 如果是状态1 -> 显示一个按钮 2. 如果是状态2 -> 显示一段文本
我面临的问题是按钮比文本要大很多,所以当状态改变时,整个组件的大小也会改变。我希望有一个固定的宽度和高度(基于按钮的大小),这样当显示文本时,它不会影响到宽度和高度。我该如何实现这个?
这是我能做到的最接近的,但还不完美。
@Composable
fun MyComposable(
modifier: Modifier = Modifier,
state: State,
button: @Composable () -> Unit,
) {
BoxWithConstraints(modifier = modifier) {
val maxWidth = this.maxWidth.value.toInt()
val maxHeight = this.maxHeight.value.toInt()
// Invisibly layout button and measure its size
var contentSize by remember { mutableStateOf(Pair(0,0)) }
Layout(content = button, modifier = Modifier.alpha(0f)) { measurables, constraints ->
val placeable = measurables.first().measure(constraints)
contentSize = Pair(placeable.width, placeable.height)
layout(0, 0) {} // No visible layout
}
when (state) {
State1 -> {
button()
}
State2 -> {
// enforce text view to have maxWidth and maxHeight
Text(
modifier = modifier.requiredSize(
width = contentSize.first.coerceIn(0, maxWidth).dp,
height = contentSize.second.coerceIn(0, maxHeight).dp
),
)
}
}
}
}