fyne的border布局02

2024-06-21 19:44

文章标签 布局 02 border fyne

本文主要是介绍fyne的border布局02，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！

border布局02

边框布局可能是最广泛用于构建用户界面的布局，因为它允许将项目定位在中心元素周围，而中心元素将扩展以填充空间。

实现如下一个界面布局:

在这里插入图片描述

实现代码如下:

package mainimport ("edgevpndemo/resources""fyne.io/fyne/v2""fyne.io/fyne/v2/app""fyne.io/fyne/v2/container""fyne.io/fyne/v2/theme""fyne.io/fyne/v2/widget"
)const welcomeMessage string = `
# WelcomeWelcome to the EdgeVPN gui. This is a simple utility to control EdgeVPN instances in your system.This application can be safely closed. VPN connection will keep running in the background.
`func main() {app := app.New()w := app.NewWindow("EdgeVPN")welcomeText := widget.NewRichTextFromMarkdown(welcomeMessage)addVPNbtn := widget.NewButtonWithIcon("Add VPN",theme.ContentAddIcon(),func() {})addVPNbtn.Importance = widget.HighImportancegenerateVPNbtn := widget.NewButtonWithIcon("Generate new VPN",theme.DocumentCreateIcon(),func() {})importVPNbtn := widget.NewButtonWithIcon("Import new VPN",theme.DownloadIcon(),func() {})downloadEdgeVPNbtn := widget.NewButtonWithIcon("Manage EdgeVPN versions",resources.GetResource(resources.EdgeVPNIcon, "manage"),func() {})noVPN := widget.NewLabel("No VPN found in the system!")aboutButton := widget.NewButtonWithIcon("About",theme.InfoIcon(),func() {})w.SetContent(container.NewBorder(welcomeText,nil,nil,nil,container.NewCenter(container.NewGridWithColumns(1,noVPN, addVPNbtn, generateVPNbtn, importVPNbtn, downloadEdgeVPNbtn,aboutButton,)),),)w.Resize(fyne.NewSize(640, 640))w.Show()app.Run()}

使用了3种container进行组合。

还可以使用如下container，效果是一样的:

w.SetContent(container.NewBorder(welcomeText,nil,nil,nil,container.NewCenter(container.NewVBox(noVPN, addVPNbtn, generateVPNbtn, importVPNbtn, downloadEdgeVPNbtn,aboutButton,)),),
)