小部件

最常用的布局是layout.BoxLayout它有两种变体水平和垂直。

盒子布局将所有元素排列在单行或单列中并带有可选的空格以帮助对齐。

创建的水平框布局layout.NewHBoxLayout()在单行中创建项目排列。

框中的每个项目都将其宽度设置为它MinSize().Width并且所有项目的高度将相等是所有MinSize().Height值中最大的。

布局可以在容器中使用也可以使用

box

垂直框布局类似但它将项目排列在一列中。

每个项目都将其高度设置为最小值并且所有宽度都将相等设置为最小宽度中的最大值。

alayout.NewSpacer()作为项目之一。

垫片将膨胀以填充所有可用空间。

在垂直框布局的开头添加一个分隔符将导致所有项目底部对齐。

您可以在水平排列的开头和结尾添加一个以创建居中对齐。

package

(image/colorfyne.io/fyne/v2/appfyne.io/fyne/v2/canvasfyne.io/fyne/v2/containerfyne.io/fyne/v2/layout

)func

container.New(layout.NewHBoxLayout(),

text1,

container.New(layout.NewHBoxLayout(),

layout.NewSpacer(),

layout.NewSpacer())myWindow.SetContent(container.New(layout.NewVBoxLayout(),

content,

centered))myWindow.ShowAndRun()

4.2

网格布局以具有固定列数的网格模式布置容器的元素。

项目将填充一行直到满足列数之后将创建一个新行。

垂直空间将在每行对象之间平均分配。

您可以使用layout.NewGridLayout(cols)来创建网格布局,

cols

是您希望在每行中拥有的项目列数。

然后将此布局作为第一个参数传递给

container.New(...).

(image/colorfyne.io/fyne/v2/appfyne.io/fyne/v2/canvasfyne.io/fyne/v2/containerfyne.io/fyne/v2/layout

)func

container.New(layout.NewGridLayout(2),

text1,

text3)myWindow.SetContent(grid)myWindow.ShowAndRun()

4.3

与之前的网格布局一样网格环绕布局以网格模式创建元素排列。

但是此网格没有固定数量的列而是为每个单元格使用固定大小然后将内容流到显示项目所需的行数。

layout.NewGridWrapLayout(size)

指定要应用于所有子元素的大小来创建网格环绕布局。

然后将此布局作为第一个参数传递给

container.New(...).

最初网格环绕布局将只有一列如果您调整它的大小如右侧的代码注释所示它将重新排列子元素以填充空间。

package

(image/colorfyne.io/fyne/v2fyne.io/fyne/v2/appfyne.io/fyne/v2/canvasfyne.io/fyne/v2/containerfyne.io/fyne/v2/layout

)func

container.New(layout.NewGridWrapLayout(fyne.NewSize(50,

50)),text1,

text3)myWindow.SetContent(grid)//

myWindow.Resize(fyne.NewSize(180,

4.4

边框布局可能是最广泛用于构建用户界面的布局因为它允许围绕中心元素定位项目该中心元素将扩展以填充空间。

要创建边框布局您需要将fyne.CanvasObject应位于边框位置的

传递给布局以及像往常一样的容器。

这种语法与其他布局略有不同但基本上

bottom,

任何传递到容器但未出现在特定边界位置的项目将被定位到中心区域并将扩展以填充可用空间。

您还可以将nil希望留空的参数传递给边框。

package

(image/colorfyne.io/fyne/v2/appfyne.io/fyne/v2/canvasfyne.io/fyne/v2/containerfyne.io/fyne/v2/layout

)func

container.New(layout.NewBorderLayout(top,

nil,

middle)myWindow.SetContent(content)myWindow.ShowAndRun()

请注意中心的所有项目都会扩展以填充空间就像它们在[layout.MaxLayout]容器中一样。

要自己管理该区域您可以创建一个新的fyne.Container使用container.New()并使用您希望的任何布局。

4.5

但经过调整以在应用程序中布局表单。

每个项目的高度将是每行中两个最小高度中的较大者。

左侧项目的宽度将是第一列中所有项目的最大最小宽度而每行中的第二个项目将扩展以填充空间。

这种布局更常用于widget.Form用于验证、提交和取消按钮等但它也可以直接用于layout.NewFormLayout()传递给container.New(…).

package

(image/colorfyne.io/fyne/v2/appfyne.io/fyne/v2/canvasfyne.io/fyne/v2/containerfyne.io/fyne/v2/layout

)func

container.New(layout.NewFormLayout(),

label1,

value2)myWindow.SetContent(grid)myWindow.ShowAndRun()

4.6

layout.CenterLayout将其容器中的所有项目组织到可用空间的中心。

对象将按照它们传递给容器的顺序绘制最后一个绘制在最上面。

package

(image/colorfyne.io/fyne/v2/appfyne.io/fyne/v2/canvasfyne.io/fyne/v2/containerfyne.io/fyne/v2/layoutfyne.io/fyne/v2/***me

)func

canvas.NewImageFromResource(***me.FyneLogo())img.FillMode

color.Black)content

container.New(layout.NewCenterLayout(),

img,

text)myWindow.SetContent(content)myWindow.ShowAndRun()

中心布局使所有项目保持在最小尺寸如果您希望扩展项目以填充空间请参阅

[layout.MaxLayout].

这layout.MaxLayout是最简单的布局它将容器中的所有项目设置为与容器相同的大小。

这在一般容器中通常不是很有用但在编写小部件时可能是合适的。

最大布局将容器扩展为至少是最大项目的最小尺寸的尺寸。

对象将按照传递给容器的顺序绘制最后一个绘制在最上面。

package

(image/colorfyne.io/fyne/v2/appfyne.io/fyne/v2/canvasfyne.io/fyne/v2/containerfyne.io/fyne/v2/layoutfyne.io/fyne/v2/***me

)func

canvas.NewImageFromResource(***me.FyneLogo())text

color.Black)content

container.New(layout.NewMaxLayout(),

img,

text)myWindow.SetContent(content)myWindow.ShowAndRun()

4.8

容器用于允许用户在不同的内容面板之间切换。

标签要么只是文本要么是文本和一个图标。

建议不要混合一些有图标的标签和一些没有图标的标签。

使用container.NewAppTabs(...)和传递

container.NewTabItem(...)创建选项卡容器。

container.TabLocationTop、container.TabLocationBottom、container.TabLocationBottom

package

(fyne.io/fyne/v2/appfyne.io/fyne/v2/container//fyne.io/fyne/v2/***mefyne.io/fyne/v2/widget

)func

container.NewAppTabs(container.NewTabItem(Tab

widget.NewLabel(Hello)),container.NewTabItem(Tab

widget.NewLabel(World!)),)//tabs.Append(container.NewTabItemWithIcon(Home,

***me.HomeIcon(),

tab)))tabs.SetTabLocation(container.TabLocationLeading)myWindow.SetContent(tabs)myWindow.ShowAndRun()

在移动设备上加载时选项卡位置可能会被忽略。

在纵向方向中leading