本文檔注意參考官網(wǎng)(developer.fyne.io/) 編寫, 只保留基本用法

go代碼展示為Go 1.16?及更高版本,?ide為goland2021.2

?這是一個系列文章：

Fyne ( go跨平臺GUI )中文文檔-入門(一)-CSDN博客

Fyne ( go跨平臺GUI )中文文檔-Fyne總覽(二)-CSDN博客

Fyne ( go跨平臺GUI )中文文檔-繪圖和動畫(三)-CSDN博客

Fyne ( go跨平臺GUI )中文文檔-容器和布局 (四)-CSDN博客

Fyne ( go跨平臺GUI )中文文檔-小部件 (五)-CSDN博客

Fyne ( go跨平臺GUI )中文文檔- 數(shù)據(jù)綁定 (六)-CSDN博客

Fyne ( go跨平臺GUI )中文文檔- 擴(kuò)展Fyne (七)-CSDN博客

Fyne ( go跨平臺GUI )中文文檔- 架構(gòu) (八)完結(jié)-CSDN博客

4. 容器和布局

4.1 盒子(box)

最常用的布局是layout.BoxLayout，它有兩種變體，水平和垂直。盒子布局將所有元素排列在單行或單列中，并帶有可選的空格以幫助對齊。
創(chuàng)建的水平框布局layout.NewHBoxLayout()在單行中創(chuàng)建項目排列?？蛑械拿總€項目都將其寬度設(shè)置為它MinSize().Width，并且所有項目的高度將相等，是所有MinSize().Height值中最大的。布局可以在容器中使用，也可以使用 box 小部件widget.NewHBox()。
垂直框布局類似，但它將項目排列在一列中。每個項目都將其高度設(shè)置為最小值，并且所有寬度都將相等，設(shè)置為最小寬度中的最大值。
要在元素之間創(chuàng)建擴(kuò)展空間（例如，使一些左對齊而另一些右對齊），請?zhí)砑?alayout.NewSpacer()作為項目之一。墊片將膨脹以填充所有可用空間。在垂直框布局的開頭添加一個分隔符將導(dǎo)致所有項目底部對齊。您可以在水平排列的開頭和結(jié)尾添加一個以創(chuàng)建居中對齊。

package mainimport ("image/color""fyne.io/fyne/v2/app""fyne.io/fyne/v2/canvas""fyne.io/fyne/v2/container""fyne.io/fyne/v2/layout"
)func main() {myApp := app.New()myWindow := myApp.NewWindow("Box Layout")text1 := canvas.NewText("Hello", color.White)text2 := canvas.NewText("There", color.White)text3 := canvas.NewText("(right)", color.White)content := container.New(layout.NewHBoxLayout(), text1, text2, layout.NewSpacer(), text3)text4 := canvas.NewText("centered", color.White)centered := container.New(layout.NewHBoxLayout(), layout.NewSpacer(), text4, layout.NewSpacer())myWindow.SetContent(container.New(layout.NewVBoxLayout(), content, centered))myWindow.ShowAndRun()
}

4.2 網(wǎng)格(Grid)

網(wǎng)格布局以具有固定列數(shù)的網(wǎng)格模式布置容器的元素。項目將填充一行，直到滿足列數(shù)，之后將創(chuàng)建一個新行。垂直空間將在每行對象之間平均分配。
您可以使用layout.NewGridLayout(cols)來創(chuàng)建網(wǎng)格布局, 其中 cols 是您希望在每行中擁有的項目（列）數(shù)。然后將此布局作為第一個參數(shù)傳遞給?container.New(...).
如果您調(diào)整容器大小，則每個單元格都將調(diào)整大小以共享可用空間。

package mainimport ("image/color""fyne.io/fyne/v2/app""fyne.io/fyne/v2/canvas""fyne.io/fyne/v2/container""fyne.io/fyne/v2/layout"
)func main() {myApp := app.New()myWindow := myApp.NewWindow("Grid Layout")text1 := canvas.NewText("1", color.White)text2 := canvas.NewText("2", color.White)text3 := canvas.NewText("3", color.White)grid := container.New(layout.NewGridLayout(2), text1, text2, text3)myWindow.SetContent(grid)myWindow.ShowAndRun()
}

4.3 網(wǎng)格包裹(Grid wrap)

與之前的網(wǎng)格布局一樣，網(wǎng)格環(huán)繞布局以網(wǎng)格模式創(chuàng)建元素排列。但是，此網(wǎng)格沒有固定數(shù)量的列，而是為每個單元格使用固定大小，然后將內(nèi)容流到顯示項目所需的行數(shù)。
layout.NewGridWrapLayout(size)?您可以使用其中size?指定要應(yīng)用于所有子元素的大小來創(chuàng)建網(wǎng)格環(huán)繞布局。然后將此布局作為第一個參數(shù)傳遞給?container.New(...). 列數(shù)和行數(shù)將根據(jù)容器的當(dāng)前大小計算。
最初，網(wǎng)格環(huán)繞布局將只有一列，如果您調(diào)整它的大小（如右側(cè)的代碼注釋所示），它將重新排列子元素以填充空間。

package mainimport ("image/color""fyne.io/fyne/v2""fyne.io/fyne/v2/app""fyne.io/fyne/v2/canvas""fyne.io/fyne/v2/container""fyne.io/fyne/v2/layout"
)func main() {myApp := app.New()myWindow := myApp.NewWindow("Grid Wrap Layout")text1 := canvas.NewText("1", color.White)text2 := canvas.NewText("2", color.White)text3 := canvas.NewText("3", color.White)grid := container.New(layout.NewGridWrapLayout(fyne.NewSize(50, 50)),text1, text2, text3)myWindow.SetContent(grid)// myWindow.Resize(fyne.NewSize(180, 75))myWindow.ShowAndRun()
}

