Expand Vbox content to window

[metal3d]

Hello,

Like in the #479 issue, I've got a little problem to expand a Label to the container.

package main

import (
	"io/ioutil"

	"fyne.io/fyne/app"
	"fyne.io/fyne/widget"
)

func main() {
	app := app.New()

	w := app.NewWindow("Hello")

	b := widget.NewButton("Quit", func() {
		app.Quit()
	})
	b.Disable()

	content, _ := ioutil.ReadFile("LICENSE")
	text := widget.NewLabel(string(content))

	scrollable := widget.NewVScrollContainer(text)

	pb := widget.NewProgressBar()

	cb := widget.NewCheck("Ok ?", func(checked bool) {
		if checked {
			b.Enable()
		} else {
			b.Disable()
		}
	})

	vb := widget.NewVBox(
		widget.NewLabel("Hello Fyne!"),
		pb,
		scrollable,
		cb,
		b,
	)
	w.SetContent(vb)
	w.ShowAndRun()
}

When I resize the window, I can see this:

The scrollable widget is not expanding...

Is this a normal behaviour ? How to make a widget to expand its size ?

BTW: thanks a lot for Fyne !

[andydotxyz]

This is a common question, but VBox and HBox collapse their content to minsize with an equal width (or height for vbox).
To expand content you need a different layout - normally the answer is something like:

fyne.NewContainerWithLayout(layout.NewBorderLayout(header, footer, nil, nil), header, footer, scrollContent)

Here you see a BorderLayout is set up with some header at the top, footer at the bottom and the scrollContent, which is not in a border position, fills the central space. (the nil, nil is left and right).

[metal3d]

OK, right. I searched in documentation and here in issues, sorry to not have found the solution.

It works, thanks a lot @andydotxyz

header := widget.NewVBox(widget.NewLabel("Hello Fyne!"), pb)
footer := widget.NewVBox(cb, b)
c := fyne.NewContainerWithLayout(layout.NewBorderLayout(header, footer, nil, nil), header, footer, scrollable)
w.SetContent(c)

I was searching on the Layout side, but not found the logic to make this. Now I understand :)

It could be nice to have that kind of examples in website or documentation (if it's a common question).

BTW: Very impressed by the work done to make a real cross platform, embed and easy UI toolkit. Congrats to the team.

[andydotxyz]

Glad that works. It had occurred to me that we could make something like https://developer.fyne.io/started/widgets but for layouts?

Thanks for your comments, I hope you continue to enjoy the project.

[metal3d]

Yes a page to visualize the available layouts and how they display can help. Actually, what baffled me is that I often worked with GTK, and that the logic is to define to a widget that it is able to expand - with Fyne, it's very different to use "layouts".

But it’s actually quite clear to use, maybe a little more complicated but nothing insurmountable.

I've now some trouble changing some widget display (changing a label background-color for example) but I'm reading documentation to make some tests.

To be very clear, the only thing missing from the documentation, in my opinion, are very simple examples of very concrete cases:

• stretching of the elements (but I have my answer now;))
• color change of a widget (e.g. I want a certain label to have a black background)
• add a menu
• save a preference with a value named "foo"

But I should point out that my remarks are not there to criticize the quality of the work provided. Fyne is impressive in simplicity and covers 99% of general needs. I am personally impressed by the work done.

[andydotxyz]

Thanks for your feedback. I recently added the layouts documentation, I hope this helps: https://developer.fyne.io/started/layouts

It is indeed different to GTK and other toolkits which can be confusing - we are taking a fresh approach here which can mean re-learning for GUI developers - the aim is for the simplest API possible and this seemed like the right way.

For widget colour changes you may be less happy - the standard widgets follow the loaded theme, so to change colours you need to specify a custom theme (which will get easier in 2.0). To make specific colour choices per-item you will need to work with the canvas API as the widget package does not support this (for consistency and UX).

To add a menu use Window.SetMainMenu() (we need an example of this outside fyne_demo).

Preferences are accessed through fyne.CurrentApp().Preferences() - you can see a demo in my Twitch stream last week https://www.twitch.tv/videos/660268302

[metal3d]

The documentation page is awesome. Thanks a lot.

For color, actually, I only needed to change a label bg to simulate a TTY output - I'm working on a système that can install PWA on any distribution, and the installer is built with Fyne (to make it executable by double-click, without any dependencies :) )

At install time, I wanted to give the script output in another way. But that's not a blocking point.

I will use Fyne for other projects - and if one day I've got some time, I will check if I can help ;)

Thanks for all your answers