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. Default ColumnLayout Behavior
Forum Updated to NodeBB v4.3 + New Features

Default ColumnLayout Behavior

Scheduled Pinned Locked Moved Unsolved QML and Qt Quick
4 Posts 2 Posters 413 Views 1 Watching
  • 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.
  • bockscaracerB Offline
    bockscaracerB Offline
    bockscaracer
    wrote on last edited by
    #1

    I am trying to build an extremely basic prototype application with a tab-based layout using 2 static tabs; nothing programmatic. I've been trying to follow the QML examples but they are not very useful at all since the content fills the parent which covers the tabs in each of the examples I've seen.

    I've concluded that I need a traditional Column Layout but the default behavior of the ColumnLayout type is completely baffling to me.

    This is my prototype code:

    ApplicationWindow {
        title: qsTr("Hello World")
        width: 640
        height: 480
        ColumnLayout {
            TabBar {
                id: bar
                TabButton {
                    text: qsTr("Tab01")
                }
                TabButton {
                    text: qsTr("Tab02")
                }
            }
            Button {
                text: qsTr("Hello World")
            }
        }
    }
    

    One would expect the ColumnLayout to automatically fill the parent window but instead, it defaults some some strange default height & width which leaves my tabs and my buttons confined to a small space at the top left of the window.

    My first question is - why on earth is this the default behavior of a column layout? And second is, why do I coax the layout into filling the window as one would expect?

    1 Reply Last reply
    0
    • sierdzioS Offline
      sierdzioS Offline
      sierdzio
      Moderators
      wrote on last edited by
      #2

      The top-level layout it "just" an item. You have to tell it where it should position itself and how much space it can occupy. Then the contents of the layout will automatically adapt.

      So you should specify anchors or at the very least the width and height for your top-level layout.

      Then, for lower levels, you can choose whether a control should try to fill the width or height with attached properties: Layout.fillWidth and Layout.fillHeight.

      (Z(:^

      bockscaracerB 1 Reply Last reply
      0
      • sierdzioS sierdzio

        The top-level layout it "just" an item. You have to tell it where it should position itself and how much space it can occupy. Then the contents of the layout will automatically adapt.

        So you should specify anchors or at the very least the width and height for your top-level layout.

        Then, for lower levels, you can choose whether a control should try to fill the width or height with attached properties: Layout.fillWidth and Layout.fillHeight.

        bockscaracerB Offline
        bockscaracerB Offline
        bockscaracer
        wrote on last edited by
        #3

        @sierdzio said in Default ColumnLayout Behavior:

        Then the contents of the layout will automatically adapt.

        They don't though - that is the problem.

        Take the TabBar example. For my use case, I removed the 3rd tab but it is functionally the same:

        Item {
            width: 800
            height: 600
            TabBar {
                id: bar
                width: parent.width
                TabButton {
                    text: qsTr("Home")
                }
                TabButton {
                    text: qsTr("Discover")
                }
            }
        
            StackLayout {
                width: parent.width
                currentIndex: bar.currentIndex
                Item {
                    id: homeTab
                }
                Item {
                    id: discoverTab
                }
            }
        }
        

        One would think that each item in the StackLayout is the contents of each tab but in this example, StackLayout is sitting on top of the TabBar.

        I don't know if the documentation is simply bad or broken but it doesn't explain at all how to set up the tab layout at all, besides just creating the tabs themselves.

        For example this:

        Item {
            width: 800
            height: 600
            TabBar {
                id: bar
                width: parent.width
                TabButton {
                    text: qsTr("Home")
                }
            }
        
            StackLayout {
                width: parent.width
                currentIndex: bar.currentIndex
                Item {
                    id: homeTab
                    Button {
                        text: 'hello world'
                    }
                }
            }
        }
        

        Results in the button being literally inside the tab bar; nothing is below it. This is why I thought Layouts instead of Anchors were needed in the first place.

        1 Reply Last reply
        0
        • sierdzioS Offline
          sierdzioS Offline
          sierdzio
          Moderators
          wrote on last edited by
          #4

          @bockscaracer said in Default ColumnLayout Behavior:

          Item {
          TabBar {}
          StackLayout {

          You have put both TabBar and StackLayout inside an item, without anchoring. By default, all items are positioned at (0, 0) point (top left). If you want things to be positioned by a layout, then use a layout :D

          ColumnLayout {
            TabBar{}
            StackLayout{}
          }
          

          (Z(:^

          1 Reply Last reply
          1

          • Login

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