动态更改 Jetpack Compose 视图大小

Question

我想创建一个具有 3 个预定义尺寸的简单按钮，我在 Compose 视图上添加一个枚举参数，并根据它尝试将预定义尺寸之一设置为宽度和高度。

我的枚举看起来像这样：

    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表达式内的

.width()

和

.height()

（在每个case块内）。

有了所有这些改变，你会得到这样的东西

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

Answer 2

您可以尝试创建一个修改器。

fun Modifier.useCommonSize(
    size: ButtonSize
): Modifier = composed {
    layout { measurable, constraints ->
        layout(
            size.width.toInt(), size.height.toInt()
        ) {
            measurable.measure(
                constraints.copy(
                    minWidth = size.width.toInt(),
                    minHeight = size.height.toInt(),
                )
            ).place(0, 0)
        }
    }
}

// this extension converts the `dp` size to the correct value
private fun Dp.toInt(): Int = TypedValue.applyDimension(
    TypedValue.COMPLEX_UNIT_DIP, value,
    Resources.getSystem().displayMetrics
).roundToInt()

现在，您可以在需要时随时调用它。

@Composable
fun MyButton(
    onClick: () -> Unit,
    modifier: Modifier = Modifier,
    buttonSize: ButtonSize = ButtonSize.SMALL_BUTTON,
    text: String
) {
    Button(
        onClick = onClick,
        modifier = modifier
            .useCommonSize(buttonSize), // <- like this
        content = {
            Text(text = text)
        }
    )
}

这是截图。

希望这个例子有帮助。
问候！