常用小部件介绍,Fyne笔记第3篇
目录
这是我的Fyne学习笔记系列第3篇。
基本概念
Fyne中任何可以添加到画布的图形都实现CanvasObject接口。当一个窗口中要放多个CanvasObject时,因为并排、居中、竖着列等放置需求,就有需要实现这个接口的容器,它本身不显示图形,通过布局专门控制其他图形的放置。
fyne.Widget是一种特殊的CanvasObject,可以有状态从而实现交互式元素,比如按钮。
https://docs.fyne.io/explore/widgets/ 可以查看官方提供的所有小部件。
https://github.com/fyne-io/fyne-x 还有一些社区扩展小部件。
https://github.com/ErikKalkoken/fyne-kx 也有一些扩展小部件。
一些常用的小部件示例
按钮
a := app.New() //fyne.io/fyne/v2/app
w := a.NewWindow("示例")
w.SetContent(widget.NewButton("退出",func(){ a.Quit() })) //fyne.io/fyne/v2/widget
卡片
w.SetContent(widget.NewCard("标题","子标题",widget.NewLabel("内容")))
日期选择器
widget.NewCalendar(time.Now(), func(t time.Time) {})
第一个参数表示初始显示日期。第二个参数接收选中的日期。
结果是一个日历,可以让用户选择日期。
选择
widget.NewCheck("选项",func (change bool){}) //单选
widget.NewCheckGroup([]string{"选项1","选项2"},func (change []string){})//多选
widget.NewRadioGroup([]string{"选项1","选项2"}, func(string){})//多个选项选一个
widget.NewSelect([]string{"选项1","选项2"}, func(string))//单选下列列表
输入框
e := widget.NewEntry()
e.MultiLine = true //支持多行
e.Password = true //变为密码框
e.Wrapping//控制换行做法
e.Text//输入框内容
e.SetMinRowsVisible(5)//最少显示5行
e.SetPlaceHolder("提示")//设置当输入内容为空时所显示的文本
e := widget.NewSelectEntry([]string{"常见输入"})//可以用户自行输入,或下列选择直接输入特定内容
超链接
u, _ := url.Parse("https://to-link.com")
widget.NewHyperlink("link",u)
点击会使用系统默认浏览器打开链接
标签
l := widget.NewLabel("text")//显示默认不可复制的文本
l.Selectable = true//可以复制
l.SetText("text")//修改显示文本
l.Alignment//设置文本对齐方式
l.Wrapping//控制换行做法
列表
list = widget.NewList(
// Length 返回行数
func() int {
return 4
},
// CreateCell 创建一行小部件
func() fyne.CanvasObject {
return container.NewLabel("text")
},
// UpdateCell 更新一行小部件
func(id widget.ListItemID, cell fyne.CanvasObject) {
c := cell.(*widget.Label)
id.Row,id.Col//获取行号列号
},
)
list.OnSelected = func(id ListItemID){}//当某行被点击时执行
list.HideSeparators = true//隐藏每行之间的分隔符
表格
// 创建表格小部件
table = widget.NewTable(
// Length 返回行数和列数
func() (int, int) {
rows := 4
cols := 4
return rows, cols
},
// CreateCell 创建一个单元格小部件
func() fyne.CanvasObject {
return container.NewLabel("text")
},
// UpdateCell 更新单元格内容
func(id widget.TableCellID, cell fyne.CanvasObject) {
c := cell.(*widget.Label)
id.Row,id.Col//获取行号列号
},
)
table.OnSelected = func(id TableCellID){}//当某行某列被点击时执行
table.SetColumnWidth(0, 120)//设置指定列宽,单位px
table.SetRowHeight(0,120)//设置指定行高,单位px
模态框
package main
import (
"fyne.io/fyne/v2"
"fyne.io/fyne/v2/app"
"fyne.io/fyne/v2/container"
"fyne.io/fyne/v2/widget"
)
func main() {
// 1. 创建 Fyne 应用和主窗口
myApp := app.New()
myWindow := myApp.NewWindow("模态弹窗示例")
myWindow.Resize(fyne.NewSize(400, 300)) // 设置主窗口大小
canvas := myWindow.Canvas() // 获取当前画布(传给 NewModalPopUp)
var modalPopUp *widget.PopUp
closeBtn := widget.NewButton("关闭弹窗", func() {
modalPopUp.Hide()
})
modalContent := container.NewVBox(
widget.NewLabel("这是模态弹窗的内容!"),
widget.NewLabel("模态弹窗会遮挡底层,必须关闭才能操作主窗口"),
closeBtn,
)
modalPopUp = widget.NewModalPopUp(modalContent, canvas)
// 4. 主窗口内容:一个打开弹窗的按钮
openModalBtn := widget.NewButton("点击打开模态弹窗", func() {
modalPopUp.Show() // 点击按钮,显示弹窗
})
// 主窗口布局:将按钮居中显示
mainContent := container.NewCenter(openModalBtn)
myWindow.SetContent(mainContent)
// 5. 运行应用
myWindow.ShowAndRun()
}
进度条
progress := widget.NewProgressBar()
progress.Min = 0
progress.Max = 100
progress.TextFormatter = func() string {
return fmt.Sprintf("加载中: %g", progress.Value)
}
progress.SetValue(float64(1) + rand.Float64())
Min、Max、Value字段控制进度,默认显示Value/Max的整数百分比(例如10%)
TextFormatter自定义显示内容
分隔符
widget.NewSeparator()
滑块
Slider := widget.NewSlider()
Slider.Min = 1940
Slider.Max = 2040
Slider.Step = 1
progress.OnChangeEnded = func(float64) {}
类似html5的