[Development] [Qt-Quick] GridStar layout for QML

Mark Gaiser markg85 at gmail.com
Sun May 28 15:57:20 CEST 2017


On Sun, May 28, 2017 at 5:00 AM, Casey Sanchez <nabbz0rz at gmail.com> wrote:

> I've created a grid layout that I find to be more functional than the
> default that is provided.
>
> For full documentation please see:
> https://forum.qt.io/topic/64699/gridstar-layout
>
> The Git Repo can be found here:
> https://github.com/Tannz0rz/GridStarLayout/tree/master/Quick
>
>
> Any suggestions are appreciated. Thank you for your consideration.
>
> _______________________________________________
> Development mailing list
> Development at qt-project.org
> http://lists.qt-project.org/mailman/listinfo/development
>
>
Hi,

That looks neat!
Just a couple of questions (without reading the code or playing with it)

1. Does it allow dynamic row/comumn add/removal? A usecase for that would
be a column based file browser where opening a folder would create a new
column.
2. Are states and transitions supported? So when a cell changes in size,
can that change be animated (obviously provided the transition effect is
defined in qml, it isn't be default)?
3. "GridStar.rowSpan: 0 // Span remaining rows" doesn't look intuitive to
me. Something like "auto" or "fill" would perhaps be more fitting?

I've been playing with an improved Grid concept as well. In my case it is
inspired by the CSS Grid Layout [1]. I would define the layout in ASCII. A
simple example would be something like this:

ApplicationWindow {
  width: 800
  height: 600

  GridLayout {
    anchors.fill: parent
    layout: [ "header",
                  "col content",
                  "footer" ]

    Rectangle {
      id: header
      height: 100
    }

    Rectangle {
      id: col
      width: 50
    }

    Rectangle {
      id: content
    }

    Rectangle {
      id: footer
      height: 25
    }
  }
}

Not defining sizes (width/height) would distribute all available space
evenly.
The "content" element in this example therefore has no width/height. It
simply takes all remaining space.

This concept worked quite well and i had some working code (the example
above actually worked!).
It quickly became rather complicated when cell spacing would be included,
animations and dynamic additions/removal of cells and layout
re-calculations. That's where i left it i think.


[1] https://www.w3.org/TR/css-grid-1/
-------------- next part --------------
An HTML attachment was scrubbed...
URL: <http://lists.qt-project.org/pipermail/development/attachments/20170528/20a17be2/attachment.html>


More information about the Development mailing list