Jetbrains Compose 桌面元素重叠

Question

我正在编写一个 Compose 桌面应用程序。我有一个主要 window:

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

棋盘占用了正确数量的 space，但按钮重叠并且未按预期添加到底部。

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

Answer 1

在 Row 上，删除 Modifier.fillMaxSize()

我觉得你需要的是Modifier.fillMaxWidth()

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

Jetbrains Compose 桌面元素重叠

Jetbrains Compose Desktop Elements Overlap

kotlin

android-jetpack-compose

compose-desktop