ColumnLayout: setting height of child

mzimmers

Hi all -

I've got an app that looks something like this:

ApplicationWindow {
    width: 800
    height: 480

    Rectangle {
        anchors.fill: parent

        ColumnLayout {
            width: parent.width
            Navbar { Layout.minimumHeight: 48 }
            Rectangle { height: 48 }
            Mainarea {
                Layout.fillHeight: true // how to set height here?
            }
        }
    }
}

(The first rectangle is so I can give a background color to the entire window.)

I want my Mainarea to take up all the vertical space not used by the first two items in the ColumnLayout. Is this value already derived for me somewhere, or do I need to calculate it manually?

Thanks...

JoeCFD

set id to ApplicationWIndow
id: mainWindow
Mainarea {
height: mainWindow.availableHeight
}

mzimmers

@JoeCFD I've reduced this to a self-contained example:

ApplicationWindow {
    id: mainWindow
    width: 800
    height: 480

	ColumnLayout {
		Item { Layout.minimumHeight: 48 }
		Rectangle { height: 48 }
		Rectangle {
			height: mainWindow.availableHeight
			Text {
				text: height.toString()
			}
		}
	}
}

The text denoting the available height is "16."

JoeCFD

your layout does not fill the mainWindow

mzimmers

@JoeCFD I've tried:

ApplicationWindow {
    id: mainWindow
    visible: true
    width: 800
    height: 480

    ColumnLayout {
        Layout.fillHeight: true
        Layout.fillWidth: true
        Item { Layout.minimumHeight: 48 }
        Rectangle { height: 48 }
        Rectangle {
            id: rect
            height: mainWindow.availableHeight
            width: mainWindow.availableWidth
            Text {
                text: rect.height.toString() + " " + rect.width.toString()
            }
        }
    }
}

I get a "0 0" with this.

I also tried an "anchors.fill: parent" and with this, I don't see any output at all. I must be using the wrong method to fill. Recommendation?

Thanks...

lemons

@mzimmers

ApplicationWindow {
   id: mainWindow
   visible: true
   width: 800
   height: 480

   ColumnLayout {
       // Layout.fillWidth | Layout.fillHeight is only used if the parent is a layout as well
       // else use anchors
       anchors.fill: parent
       spacing: 0
       Rectangle {
           color: "green"
           Layout.minimumHeight: 48
           Layout.preferredWidth: parent.width / 2
       }
       Rectangle {
           color: "red"
           width: 48
           height: 48
           Layout.alignment: Qt.AlignHCenter
       }
       Rectangle {
           id: rect
           Layout.fillHeight: true
           Layout.fillWidth: true
           color: "blue"
           Text {
               text: rect.height.toString() + " " + rect.width.toString()
           }
       }
   }
}

mzimmers

@lemons thank you -- that seems to have solved it. I'm still learning when and where to use the various positioners. It always seems so clear after someone shows me how to do it right...