无法在 Desktop 中为 Compose 设计 UI 布局

我正在为基于的应用程序开发 UI 布局为桌面撰写 https://www.jetbrains.com/lp/compose-mpp/

它由几个复选框组成。
但里面没有任何功能为桌面撰写 https://github.com/JetBrains/compose-jb/tree/master/tutorials/Getting_Started使视图彼此对齐。

在Android中，我们可以使用Constraint Layout用于视图对齐，非常简单。
但是 Compose for Desktop 该怎么办呢？
这是我需要在 Desktop Compose 中设计的布局

这是我写的代码Main.kt文件： 但输出却截然不同。
由于没有 Compose For Desktop Layout Alignment and Sizing 的官方文档/视频，请您指导一下吗？

@Composable
@Preview
fun App() {
    MaterialTheme(
    ) {
        BoxWithConstraints {
            TwoColumnsLayout()
        }
    }
}

@Composable
fun TwoColumnsLayout() {
    Row(Modifier.fillMaxSize()) {
        Box(modifier = Modifier.fillMaxWidth(0.4f), contentAlignment = Alignment.Center) {
            LeftPaneContent()
            Divider(
                color = Color.Blue,
                modifier = Modifier
                    .fillMaxHeight()
                    .width(1.dp)
            )
        }
        RightPaneContent()
    }
}

@Composable
fun LeftPaneContent() {
    Column(
        Modifier.fillMaxSize(),
        verticalArrangement = Arrangement.Center,
        horizontalAlignment = Alignment.CenterHorizontally
    ) {
        Text(text = "Left Pane First Text Box")
        Text(text = "Left Pane Second Text Box")
        Column {
            Text(text = "Left Pane Radio button Box  ", modifier = Modifier.padding(start = 8.dp))
            val options = listOf("Option 1", "Option 2", "Option 3", "Option 4", "Option 5")
        }
        Text(text = "Left Pane bottom Text Box")
    }
}

@Composable
fun RightPaneContent() {
    Box(modifier = Modifier.fillMaxSize(), contentAlignment = Alignment.Center) {
        Column(
            Modifier.fillMaxSize(),
            verticalArrangement = Arrangement.Center,
            horizontalAlignment = Alignment.CenterHorizontally
        ) {
            Text(text = "Right Pane First Text Box")
            Text(text = "Right Pane Second Text Box")
            Text(text = "Right Pane Third Text Box")
        }
    }
}

fun main() = application {
    Window(
        onCloseRequest = ::exitApplication,
        state = WindowState(size = DpSize(1440.dp, 768.dp))
    ) {
        App()
    }
}

我不需要完整的代码。
我只需要根据上述设计进行视图放置、对齐和调整大小方面的帮助。
我无法创建如上图所示的 UI 布局，而且也没有有关 Compose For Desktop UI 布局的文档。

ConstraintLayout在极少数情况下是您所需要的，在大多数情况下 Compose Layout 就足够了。

您可以查看 Compose 布局文档 https://developer.android.com/jetpack/compose/layouts，我认为其中充满了类似布局的示例 - 至少是其中的一部分。

您的代码中有很多错误，但一般方法是正确的。经过一些练习，你就会开始享受到比使用它更多的乐趣ConstraintLayout.

1. TwoColumnsLayout- 不太清楚为什么你决定将左侧内容和分隔符放入Box- 它将把它们一个放在另一个之上。只需删除Box并留下内容。
2. The Modifier.fillMaxWidth(0.4f)可以直接移入LeftPaneContent - add fillMaxHeight并删除fillMaxSize。或者，您可以创建一个Modifier参数，因此可以从TwoColumnsLayout.
3. Use Modifier.weight(1f)仅限一名儿童Row/Column因此它会占用其他视图布局后的所有可用空间 - 更多信息可以在这个答案 https://stackoverflow.com/a/68972289/3585796.
4. LeftPaneContent- 根据您的设计，您可能需要将前两个文本放入Row如果你希望它们大小相同 - 添加Modifier.weight(1f)每一个。
5. RightPaneContent- 与第 3 点相同：您可能需要将第二个和第三个视图放入Row. Box拥有一个孩子是多余的，可以删除。
6. BoxWithConstraints inside App也不使用并且可以删除。

还使用Spacer添加视图之间的间距Modifier.padding如所须。另外一个好的做法是使用修饰符作为最后一个参数进行移动 - 在这种情况下，当您需要添加/重新排序修饰符时，您不必处理尾随逗号。

这应该更接近您预期的布局：

@Composable
fun TwoColumnsLayout() {
    Row(Modifier.fillMaxSize()) {
        LeftPaneContent()
        Divider(
            color = Color.Blue,
            modifier = Modifier
                .fillMaxHeight()
                .width(1.dp)
        )
        RightPaneContent()
    }
}

@Composable
fun LeftPaneContent() {
    Column(
        verticalArrangement = Arrangement.Center,
        horizontalAlignment = Alignment.CenterHorizontally,
        modifier = Modifier
            .fillMaxHeight()
            .fillMaxWidth(0.4f)
            .padding(20.dp)
    ) {
        Row {
            Text(text = "Left Pane First Text Box", modifier = Modifier.weight(1f))
            Text(text = "Left Pane Second Text Box", modifier = Modifier.weight(1f))
        }
        Spacer(Modifier.size(20.dp))
        Column(Modifier.weight(1f).border(1.dp, color = Color.Black)) {
            Text(text = "Left Pane Radio button Box  ", modifier = Modifier.padding(start = 8.dp))
            val options = listOf("Option 1", "Option 2", "Option 3", "Option 4", "Option 5")
        }
        Spacer(Modifier.size(100.dp))
        Text(text = "Left Pane bottom Text Box")
    }
}

@Composable
fun RightPaneContent() {
    Column(
        verticalArrangement = Arrangement.Center,
        horizontalAlignment = Alignment.Start,
        modifier = Modifier
            .fillMaxSize()
            .padding(20.dp)
    ) {
        Text(text = "Right Pane First Text Box")
        Spacer(Modifier.size(20.dp))
        Row {
            Text(text = "Right Pane Second Text Box", modifier = Modifier.weight(1f))
            Spacer(Modifier.size(20.dp))
            Text(text = "Right Pane Third Text Box", modifier = Modifier.weight(1f))
        }
    }
}