Container and Layouts

In the previous example we saw how to set a CanvasObject to the content of a Canvas, but it is not very useful to only show one visual element. To show more than one item we use the Container type.

As the fyne.Container is also a fyne.CanvasObject we can set it to be the content of a fyne.Canvas. In this example we create 3 text objects and then place them in a container using the NewContainer() function. As there is no layout set we can move the elements around like you see with text2.Move().

A fyne.Layout implements a method for organising items within a container. By uncommenting the NewContainerWithLayout() line in this example you alter the container to use a grid layout with 2 columns. Run this code and try resizing the window to see how the layout automatically configures the contents of the window. Notice also that the manual position of text2 is ignored by the layout code.

To find out more jump to the Layout section of this tour.

Copy Example

Example Code

            
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
package main

import (
	"image/color"

	"fyne.io/fyne"
	"fyne.io/fyne/app"
	"fyne.io/fyne/canvas"
	//"fyne.io/fyne/layout"
)

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

	text1 := canvas.NewText("Hello", color.White)
	text2 := canvas.NewText("There", color.White)
	text2.Move(fyne.NewPos(20, 20))
	text3 := canvas.NewText("World", color.White)
	container := fyne.NewContainer(text1, text2, text3)
	//	container := fyne.NewContainerWithLayout(layout.NewGridLayout(2),
	//		text1, text2, text3)

	myWindow.SetContent(container)
	myWindow.ShowAndRun()
}