一个复杂的布局案例

实现如下布局:

布局分析:

代码如下:

package main

import (
	"complexlayout/icons"
	"fyne.io/fyne/v2"
	"fyne.io/fyne/v2/app"
	"fyne.io/fyne/v2/canvas"
	"fyne.io/fyne/v2/container"
	"fyne.io/fyne/v2/layout"
	"fyne.io/fyne/v2/theme"
	"fyne.io/fyne/v2/widget"
	"image/color"
)

const ApplicationTitle string = "ASM to HEX Converter"

var ArchString = []string{"ARM", "ARM64", "MIPS", "X86", "PPC", "SPARC", "SYSTEMZ"}
var ModeString = []string{"LITTLE_ENDIAN", "BIG_ENDIAN"}
var SyntaxString = []string{"INTEL", "ATT"}

func main() {
	myApp := app.New()
	myWindow := myApp.NewWindow("VPN")
	assemblyLabel := widget.NewLabel("Assembly code")
	offsetLabel := widget.NewLabel("Offset(hex)")

	output1 := widget.NewMultiLineEntry()
	output1.SetPlaceHolder("ARM64")
	output1.SetMinRowsVisible(24)
	output1.TextStyle.Monospace = true

	output1_info := widget.NewLabel("Little Endian")

	output1_card := container.NewVBox(output1,
		container.NewHBox(
			output1_info,
			layout.NewSpacer(),
			widget.NewButtonWithIcon("", theme.ContentCopyIcon(), func() {}),
		))

	assembly_code := `; sample code
nop
ret
b #0x1018de444
mov x0, #0x11fe0000
beq #0x10020c
cbnz r0, #0x682c4
`

	assemblyEditor := widget.NewMultiLineEntry()
	assemblyEditor.SetPlaceHolder("Assembly code")
	assemblyEditor.SetText(assembly_code)
	assemblyEditor.AcceptsTab()
	assemblyEditor.SetMinRowsVisible(20)

	offsetInput := widget.NewEntry()
	offsetInput.SetPlaceHolder("Offset(hex)")
	offsetInput.SetText("0")

	left_container := container.New(layout.NewVBoxLayout(),
		assemblyLabel,
		assemblyEditor,
		container.New(layout.NewFormLayout(), offsetLabel, offsetInput),
	)

	right_container := container.New(layout.NewVBoxLayout(),
		createDropdowns(),
		output1_card,
	)

	grid := container.New(layout.NewGridLayoutWithColumns(2),
		left_container,
		right_container,
	)

	app_title := canvas.NewText(ApplicationTitle, color.NRGBA{0, 0x80, 0, 0xff})
	app_title.TextSize = 24

	logo_icon := fyne.NewStaticResource("asm2hex.svg", icons.LOGO_ICON_BIN)
	background := canvas.NewImageFromResource(logo_icon)
	background.SetMinSize(fyne.NewSize(64, 64))

	status := widget.NewLabel("Ready")
	status.Alignment = fyne.TextAlignTrailing
	status.TextStyle = fyne.TextStyle{Bold: true}

	convertBtn := widget.NewButtonWithIcon("Convert", theme.StorageIcon(), func() {})
	convertBtn.Importance = widget.HighImportance
	toggleBtn := widget.NewButtonWithIcon("Toggle Mode", theme.ViewRefreshIcon(), func() {})
	toggleBtn.Importance = widget.WarningImportance
	clearBtn := widget.NewButtonWithIcon("Clear", theme.DeleteIcon(), func() {})
	clearBtn.Importance = widget.DangerImportance
	aboutBtn := widget.NewButtonWithIcon("About...", theme.QuestionIcon(), func() {})
	aboutBtn.Importance = widget.LowImportance
	status_container := container.New(layout.NewHBoxLayout(),
		status,
		layout.NewSpacer(),
		convertBtn,
		clearBtn,
		toggleBtn,
		aboutBtn,
	)

	main_layout := container.New(layout.NewVBoxLayout(),
		container.New(layout.NewHBoxLayout(),
			background,
			app_title,
			widget.NewCheck("0x", func(checked bool) {}),
			widget.NewCheck("GDB/LLDB", func(checked bool) {}),
			widget.NewCheck("Add Address", func(checked bool) {})),
		grid,
		status_container,
	)
	myWindow.SetContent(main_layout)
	myWindow.Resize(fyne.NewSize(800, 600))
	myWindow.CenterOnScreen()
	myWindow.Show()
	myApp.Run()
}

func createDropdowns() *fyne.Container {
	keystoneArchDropdown := &widget.Select{}
	keystoneArchDropdown.ExtendBaseWidget(keystoneArchDropdown)
	keystoneArchDropdown.SetOptions(ArchString)
	keystoneArchDropdown.SetSelectedIndex(1)

	keystoneModeDropdown := &widget.Select{}
	keystoneModeDropdown.ExtendBaseWidget(keystoneModeDropdown)
	keystoneModeDropdown.SetOptions(ModeString)
	keystoneModeDropdown.SetSelectedIndex(1)

	keystoneSyntaxDropdown := &widget.Select{}
	keystoneSyntaxDropdown.ExtendBaseWidget(keystoneSyntaxDropdown)
	keystoneSyntaxDropdown.SetOptions(SyntaxString)
	keystoneSyntaxDropdown.SetSelectedIndex(1)
	return container.NewHBox(
		keystoneArchDropdown,
		keystoneModeDropdown,
		keystoneSyntaxDropdown,
	)
}

总结:

实现这个布局使用到了VBox、HBox、Grid。

使用的组件有：Label、MultiLineEntry、ButtonWithIcon、Entry、Select、ImageFromResource、Check。