4.4 邊(Border)

邊框布局可能是最廣泛用于構(gòu)建用戶界面的布局，因為它允許圍繞中心元素定位項目，該中心元素將擴(kuò)展以填充空間。要創(chuàng)建邊框布局，您需要將fyne.CanvasObject應(yīng)位于邊框位置的 s 傳遞給布局（以及像往常一樣的容器）。這種語法與其他布局略有不同，但基本上?layout.NewBorderLayout(top, bottom, left, right)如右側(cè)示例所示。
任何傳遞到容器但未出現(xiàn)在特定邊界位置的項目將被定位到中心區(qū)域，并將擴(kuò)展以填充可用空間。您還可以將nil希望留空的參數(shù)傳遞給邊框。

package mainimport ("image/color""fyne.io/fyne/v2/app""fyne.io/fyne/v2/canvas""fyne.io/fyne/v2/container""fyne.io/fyne/v2/layout"
)func main() {myApp := app.New()myWindow := myApp.NewWindow("Border Layout")top := canvas.NewText("top bar", color.White)left := canvas.NewText("left", color.White)middle := canvas.NewText("content", color.White)content := container.New(layout.NewBorderLayout(top, nil, left, nil),top, left, middle)myWindow.SetContent(content)myWindow.ShowAndRun()
}

請注意，中心的所有項目都會擴(kuò)展以填充空間（就像它們在[layout.MaxLayout]容器中一樣）。要自己管理該區(qū)域，您可以創(chuàng)建一個新的fyne.Container（使用container.New()）并使用您希望的任何布局。

4.5 表單(Form)

這layout.FormLayout就像一個 2 列網(wǎng)格布局?，但經(jīng)過調(diào)整以在應(yīng)用程序中布局表單。每個項目的高度將是每行中兩個最小高度中的較大者。左側(cè)項目的寬度將是第一列中所有項目的最大最小寬度，而每行中的第二個項目將擴(kuò)展以填充空間。
這種布局更常用于widget.Form（用于驗證、提交和取消按鈕等），但它也可以直接用于layout.NewFormLayout()傳遞給container.New(…).

package mainimport ("image/color""fyne.io/fyne/v2/app""fyne.io/fyne/v2/canvas""fyne.io/fyne/v2/container""fyne.io/fyne/v2/layout"
)func main() {myApp := app.New()myWindow := myApp.NewWindow("Form Layout")label1 := canvas.NewText("Label 1", color.Black)value1 := canvas.NewText("Value", color.White)label2 := canvas.NewText("Label 2", color.Black)value2 := canvas.NewText("Something", color.White)grid := container.New(layout.NewFormLayout(), label1, value1, label2, value2)myWindow.SetContent(grid)myWindow.ShowAndRun()
}

4.6 居中

layout.CenterLayout將其容器中的所有項目組織到可用空間的中心。對象將按照它們傳遞給容器的順序繪制，最后一個繪制在最上面。

package mainimport ("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.ImageFillOriginaltext := canvas.NewText("Overlay", color.Black)content := container.New(layout.NewCenterLayout(), img, text)myWindow.SetContent(content)myWindow.ShowAndRun()
}

中心布局使所有項目保持在最小尺寸，如果您希望擴(kuò)展項目以填充空間，請參閱 [layout.MaxLayout].

4.7 最大化

這layout.MaxLayout是最簡單的布局，它將容器中的所有項目設(shè)置為與容器相同的大小。這在一般容器中通常不是很有用，但在編寫小部件時可能是合適的。
最大布局將容器擴(kuò)展為至少是最大項目的最小尺寸的尺寸。對象將按照傳遞給容器的順序繪制，最后一個繪制在最上面。

package mainimport ("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("Max Layout")img := canvas.NewImageFromResource(theme.FyneLogo())text := canvas.NewText("Overlay", color.Black)content := container.New(layout.NewMaxLayout(), img, text)myWindow.SetContent(content)myWindow.ShowAndRun()
}

4.8 選項卡

AppTabs?容器用于允許用戶在不同的內(nèi)容面板之間切換。標(biāo)簽要么只是文本，要么是文本和一個圖標(biāo)。建議不要混合一些有圖標(biāo)的標(biāo)簽和一些沒有圖標(biāo)的標(biāo)簽。使用container.NewAppTabs(...)和傳遞?container.TabItem項目（可以使用創(chuàng)建?container.NewTabItem(...)）創(chuàng)建選項卡容器。
可以通過設(shè)置選項卡的位置來配置選項卡容器，設(shè)置選項有?container.TabLocationTop、container.TabLocationBottom、container.TabLocationBottom?container.TabLocationLeading?container.TabLocationTrailing, 默認(rèn)為container.TabLocationTop

package mainimport ("fyne.io/fyne/v2/app""fyne.io/fyne/v2/container"//"fyne.io/fyne/v2/theme""fyne.io/fyne/v2/widget"
)func main() {myApp := app.New()myWindow := myApp.NewWindow("TabContainer Widget")tabs := container.NewAppTabs(container.NewTabItem("Tab 1", widget.NewLabel("Hello")),container.NewTabItem("Tab 2", widget.NewLabel("World!")),)//tabs.Append(container.NewTabItemWithIcon("Home", theme.HomeIcon(), widget.NewLabel("Home tab")))tabs.SetTabLocation(container.TabLocationLeading)myWindow.SetContent(tabs)myWindow.ShowAndRun()
}

在移動設(shè)備上加載時，選項卡位置可能會被忽略。在縱向方向中leading?或?trailing位置將更改為bottom。在橫向時top?或bottom位置將移動到leading。