fyne的border布局02

border布局02

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

实现如下一个界面布局:

实现代码如下:

package main

import (
	"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 = `
# Welcome

Welcome 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.HighImportance

	generateVPNbtn := 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,
		)),
	),
)