常用容器介绍,Fyne笔记第4篇
目录
这是我的Fyne学习笔记系列第4篇。
Fyne提供了丰富的容器来对widget实现不同的展示效果。以下介绍一些常用的容器
垂直盒子
调用container.NewVBox将要垂直排列的小部件放进入即可。
所有小部件的宽度都被保持到,最宽小部件的宽度。
注意:每个小部件到只得到MinSize方法返回的高度。如果需要响应式布局,这可能不是很好。
水平盒子
调用container.NewHBox将要垂直排列的小部件放进入即可。
所有小部件的高度都被保持到,最高小部件的高度。
注意:每个小部件到只得到MinSize方法返回的宽度。如果需要响应式布局,这可能不是很好。
Border
这会先把空间分配给top, bottom, left, right四个边缘的小部件(都是可选的);top,bottom的宽度将被拉伸的最大宽度;left,right的高度将被设置总高度-top高度-bottom高度,即剩余最大高度;随后的中间空间全部堆叠分配给剩余小部件
示例
top := container.NewScroll(widget.NewLabel("应用名"))
top.SetMinSize(fyne.NewSize(0, 50)) //确保top和bottom高度50
bottom := container.NewScroll(widget.NewButton("我的",func(){}))
bottom.SetMinSize(fyne.NewSize(0, 50))
c := container.NewBorder(top, bottom, nil, nil, canvas.NewCircle(color.Black))
这样可以实现App常见的,顶部应用名,底部特定按钮,中间主体内容的布局。
居中
container.NewCenter 可以让特定小部件实现水平垂直均居中。
注意:小部件会显示为MinSize。如果需要响应式布局,这可能不是很好。
Grid
container.NewGridWithColumns(3,widget.NewLabel("Hello"))//指定3个小部件形成一行3列,自动换行
container.NewGridWithRows(3,widget.NewLabel("Hello"))//指定一共3行,自动换行,每行(所有小部件/行数)个列
//上两个,每个小部件,其宽度为总宽度除以列数,高度则为总高度除以所需行数
container.NewGridWrap(fyne.NewSize(200,200),widget.NewLabel("Hello"))//指定每个小部件宽高,从左到右排列,一行不够自动换行
这很适合响应式布局。
注意这类布局,所有里面小部件宽高都相同。
Stack
container.NewStack会让小部件填满可用空间。
注意:由于容器MinSize使用小部件的MinSize,所以当它和VBox等基于MinSize分配空间的容器组合时,不会得到预期的填满可用空间。
Scroll
container.NewScroll可以做到手机类似耍头条那种内容一个屏幕放不下,就向下滑动来看未显示内容的效果。
和Stack一样,当它和VBox等基于MinSize分配空间的容器组合时,不会得到预期的填满可用空间。
标签页
AppTabs
tabs := container.NewAppTabs(
container.NewTabItem("Tab 1", widget.NewLabel("Hello")),
container.NewTabItem("Tab 2", widget.NewLabel("World!")),
)//设置标签元素
//tabs.Append() 追加标签
//设置标签位置为顶部
tabs.SetTabLocation(container.TabLocationTop)
可以实现接近浏览器多网页打开后切换的那种标签页效果(没有X图标让用户自行关闭)
DocTabs
在AppTabs的功能上更进一步,可以彻底实现浏览多网页打开后切换的那种标签页效果,而且还能用户自行关闭。
用法
tabs := container.NewDocTabs()
tabs.SetTabLocation(container.TabLocationTop)
tabs.Append(container.NewTabItem("网页1",container.NewVBox()))
内部窗口
InnerWindow 是一个特殊容器,它表示一个在窗口内的窗口,可以被拖到,不能超出上级窗口。可以设置OnDragged, OnResized,OnMinimized, OnMaximized, OnTappedBar, OnTappedIcon多种挂钩。
MultipleWindows管理多个InnerWindow
简单示例
package main
import (
"fyne.io/fyne/v2"
"fyne.io/fyne/v2/app"
"fyne.io/fyne/v2/container"
"fyne.io/fyne/v2/widget"
)
func main() {
myApp := app.New()
myWindow := myApp.NewWindow("多窗口演示")
// 创建第一个内窗口
win1 := container.NewInnerWindow("窗口1", widget.NewLabel("这是第一个窗口"))
win1.Resize(fyne.NewSize(300, 200))
win1.Move(fyne.NewPos(50, 50))
// 创建第二个内窗口(带内容)
content2 := container.NewVBox(
widget.NewLabel("窗口2内容"),
)
win2 := container.NewInnerWindow("窗口2", content2)
win2.Resize(fyne.NewSize(250, 150))
win2.Move(fyne.NewPos(200, 100))
// 创建多窗口管理容器
multiWin := container.NewMultipleWindows(win1, win2)
// 设置主窗口内容
myWindow.SetContent(multiWin)
myWindow.Resize(fyne.NewSize(800, 600))
myWindow.ShowAndRun()
}