Box Layout

The Box layout arranges widgets either horizontally or vertically in a single row or column. It is useful for aligning items in a straight line, such as buttons, labels, or icons.

HBox Layout

Show Code

package main

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

func main() {
  myApp := app.New()
  myWindow := myApp.NewWindow("HBox Layout")

  // Create some buttons
  btn1 := widget.NewButton("Button 1", nil)
  btn2 := widget.NewButton("Button 2", nil)
  btn3 := widget.NewButton("Button 3", nil)

  // Use HBox layout: left-to-right
  hbox := container.New(layout.NewHBoxLayout(),
    btn1,
    btn2,
    btn3,
  )

  myWindow.SetContent(hbox)
  myWindow.Resize(fyne.NewSize(400, 100))
  myWindow.ShowAndRun()
}

VBox Layout

Show Code

package main

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

func main() {
  myApp := app.New()
  myWindow := myApp.NewWindow("VBox Layout")

  // Create some buttons
  btn1 := widget.NewButton("Button 1", nil)
  btn2 := widget.NewButton("Button 2", nil)
  btn3 := widget.NewButton("Button 3", nil)

  // Use VBox layout: top-to-bottom
  hbox := container.New(layout.NewVBoxLayout(),
    btn1,
    btn2,
    btn3,
  )

  myWindow.SetContent(hbox)
  myWindow.Resize(fyne.NewSize(400, 100))
  myWindow.ShowAndRun()
}