JetBrains Compose Desktop 元素重叠：底部按钮未按预期显示与棋盘重叠

根因分析 #

代码中的问题出在两个布局配置上：

• 外层Column没有设置填充满窗口大小，默认按子组件内容自适应高度
• 按钮所在的Row使用了Modifier.fillMaxSize()，会直接占据整个父布局的全部空间，导致和上方的ChessBoard重叠

修复方案 #

修改主窗口的布局代码如下即可：

Window(size = IntSize(600, 600)) {
    // snip logic

    // 给Column添加fillMaxSize，让它填充满整个窗口
    Column(
        horizontalAlignment = Alignment.CenterHorizontally,
        modifier = Modifier.fillMaxSize()
    ) {
        // 给ChessBoard添加weight(1f)，让它占满按钮之外的所有剩余空间
        ChessBoard(
            board.value, 
            modifier = Modifier.fillMaxWidth(0.8f).weight(1f)
        )
        // Row只需要填充满宽度，高度自适应内容即可
        Row(
            modifier = Modifier
                .fillMaxWidth()
                .padding(vertical = 16.dp),
            horizontalArrangement = Arrangement.SpaceEvenly
        ) {
            Button(onClick = previousBoard) {
                Text("<")
            }
            Button(onClick = nextBoard) {
                Text(">")
            }
        }
    }
}

原理解释 #

weight是Column/Row专属的修饰符，添加后对应的子组件会优先占用父容器中其他子组件占用后剩余的所有空间。调整后按钮Row只会占用自身内容所需的高度，剩余的窗口空间全部分配给棋盘，既不会出现重叠，按钮也会固定在窗口底部。
原有ChessBoard中Canvas的绘制逻辑只要是基于Canvas传入的尺寸进行计算，就不需要做额外调整。

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