动态更改Jetpack Compose视图大小

Question

我想创建一个简单的按钮，有3个预定义的大小，我在我的Compose视图上添加一个enum参数，并根据它，我试图设置这个预定义的大小之一作为宽度和高度。

我的enum看起来像这样:

enum class ButtonSize(val height: Dp, val width: Dp) {
LARGE_BUTTON(height = 50.dp, width = 200.dp),
MEDIUM_BUTTON(height = 40.dp, width = 180.dp),
SMALL_BUTTON(height = 30.dp, width = 140.dp)
}

和自定义按钮:

@Composable
fun MyButton(
onClick: () -> Unit,
modifier: Modifier = Modifier,
buttonSize: ButtonSize,
text: String
) {
when (buttonSize) {
ButtonSize.LARGE_BUTTON -> {
modifier.width(ButtonSize.LARGE_BUTTON.width)
modifier.height(ButtonSize.LARGE_BUTTON.height)
}
ButtonSize.MEDIUM_BUTTON -> {
modifier.width(ButtonSize.MEDIUM_BUTTON.width)
modifier.height(ButtonSize.MEDIUM_BUTTON.height)
}
ButtonSize.SMALL_BUTTON -> {
modifier.width(ButtonSize.SMALL_BUTTON.width)
modifier.height(ButtonSize.SMALL_BUTTON.height)
}
}

Button(
onClick = onClick,
modifier = modifier,
content = {
Text(text = text)
}
)
}

我的问题是，到目前为止，我还没有能够设置按钮的宽度或高度这种方式，他们总是保持默认值。

Answer 1

当您调用修饰符上的函数时，这些函数不会改变原始修饰符，而是返回一个新的(组合)修饰符作为结果，因此您必须将when表达式的结果保存为本地值，然后将该值作为modifier参数传递给Button可组合。

您还必须在when表达式中(在每个case块中)将函数调用链接到.width()和.height()。

经过这些修改，你会得到这样的结果

@Composable
fun MyButton(
onClick: () -> Unit,
modifier: Modifier = Modifier,
buttonSize: ButtonSize,
text: String
) {
val newModifier = when (buttonSize) {
ButtonSize.LARGE_BUTTON -> {
modifier.width(ButtonSize.LARGE_BUTTON.width)
.height(ButtonSize.LARGE_BUTTON.height)
}
ButtonSize.MEDIUM_BUTTON -> {
modifier.width(ButtonSize.MEDIUM_BUTTON.width)
.height(ButtonSize.MEDIUM_BUTTON.height)
}
ButtonSize.SMALL_BUTTON -> {
modifier.width(ButtonSize.SMALL_BUTTON.width)
.height(ButtonSize.SMALL_BUTTON.height)
}
}
Button(
onClick = onClick,
modifier = newModifier,
content = {
Text(text = text)
}
)
}