容器与布局 on 菠萝学

盒子 Box

poloxue123@gmail.com (POLO XUE) — Wed, 29 Jan 2025 00:00:00 +0000

如在容器和布局中讨论的，容器中的元素可以使用布局来排列。本节探讨内置布局及其使用方法。

最常用的布局是 layout.BoxLayout，它有两个变体，水平和垂直。盒子布局将所有元素排列在单个行或列中，并可选择间隔以协助对齐。

网格 Grid

poloxue123@gmail.com (POLO XUE) — Sat, 01 Feb 2025 00:00:00 +0000

网格布局将容器的元素以网格模式布置，具有固定数量的列。项目将填充单个行，直到达到列数，之后将创建新行。垂直空间将在对象的每一行之间平均分配。

使用 layout.NewGridLayout(cols) 创建网格布局，其中 cols 是您希望每行中有的项目（列）数量。然后将此布局作为第一个参数传递给 container.New(...)。

网格包装 Grid Wrap

poloxue123@gmail.com (POLO XUE) — Tue, 04 Feb 2025 00:00:00 +0000

与之前的网格布局一样，网格包装布局在网格模式中创建元素的排列。然而，这种网格没有固定数量的列，而是为每个单元格使用固定大小，然后将内容流动到需要显示项目的尽可能多的行中。

边框布局 Border

poloxue123@gmail.com (POLO XUE) — Fri, 07 Feb 2025 00:00:00 +0000

边框布局可能是构建用户界面时使用最广泛的布局之一，因为它允许围绕一个将扩展以填充空间的中心元素定位项目。要创建一个边框容器，你需要将应该在边框位置定位的 fyne.CanvasObject 作为构造函数的前四个参数传递。这个语法基本上就是 container.NewBorder(top, bottom, left, right, center)，如示例所示。

表单布局 Form

poloxue123@gmail.com (POLO XUE) — Mon, 10 Feb 2025 00:00:00 +0000

layout.FormLayout 类似于两列的网格布局，但针对应用中的表单布局进行了调整。每个项目的高度将是每行中两个最小高度中的较大者。第一列中所有项目的最大最小宽度将是左侧项目的宽度，而每行中的第二个项目将扩展以填满空间。

居中布局 Center

poloxue123@gmail.com (POLO XUE) — Thu, 13 Feb 2025 00:00:00 +0000

layout.CenterLayout 将其容器中的所有项目都组织在可用空间的中心。这些对象将按照它们被传递到容器的顺序绘制，最后传递的对象将被绘制在最顶部。

package main

import (
	"image/color"

	"fyne.io/fyne/v2/app"
	"fyne.io/fyne/v2/canvas"
	"fyne.io/fyne/v2/container"
	"fyne.io/fyne/v2/layout"
	"fyne.io/fyne/v2/theme"
)

func main() {
	myApp := app.New()
	myWindow := myApp.NewWindow("Center Layout")

	img := canvas.NewImageFromResource(theme.FyneLogo())
	img.FillMode = canvas.ImageFillOriginal
	text := canvas.NewText("Overlay", color.Black)
	content := container.New(layout.NewCenterLayout(), img, text)

	myWindow.SetContent(content)
	myWindow.ShowAndRun()
}

中心布局使所有项目保持其最小大小，如果你希望扩展项目以填充空间，那么请参见layout.MaxLayout。

最大布局 Max

poloxue123@gmail.com (POLO XUE) — Sun, 16 Feb 2025 00:00:00 +0000

layout.MaxLayout是最简单的布局，它将容器中的所有项目设置为与容器相同的大小。这通常在一般的容器中不太有用，但在组合控件时可能适用。

Tab 布局 AppTabs

poloxue123@gmail.com (POLO XUE) — Wed, 19 Feb 2025 00:00:00 +0000

AppTabs 容器用于允许用户在不同的内容面板之间切换。标签页要么只有文本，要么是文本和图标。建议不要混合使用一些标签页有图标而另一些没有图标的情况。使用 container.NewAppTabs(...) 创建标签容器，并传递 container.TabItem 项（可以使用 container.NewTabItem(...) 创建）。