秋来冬风的博客

常用小部件介绍,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的

Tags:
Categories: