How to resize the widgets inside hbox or vbox?

[bidzhao]

Hello,

The entry/button/list are small in the GUI although I have explicitly set their size (fyne 2.3.0). What did I miss? The snapshot is https://drive.google.com/file/d/1ouXwUTXt4NQa1yXTi-HlBX1lrlAbUQA0/view?usp=drive_link

Here is the code:

`
package main

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

func main() {
myApp := app.New()
myWindow := myApp.NewWindow("VBox layout example")
myWindow.Resize(fyne.Size{Width: 800, Height: 600})

entry := widget.NewEntry()
entry.SetText("this is an entry")
entry.Resize(fyne.Size{Width: 400, Height: 100})
button := widget.NewButton("button", func() {})
button.Resize(fyne.Size{Width: 200, Height: 100})
hbox := container.NewHBox(entry, button)

items := []string{"A", "B", "C", "D", "E"}
list := widget.NewList(
	func() int {
		return len(items)
	},
	func() fyne.CanvasObject {
		box := container.NewHBox(widget.NewLabel("Template Object"))
		return box
	},
	func(id widget.ListItemID, item fyne.CanvasObject) {
		box := item.(*fyne.Container)
		label := box.Objects[0].(*widget.Label)
		label.SetText(items[id])
	})

list.Resize(fyne.Size{Width: 800, Height: 500})
vbox := container.NewVBox(
	hbox,
	list,
)

myWindow.SetContent(vbox)
myWindow.ShowAndRun()

}
`

[andydotxyz]

VBox and HBox explicitly pack widgets in to their min size - if you don't want that behaviour then try a different container.
"Overriding" the size with Resize will be ignored in a managed container, that is part of the layout code either from the container or your own layout logic for containers without set layout.

https://developer.fyne.io/faq/layout

[bidzhao]

Thank you! I wonder if I can set min size of widgets, like label, entry, list ... ?

[andydotxyz]

Their minimum size is already set based on content.
Do not enforce a "desired size" through MinSize, it will break portability. You need to use the right container to allocate available space appropriately.

[blaize]

Use layout.NewSpacer to divide the size of a widget in a container taking the max space. use the last arg to Border layout to take the whole space or grid layout to divide space equaly. Add a layout into a layout to fine tune the size and pos. don't forget spacer.

[tim-timpani]

I will often put items that need a minimum size inside a scroll container which can be set...

This is a bit simplistic, but I have several apps that do not load data until it is requested.

...
projectSelector := widget.NewSelectEntry(nil)
projectLoad := widget.NewButton("Load", func() {projectSelector.SetOptions(getProjects()))
projEntryScroll := container.NewScroll(projectSelector)
projEntryScroll.SetMinSize(fyne.NewSize(300, 20))
selectorRow := container.NewCenter(container.NewHBox(projEntryScroll, projectLoad))
...

[andydotxyz]

This can often be a bad idea as you are fighting the layout system. Always think "how should the parent allocate space to the contents" not "how big do I want each widget to be". That is how our API is designed and your app will, as a result, react much better to changes in window/screen size.