如何在Jetpack Compose中实现覆盖组件的可开合浮动按钮盒子

问题根源分析 #

1. 状态管理失效：OpenCloseFloating使用普通变量而非Compose可观察状态，修改后无法触发界面重组。
2. 浮动盒子显示逻辑错误：通过Modifier.run替换整个Modifier的方式，会导致rememberExpanded为false时盒子完全丢失布局属性，无法正确控制显示/隐藏。
3. 状态修改时机错误：在Composable重组代码块中直接修改全局状态，会引发意外的状态重置或重复修改，而非仅在用户点击时触发。

修复后的完整代码 #

1. 替换状态管理类（改用Compose可观察状态） #

object OpenCloseFloating {
    var selectedOption by mutableStateOf("name")
    var expanded by mutableStateOf(false)
    var height by mutableStateOf(1f)
    var buttonList by mutableStateOf<List<ButtonData>>(emptyList())
}

2. 修复横屏布局逻辑 #

@Composable
fun LandscapeScreen() {
    val configuration = LocalConfiguration.current
    val screenHeight = configuration.screenHeightDp.dp
    val screenWidth = configuration.screenWidthDp.dp

    BoxWithConstraints(modifier = Modifier.fillMaxSize()) {
        // 主界面布局
        Row(modifier = Modifier.fillMaxSize()) {
            LeftArea(Modifier.fillMaxWidth(1/8f))
            RightArea(Modifier.fillMaxWidth())
        }

        // 浮动子菜单盒子：点击空白可关闭
        Box(
            modifier = Modifier
                .fillMaxHeight(OpenCloseFloating.height)
                .fillMaxWidth(1/8f)
                .background(Color.Cyan)
                .clickable { OpenCloseFloating.expanded = false }
                .visible(OpenCloseFloating.expanded) // 正确控制显示/隐藏
        ) {
            StaticButtonsColumn(
                buttonList = OpenCloseFloating.buttonList,
                cornerRoundness = 8,
                fontSize = 10
            )
        }
    }
}

3. 修复按钮创建逻辑 #

@Composable
fun RowScope.CreateButtons(buttonData: ButtonData, ratio: Float = 1f, cornerRoundness: Int, fontSize: Int) {
    if (!buttonData.hasSubButtons) {
        Button(
            modifier = Modifier
                .fillMaxWidth()
                .aspectRatio(ratio)
                .weight(1f)
                .padding(1.dp),
            shape = RoundedCornerShape(cornerRoundness.dp),
            contentPadding = PaddingValues(0.dp),
            onClick = buttonData.onClick
        ) {
            Text(text = buttonData.name, fontSize = fontSize.sp, textAlign = TextAlign.Center)
        }
    } else {
        var selectedOption by remember { mutableStateOf(buttonData.name) }
        var expanded by remember { mutableStateOf(false) }

        Button(
            modifier = Modifier
                .fillMaxWidth()
                .aspectRatio(ratio)
                .weight(1f)
                .padding(1.dp),
            shape = RoundedCornerShape(cornerRoundness.dp),
            contentPadding = PaddingValues(0.dp),
            onClick = {
                expanded = !expanded
                // 仅在点击时修改全局状态
                if (expanded) {
                    OpenCloseFloating.selectedOption = selectedOption
                    OpenCloseFloating.expanded = true
                    OpenCloseFloating.buttonList = buttonData.subButtons
                    // 计算子菜单高度：每行2个按钮，向上取整行数
                    val rowCount = (buttonData.subButtons.size + 1) / 2
                    // 假设每个按钮高度为48dp，根据实际需求调整
                    OpenCloseFloating.height = (rowCount * 48) / screenHeight.value
                } else {
                    OpenCloseFloating.expanded = false
                }
            }
        ) {
            Text(text = selectedOption, fontSize = fontSize.sp, textAlign = TextAlign.Center)
        }

        // 同步子按钮选中后的文本更新
        LaunchedEffect(OpenCloseFloating.selectedOption) {
            selectedOption = OpenCloseFloating.selectedOption
        }
    }
}

4. 优化两行布局逻辑 #

@Composable
private fun StaticButtonsColumn(buttonList: List<ButtonData>, cornerRoundness: Int, fontSize: Int) {
    Column {
        // 用chunked简化每行两个按钮的分组逻辑
        buttonList.chunked(2).forEach { rowButtons ->
            Row {
                rowButtons.forEachIndexed { index, buttonData ->
                    val ratio = if (rowButtons.size == 1) 2f else 1f
                    CreateButtons(
                        buttonData = buttonData,
                        ratio = ratio,
                        cornerRoundness = cornerRoundness,
                        fontSize = fontSize
                    )
                }
            }
        }
    }
}

5. 按钮数据类（保留原结构） #

data class ButtonData(
    val name: String,
    val onClick: () -> Unit,
    val hasSubButtons: Boolean = false,
    val subButtons: List<ButtonData> = emptyList()
)

关键修复说明 #

• 可观察状态：使用mutableStateOf包装全局状态，确保状态变化自动触发Compose重组。
• 浮动盒子控制：改用Modifier.visible控制显示/隐藏，保留所有布局属性，避免盒子意外消失。
• 状态修改时机：仅在按钮点击事件中修改全局状态，避免重组阶段的意外状态变更。
• 布局简化：用chunked(2)替代while循环，代码更简洁且不易出现索引越界问题。

内容的提问来源于stack exchange，提问作者TLSO