2

这是我第一次尝试构建一个不使用 CSS 和 JS 等 Web 技术的应用程序。所以我想我对布局和小部件如何组合在一起不太了解。

我一直在尝试构建一个简单的表单，但结果并不如预期。

现在结果如下所示：

在此处输入图像描述

我希望每行中的这 2 个条目小部件消耗剩余空间，但它不起作用。

目前，我的代码如下所示：

checks := container.NewVBox(c1, c2)
names := container.NewVBox(n1, n2)
values := container.NewVBox(v1, v2)
win := container.NewHBox(checks, names, values)

我尝试了各种布局的组合，如 Box、Border、Grid 等，但没有任何效果。网格布局有效，但将列划分为相等的空间，因此复选框也占据了 1/3 的空间。

我需要关于我可以使用哪种布局的建议，以便复选框可以占用与现在相同的空间，但每行上的剩余输入字段应使用其余空白空间的 50%。

4

1 回答 1

0

我们可以使用 fyne 布局系统中的语义名称，对于作为第一语言的英语，名称很清楚，但对于其他人，我希望这篇文章有所帮助。
对于语义，例如 VBoxLayout 命名表示布局是一个垂直填充的框，或者 MaxLayout 是一个将获取最大可用空间的框， 使用所有分配的空间布局内容。

对于上述问题，一种方法是使用 VBoxLayout 创建一个顶级容器，然后使用 MaxLayout来获取可用的水平空间并可能解决问题中的问题，然后我们可以使用 LayoutWithColumns 添加我们想要的约束空间，

  • 创建一些有问题的小部件
    c1 := canvas.NewText("Canvas Object 1", color.White)
    c2 := canvas.NewText("Canvas Object 2", color.White)
    n1 := canvas.NewText("Canvas Object 3", color.White)
    n2 := canvas.NewText("Canvas Object 4", color.White)
  • 使用 VBoxLayout 创建一个顶级容器
    topLevelLayOutContent = container.New(layout.NewVBoxLayout(),
  • 现在添加使用 MaxLayout 和 LayoutWithColumns 作为约束的较低级别的容器
    topLevelLayOutContent = container.New(layout.NewVBoxLayout(),
        container.New(layout.NewMaxLayout(),
            container.New(layout.NewGridLayoutWithColumns(2), c1, c2)),
        container.New(layout.NewMaxLayout(),
            container.New(layout.NewGridLayoutWithColumns(2), n1, n2)),
    )

好像

简单的工作示例

import (
    "fyne.io/fyne/v2"
    "fyne.io/fyne/v2/canvas"
    "fyne.io/fyne/v2/container"
    "fyne.io/fyne/v2/layout"
    "fyne.io/fyne/v2/app"
    "image/color"
)

var topLevelLayOutContent *fyne.Container

func main() {
    a := app.New()
    win := a.NewWindow("Server Mon")
    c1 := canvas.NewText("Canvas Object 1", color.White)
    c2 := canvas.NewText("Canvas Object 2", color.White)
    n1 := canvas.NewText("Canvas Object 3", color.White)
    n2 := canvas.NewText("Canvas Object 4", color.White)

    topLevelLayOutContent = container.New(layout.NewVBoxLayout(),
        container.New(layout.NewMaxLayout(),
            container.New(layout.NewGridLayoutWithColumns(2), c1, c2)),
        container.New(layout.NewMaxLayout(),
            container.New(layout.NewGridLayoutWithColumns(2), n1, n2)),
    )

    win.SetContent(topLevelLayOutContent)
    win.Resize(fyne.NewSize(float32(400), float32(30)))
    win.ShowAndRun()

}
  • 答案已更新以反映 MaxLayout 行为下方的评论
于 2021-09-10T12:47:49.413 回答