Setting the width of a widget with percentages

Hello everyone. I’m trying to build a gtk4 client for https://invidio.us.
The problem is, I’m bad at creating layouts with gtk.
I need to create a list of videos, with the thumbnails to the left, at the 30% the size of the entire widget. The widget should be able to scale, keeping the horizontal proportions.

If i were on the web, I would do this:

<div>
  <img style="width: 30%" alt="thumbnail"/>
  <div style="width: 70%">
    <h5>Title</h5>
    <p>200k Views</p>
  </div>
</div>

Can someone help me achieve that layout in gtk4?
I’ve tried using multiple GtkBox, but I don’t know how to set their width in percentage.

I’ve also tried using GtkGrid, setting the column-span to the percentage value and setting column-homogenous to true, but then the container is no longer resizable.

Current state:

.

As you can see I have some problems setting the width of the thumbnails…

No, that’s fundamentally incompatible with how GTK works (regardless of major version). GTK layout flows from the children to the parent: a container’s size is determined by its contents. This means you cannot set the size of a child to be a percentage of its parent, unless you fix the size of the parent container, at which point you can set the size of each child yourself.

One option you can explore with GTK4 is to use a constraint layout, which manages a layout as a set of constraints instead of using nested boxes; the main downside of that is that the more widgets you add to a layout, especially in a dynamically generated list, the less efficient the layout will be, as the set of constraints to be solved increases.

Another option is to write your own layout manager that computes a well-defined size for each child (always measuring the children, to ensure that minimum sizes are respected).

No, that’s fundamentally incompatible with how GTK works. […] GTK layout flows from the children to the parent: a container’s size is determined by its contents. […]
One option you can explore with GTK4 is to use a constraint layout

I’m a bit confused.

Using a GTK constraint layout means the layout is set from the parent, right?
So, by default, the layout manager of GtkBox can’t help me build the layout I want, but GtkConstraintLayout can.

Another option is to write your own layout manager

That means I can create a FlexBox layout manager and build the layout I want, like on the web?

Is there a specific reason why there isn’t a flexbox layout manager included in GTK, but there’s a ConstraintLayout?

Yes, but constraint-based layouts are solved iteratively as a system of linear equations, which means it’s possible to describe a whole row in terms of ratios, e.g.

H:|-12-[image]-12-[text(image * 2)]-12-|

will make sure that the width of the text child will always be twice the size of the size of the image.

No, it means you can create a layout policy that says “the image is allocated max(image.min_width, allocation.width) of the space reserved by its parent”. For instance:

  • inside the measure() virtual function of your row (or the layout manager used by the row widget) you measure the size of the image and the size of the label, and return a minimum size of image.min_width + label.min_width
  • you set the hexpand property of the row to TRUE, and the halign property to FILL, so the row is made to expand and fill the area of the parent
  • when allocating the row (or the layout manager used by the row), you take the allocated width and split it 1/3 - 2/3

I tried with the ConstraintLayout but I can’t get it to work properly.
I have kept two main GtkBoxes, “image” and “text”.
When the window shrinks, the text should wrap and the height get bigger to accommodate the text . I can’t get this to work. I can get only the width or the height to resize properly. Not both.

And resizing the window becomes really slow in any case.

I’ve spent waaaay too much time on this. I give up for today. Tomorrow I’ll try writing a custom layout manager.

I’d like to point out that you’re literally fighting the toolkit, here. GTK is not a web rendering engine, and it does not work like an HTML page. The overall idea is that the image has a fixed ratio or size, and the text occupies the remaining space—mostly because images should likely have the same size/aspect ratio regardless of the size of the container, and the important bit is the text, which can have different sizes or different content depending on locale.

Ok, thank you. I guess I’ll just set the thumbnails at a fixed size for now. It won’t work great on narrow screens (smartphones), but that’s not a priority anyway.

If you want to have a responsive layout, I strongly encourage you to look at libadwaita, which is the successor to libhandy for GTK4.

This topic was automatically closed 14 days after the last reply. New replies are no longer allowed.