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

Question

的应用程序开发 UI 布局

它由几个复选框组成。
但是 Compose for Desktop 中没有将视图相互对齐的功能。

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

这是我在 Main.kt 文件中编写的代码：但是输出却大不相同。
Compose For Desktop Layout Alignment and sizing 没有官方的 documentation/videos，请您指点一下好吗？

@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 布局的文档。

Answer 1

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

您可以查看 Compose Layout documentation，我认为其中包含丰富的类似布局示例 - 至少是其中的一部分。

你只是代码中有很多错误，但大体上的方法是正确的。稍加练习，您就会开始体验到比 ConstraintLayout.

更多的乐趣

TwoColumnsLayout - 不太清楚为什么你决定将左边的内容和分隔符放在 Box 中 - 它会将它们一个放在另一个上面。只需删除 Box 并保留内容。
可以将 Modifier.fillMaxWidth(0.4f) 右移到 LeftPaneContent - 添加 fillMaxHeight 并删除 fillMaxSize。或者，您可以创建一个 Modifier 参数，以便可以从 TwoColumnsLayout.
仅对 Row/Column 中的一个 child 使用 Modifier.weight(1f)，因此在其他视图布局后它会占用所有可用的 space - 更多信息可以是在 .
LeftPaneContent - 根据您的设计，您可能需要将前两个文本放在 Row 中，如果您希望它们的大小相同 - 将 Modifier.weight(1f) 添加到每个文本中。
RightPaneContent - 与第 3 点相同：您可能需要将第二个和第三个视图放在 Row 中。 Box 与单个 child 是多余的，可以删除。
BoxWithConstraints里面的App也是不用的，可以去掉。

还可以使用 Spacer 添加视图之间的间距，并根据需要使用 Modifier.padding。另外一个好的做法是使用修饰符作为最后一个参数 - 在这种情况下，当您需要 add/reorder 修饰符时，您不必处理尾随逗号。

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

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

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

Unable to design UI Layout in Desktop for Compose

kotlin

layout

android-jetpack-compose

compose-desktop