秋来冬风的博客

常用容器介绍,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()
}
Tags:
Categories: