使用go-gio库示例tabs详解

包含的组件和功能
1、标签页的显示和设置

package mainimport ("fmt""image""image/color""log""math""os""gioui.org/app""gioui.org/f32""gioui.org/io/system""gioui.org/layout""gioui.org/op""gioui.org/op/clip""gioui.org/op/paint""gioui.org/unit""gioui.org/widget""gioui.org/widget/material""gioui.org/font/gofont"
)var w *app.Windowfunc main() {go func() {defer os.Exit(0)w = app.NewWindow(app.Title("tabSwitcher"))if err := loop(w); err != nil {log.Fatal(err)}}()app.Main()
}// 事件循环
func loop(w *app.Window) error {th := material.NewTheme(gofont.Collection())var ops op.Opsfor {e := <-w.Events()switch e := e.(type) {case system.DestroyEvent:return e.Errcase system.FrameEvent:gtx := layout.NewContext(&ops, e)drawTabs(gtx, th)e.Frame(gtx.Ops)}}
}var tabs Tabs // 标签// Tabs 标签组
type Tabs struct {list     layout.List // 列表组件tabs     []Tab       // 标签组件selected int         // 记录被选中的值
}// Tab 子标签
type Tab struct {btn   widget.Clickable // 点击对象Title string           // 标题名称
}// 初始化10个标签
func init() {for i := 1; i <= 10; i++ {tabs.tabs = append(tabs.tabs,Tab{Title: fmt.Sprintf("Tab %d", i)},)}
}// 设置上下文和组件的别名
type (C = layout.ContextD = layout.Dimensions
)// 标签界面
func drawTabs(gtx layout.Context, th *material.Theme) layout.Dimensions {// 垂直布局return layout.Flex{Axis: layout.Vertical}.Layout(gtx,layout.Rigid(func(gtx C) D {return tabs.list.Layout(gtx, len(tabs.tabs), func(gtx C, tabIdx int) D {// 获取当前的子标签组件对象t := &tabs.tabs[tabIdx]// 当前组件被点击后if t.btn.Clicked() {// 将当前值赋值为被选择的值tabs.selected = tabIdx// 刷新uiw.Invalidate()}var tabWidth int // 标签宽度return layout.Stack{Alignment: layout.S}.Layout(gtx,layout.Stacked(func(gtx C) D {// 创建一个可点击的小部件dims := material.Clickable(gtx, &t.btn, func(gtx C) D {// 12 宽度的组件return layout.UniformInset(unit.Sp(12)).Layout(gtx,// 显示标签的标题信息material.H6(th, t.Title).Layout,)})// 标签宽度等于当前组件的宽度tabWidth = dims.Size.Xreturn dims}),// 选中提示条layout.Stacked(func(gtx C) D {// 当选中标签id不是当前标签id时隐藏提示条if tabs.selected != tabIdx {return layout.Dimensions{}}// 当选中标签id和当前标签id相等时,正常显示提示条界面// 标签高度.将dp转换为int像素值tabHeight := gtx.Px(unit.Dp(3))// 矩形填充tabRect := image.Rect(0, 0, tabWidth, tabHeight)// 填充颜色paint.FillShape(gtx.Ops, th.Palette.ContrastBg, clip.Rect(tabRect).Op())return layout.Dimensions{Size: image.Point{X: tabWidth, Y: tabHeight},}}),)})}),// 在下面的区域填充颜色layout.Flexed(1, func(gtx C) D {// 填充区域-设置颜色fill(gtx, dynamicColor(tabs.selected), dynamicColor(tabs.selected+1))// 中间显示信息return layout.Center.Layout(gtx,material.H1(th, fmt.Sprintf("Tab content #%d", tabs.selected+1)).Layout,)}),)
}// 填充区域
func fill(gtx layout.Context, col1, col2 color.NRGBA) {dr := image.Rectangle{Max: gtx.Constraints.Min}paint.FillShape(gtx.Ops,color.NRGBA{R: 0, G: 0, B: 0, A: 0xFF},clip.Rect(dr).Op(),)col2.R = byte(float32(col2.R))col2.G = byte(float32(col2.G))col2.B = byte(float32(col2.B))paint.LinearGradientOp{Stop1:  f32.Pt(float32(dr.Min.X), 0),Stop2:  f32.Pt(float32(dr.Max.X), 0),Color1: col1,Color2: col2,}.Add(gtx.Ops)defer clip.Rect(dr).Push(gtx.Ops).Pop()paint.PaintOp{}.Add(gtx.Ops)
}// 动态的获取颜色
func dynamicColor(i int) color.NRGBA {sn, cs := math.Sincos(float64(i) * math.Phi)return color.NRGBA{R: 0xA0 + byte(0x30*sn),G: 0xA0 + byte(0x30*cs),B: 0xD0,A: 0xFF,}
}