1

I want to do like this:

enter image description here

Required properties:

  • There are columns forming straight lines from window's top edge, to window's bottom edge.
  • However, there are no rows, as each widget in a column is allowed to be packed without being constrained to fit in a grid.
  • Yet, if you resize the window, the widgets will flow around normally like a FlowBox layout.

My question: How to achieve a layout like the image above?


My attempt so far

I tried to use a FlowBox, but it gave me the following:

enter image description here

Note that it satisfies the properties above (widgets dynamically flowing into other columns as window gets resized), except for violating one key property:

  • It forms also a row line. This pointlessly wastes pixels. My requirement states that placed widgets must not be constrained to form row lines. I.e. columns must be packed independent of other columns.

This is the code for generating my failing grid-like attempt:

#!/usr/bin/python3

import gi
gi.require_version("Gtk", "4.0")
from gi.repository import Gtk, Pango

import random
random.seed(0)

# window class
class MyWindow(Gtk.ApplicationWindow):
    def __init__(self, app):
        super().__init__(application=app)

        flowbox = Gtk.FlowBox(
            orientation    = Gtk.Orientation.HORIZONTAL,
            selection_mode = Gtk.SelectionMode.SINGLE,
            homogeneous    = False
        )
        self.set_child(flowbox)

        for i in range(0, 50):
            lbl = Gtk.Label(
                label=f'{i}. ' + 'some words asdfsd'*random.randint(0,5),
                max_width_chars = 20,
                width_chars     = 20,
                wrap            = True,
                wrap_mode       = Pango.WrapMode.CHAR,
                justify         = Gtk.Justification.LEFT
            )
            flowbox.append(lbl)
        self.present()

    def on_key_press(self, keyval, keycode, state, user_data):
        if keycode == ord('q'):
            self.close()

# run the application
if __name__ == '__main__':
    app = Gtk.Application(application_id='com.lol.rofl.lmfao')
    app.connect('activate', MyWindow)
    app.run()
caveman
  • 422
  • 3
  • 17
  • You have `orientation = Gtk.Orientation.HORIZONTAL`, and the numbers flow left-to-right. I would think that switching to vertical might do it? – SiHa Jun 30 '22 at 11:25
  • @SiHa - Won't. Remains the same grid. In fact it was `.VERTICAL` initial s that is what I am looking for, but I changed it to .`HORIZONTAL` during testing. – caveman Jun 30 '22 at 19:27

0 Answers0