learn fyne 5 基本布局1
bl4cyy
编辑于 2023年07月11日 06:02
收录于文集
共21篇

fyne中的控件（widget）的位置有2种设置方式：

一是手动布局container.NewWithoutLayout()。

二是自动布局。

手动布局中的控件默认位置在所属布局的左上角，通过控件的Move方法，可以将控件放置在指定位置。

自动布局包括居中布局、垂直布局、水平布局、网格布局、最大布局等布局方式，自动布局中，控件的Move方法和Resize方法失效。

（一） 手动布局

代码块
Go
自动换行
复制代码
package main

import (
"fyne.io/fyne/v2"
"fyne.io/fyne/v2/app"
"fyne.io/fyne/v2/container"
"fyne.io/fyne/v2/theme"
"fyne.io/fyne/v2/widget"
)

func main() {
  a := app.NewWithID("fyne1")
  w := a.NewWindow("fyne1")
  w.SetIcon(theme.FyneLogo())
  w.Resize(fyne.NewSize(1000, 700))
  lbl1 := widget.NewLabel("lbl1")
  // 默认lbl1在大小是文字大小加上padding，默认位置在所属布局的左上角
  c := container.NewWithoutLayout(lbl1)
  w.SetContent(c)
  w.CenterOnScreen()
  w.ShowAndRun()
}
复制成功

代码块
Go
自动换行
复制代码
package main

import (
  "fyne.io/fyne/v2"
  "fyne.io/fyne/v2/app"
  "fyne.io/fyne/v2/container"
  "fyne.io/fyne/v2/theme"
  "fyne.io/fyne/v2/widget"
)

func main() {
  a := app.NewWithID("fyne1")
  w := a.NewWindow("fyne1")
  w.SetIcon(theme.FyneLogo())
  w.Resize(fyne.NewSize(1000, 700))
  lbl1 := widget.NewLabel("lbl1")
  lbl1.Move(fyne.NewPos(10,50))
  lbl2 := widget.NewLabel("lbl2")
  lbl2.Move(fyne.NewPos(10,100))
  lbl3 := widget.NewLabel("lbl3")
  lbl3.Move(fyne.NewPos(100,50))
  lbl4 := widget.NewLabel("lbl4")
  lbl4.Move(fyne.NewPos(100,100))
  lbl5 := widget.NewLabel("lbl5")
  lbl5.Move(fyne.NewPos(200,200))
  c := container.NewWithoutLayout(lbl1,lbl2,lbl3,lbl4,lbl5)
  w.SetContent(c)
  w.CenterOnScreen()
  w.ShowAndRun()
}
复制成功

  • （二） 自动布局

1 居中布局

代码块
Go
自动换行
复制代码
package main

import (
  "fyne.io/fyne/v2"
  "fyne.io/fyne/v2/app"
  "fyne.io/fyne/v2/container"
  "fyne.io/fyne/v2/theme"
  "fyne.io/fyne/v2/widget"
)

func main() {
  a := app.NewWithID("fyne1")
  a.Settings().SetTheme(&theme1{})
  w := a.NewWindow("fyne1")
  w.SetIcon(theme.FyneLogo())
  w.Resize(fyne.NewSize(1000, 700))
  lbl1 := widget.NewLabel("Welcome to fyne! 欢迎学校fyne框架！")
  w.SetContent(container.NewCenter(lbl1))
  w.CenterOnScreen()
  w.ShowAndRun()
}
复制成功

2 水平布局

代码块
Go
自动换行
复制代码
package main

import (
  "fyne.io/fyne/v2"
  "fyne.io/fyne/v2/app"
  "fyne.io/fyne/v2/container"
  "fyne.io/fyne/v2/theme"
  "fyne.io/fyne/v2/widget"
)

func main() {
  a := app.NewWithID("fyne1")
  w := a.NewWindow("fyne1")
  w.SetIcon(theme.FyneLogo())
  w.Resize(fyne.NewSize(1000, 700))
  lbl1 := widget.NewLabel("lbl1")
  lbl1.Move(fyne.NewPos(10,50))
  lbl2 := widget.NewLabel("lbl2")
  lbl2.Move(fyne.NewPos(10,100))
  lbl3 := widget.NewLabel("lbl3")
  lbl3.Move(fyne.NewPos(100,50))
  lbl4 := widget.NewLabel("lbl4")
  lbl4.Move(fyne.NewPos(100,100))
  lbl5 := widget.NewLabel("lbl5")
  lbl5.Move(fyne.NewPos(200,200))
  lbl1.Resize(fyne.NewSize(200,200))  
 // 控件的Move方法和Resize方法失效,从布局的左上角开始依次向右排列
  c := container.NewHBox(lbl1,lbl2,lbl3,lbl4,lbl5)
  w.SetContent(c)
  w.CenterOnScreen()
  w.ShowAndRun()
}
复制成功

3 垂直布局

代码块
Go
自动换行
复制代码
package main

import (
  "fyne.io/fyne/v2"
  "fyne.io/fyne/v2/app"
  "fyne.io/fyne/v2/container"
  "fyne.io/fyne/v2/theme"
  "fyne.io/fyne/v2/widget"
)

func main() {
  a := app.NewWithID("fyne1")
  w := a.NewWindow("fyne1")
  w.SetIcon(theme.FyneLogo())
  w.Resize(fyne.NewSize(1000, 700))
  lbl1 := widget.NewLabel("lbl1")
  lbl2 := widget.NewLabel("lbl2")
  lbl3 := widget.NewLabel("lbl3")
  lbl4 := widget.NewLabel("lbl4")
  lbl5 := widget.NewLabel("lbl5")
  // 从容器的左上角开始依次向下排列
  c := container.NewVBox(lbl1,lbl2,lbl3,lbl4,lbl5)
  w.SetContent(c)
  w.CenterOnScreen()
  w.ShowAndRun()
}
复制成功

计算机 学习 GUI 编程 golang go语言 图形界面 开发框架 fyne
本文为我原创，未经授权禁止转载
cv24920050