Skip to content
  • Categories
  • Recent
  • Tags
  • Popular
  • Users
  • Groups
  • Search
  • Get Qt Extensions
  • Unsolved
Collapse
Brand Logo
  1. Home
  2. Qt Development
  3. QML and Qt Quick
  4. GridLayout in a ScrollView adjust to width change
QtWS25 Last Chance

GridLayout in a ScrollView adjust to width change

Scheduled Pinned Locked Moved Unsolved QML and Qt Quick
2 Posts 1 Posters 176 Views
  • Oldest to Newest
  • Newest to Oldest
  • Most Votes
Reply
  • Reply as topic
Log in to reply
This topic has been deleted. Only users with topic management privileges can see it.
  • O Offline
    O Offline
    oranm
    wrote on last edited by
    #1

    Hello everyone,
    We are working on a Qt for WebAssembly application.
    The main component is a GridLayout with 2 columns and we also want to make it work on a mobile screen.
    So based on the width we make the grid with 2 rows and a single column.

    Unfortunately when viewing it on mobile the Flickable id: flick (which is inside ColumnLayout { id: left is not showing at all at the bottom in some cases and sometimes only shows a small part of the Flickable .

    Below there is what I mean about showing small part of the Flickable (marked with red).
    Screenshot 2024-05-19 210236.png

    I want to make it stretch down and fill the remaining height at the bottom of it as much as possible.

    The code snippet is here: Link to snippet
    Any help with how to achieve this will be much appreciated :)

    1 Reply Last reply
    0
    • O Offline
      O Offline
      oranm
      wrote on last edited by
      #2

      I think I came up with something that seems to work but not sure if this is a good way to do this (I also changed from ScrollView to Flickable because I saw online that it is better suited for touch devices.)

      Flickable {
      
              id: scroller
              anchors.fill: parent
              contentHeight: main.height
              contentWidth: main.width
              GridLayout {
                  id: main
                  height: scroller.width > 600 ? scroller.height : children.length * 800
                  width: scroller.width
      
                  columns: 2
      
                  states: [
                      State {
                          when: root.width <= 600
                          PropertyChanges {target: left; Layout.row: 1}
                          PropertyChanges {target: right; Layout.row: 0}
                      },
                      State {
                          when: root.width > 600
                          PropertyChanges {target: left; Layout.column: 0}
                          PropertyChanges {target: right; Layout.column: 1}
                      }
                  ]
      

      Basically I set the GridLayout's height to the height of the scroller or to a very high height (800 * children.length) if the width gets narrower (<= 600 in this case).

      Is there a better way to do it or is it "good enough"?

      1 Reply Last reply
      0

      • Login

      • Login or register to search.
      • First post
        Last post
      0
      • Categories
      • Recent
      • Tags
      • Popular
      • Users
      • Groups
      • Search
      • Get Qt Extensions
      • Unsolved