kotlin - Jetbrains 组合桌面元素重叠

Question

我正在编写一个撰写桌面应用程序。我有一个主窗口：

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

    Column(horizontalAlignment = Alignment.CenterHorizontally) {
        ChessBoard(board.value, modifier = Modifier.fillMaxWidth(0.8f))
        Row(modifier = Modifier
            .fillMaxSize(), horizontalArrangement = Arrangement.SpaceEvenly) {
            Button(onClick = previousBoard) {
                Text("<")
            }

            Button(onClick = nextBoard) {
                Text(">")
            }
        }
    }
}

其中ChessBoard定义为

@Composable
fun ChessBoard(board: Board, modifier: Modifier = Modifier) {
    Canvas(modifier = modifier) {
        // snip logic, I checked that it does not influence the result
    }
}

棋盘占用了正确的空间量，但按钮重叠并且没有按预期添加到底部。

我尝试在 ChessBoard 上调整修饰符，但这并没有改变按钮位于顶部的事实。

Answer 1

在 上Row，删除Modifier.fillMaxSize()

我想你需要的是Modifier.fillMaxWidth()

Row占据了整个屏幕空间，行内的按钮默认位于行的顶部。要检查是否是这种情况，请尝试Modifier.align(CenterVerticlly)在行中添加 a，按钮将移动到屏幕的中心，因为该行仍然占据整个屏幕。删除Modifier.fillMaxSize()应该可以，但如果您仍想保留它以供其他可组合使用，请使用Modifier.align(Alignment)修复它