I have a simple question - is there a way I can make my rowLayout change its height evenly with the rest of columnLayout items? Or what exactly does it prevent from adjusting its height along with the rectangles?
A simple piece of code:
import QtQuick 2.12
import QtQuick.Window 2.12
import QtQuick.Layouts 1.12
import QtQuick.Controls 2.5
ApplicationWindow {
visible: true
width: 640
height: 480
ColumnLayout {
anchors.fill: parent
anchors.margins: 30
RowLayout {
Layout.alignment: Qt.AlignHCenter
Layout.fillHeight: true
Rectangle {
id: rec1
width: 30; height: 30
Layout.alignment: Qt.AlignVCenter
color: "darkslateblue"
}
Label {
text: qsTr("Heading 1")
font.pixelSize: 25
verticalAlignment: Text.AlignVCenter
}
}
Rectangle {
id: rec2
Layout.fillWidth: true
Layout.fillHeight: true
color: "bisque"
}
Rectangle {
id: rec3
Layout.fillWidth: true
Layout.fillHeight: true
color: "bisque"
}
}
}
Right now I'm getting something like this:
One possible option is to use an Item as a RowLayout container:
import QtQuick 2.12
import QtQuick.Window 2.12
import QtQuick.Layouts 1.12
import QtQuick.Controls 2.5
ApplicationWindow {
visible: true
width: 640
height: 480
ColumnLayout {
anchors.fill: parent
anchors.margins: 30
Item{
Layout.fillWidth: true
Layout.fillHeight: true
RowLayout {
Layout.alignment: Qt.AlignHCenter
anchors.fill: parent
Rectangle {
id: rec1
width: 30; height: 30
Layout.alignment: Qt.AlignVCenter
color: "darkslateblue"
}
Label {
text: qsTr("Heading 1")
font.pixelSize: 25
verticalAlignment: Text.AlignVCenter
}
}
}
Rectangle {
id: rec2
Layout.fillWidth: true
Layout.fillHeight: true
color: "bisque"
}
Rectangle {
id: rec3
Layout.fillWidth: true
Layout.fillHeight: true
color: "bisque"
}
}
}
Related
I have the following problem. I created a Periodic table in QML that consists of GroupBoxes that contain a ColumnLayout in order to arrange the specific properties of each element. But as you can see in the pictures...
Window after starting
Window after downsizing
... the properties will not scale properly according to the size of the GroupBox. So when I scale down the size of the window, some text properties will just move out of its GroupBox and lay wherever they are not supposed to be. How can I fix this?
//PeriodicTable.qml
import QtQuick 2.15
import QtQuick.Window 2.15
import QtQuick.Controls 2.15
import QtQuick.Controls.Material 2.15
import QtQuick.Layouts 1.15
Item {
id: root
Button {
id: button
checkable: true
text: qsTr("Show")
onClicked: window.show()
}
Window {
id: window
Material.accent: parent.Material.accent
Material.background: parent.Material.background
Material.foreground: parent.Material.foreground
Material.primary: parent.Material.primary
Material.theme: parent.Material.theme
color: Material.background
height: parent.height
title: qsTr("Periodic table")
width: parent.width
GridView {
id: gridview
anchors.fill: parent
cellHeight: cellWidth * 1.5
cellWidth: parent.width / 18
delegate: PeriodicTableDelegate {
}
model: PeriodicTableModel {
}
}
}
}
//PeriodicTableModel.qml
import QtQuick 2.15
import QtQuick.Controls 2.15
ListModel {
id: elements
ListElement {
atomicWeight: "1.00794"
electronConfiguration: qsTr("1s")
elementName: qsTr("Hydrogen")
elementSign: qsTr("H")
ionizationEnergy: qsTr("13 5984")
ordinalNumber: qsTr("1")
unknownNumber: qsTr("S1/2")
}
} // I shortened this to just one element because yet it is the only one I have
// PeriodicTableDelegate.qml
import QtQuick 2.15
import QtQuick.Controls 2.15
import QtQuick.Layouts 1.15
GroupBox {
property int cellHeight: GridView.view.cellHeight
property int cellWidth: GridView.view.cellWidth
height: cellHeight
width: cellWidth
ColumnLayout {
RowLayout {
Label {
Layout.alignment: Qt.AlignLeft
Layout.fillWidth: true
font.bold: true
text: ordinalNumber
}
Label {
Layout.alignment: Qt.AlignRight
text: unknownNumber
}
}
Label {
Layout.alignment: Qt.AlignHCenter
font.bold: true
text: elementSign
}
Label {
Layout.alignment: Qt.AlignHCenter
text: elementName
}
Label {
Layout.alignment: Qt.AlignHCenter
text: atomicWeight
}
Label {
Layout.alignment: Qt.AlignHCenter
text: electronConfiguration
}
Label {
Layout.alignment: Qt.AlignHCenter
text: ionizationEnergy
}
}
}
a slightly contrived example:
import QtQuick 2.15
import QtQuick.Window 2.15
import QtQuick.Layouts 1.0
Window {
height: 800
width: 600
visible: true
title: qsTr("cell test")
GridView {
id: grid
anchors.fill: parent
cellHeight: grid.height / 3
cellWidth: grid.width / 4
model: 12
delegate: Rectangle {
id: rect
width: grid.cellWidth
height: grid.cellHeight
color: Qt.rgba(Math.random(), Math.random(), Math.random(), 1)
ColumnLayout {
id: layout
anchors.fill: parent
Repeater {
model: 5
Text {
id: txt
property int fsize: (layout.height + layout.width) / 30
Layout.fillWidth: true
text: "some text"
horizontalAlignment:Text.AlignHCenter
font.pointSize: fsize > 0 ? fsize : 16
}
}
}
}
}
}
The ColumnLayout in your GroupBox is missing an anchors.fill: parent.
Qt: 5.11.1
OS: Windows 10 64bit
This is Qt Quick application. when the window is in full screen mode. The layout becomes strange. I think it's an afterimage of the previous size.
startup
full screen
import QtQuick 2.9
import QtQuick.Window 2.2
import QtQuick.Layouts 1.3
Window {
visible: true
width: 640
height: 480
title: qsTr("Hello World")
ColumnLayout{
spacing: 2
anchors.fill: parent
Rectangle {
Layout.alignment: Qt.AlignCenter
color: "red"
Layout.preferredWidth: 40
Layout.preferredHeight: 40
}
Rectangle {
Layout.alignment: Qt.AlignRight
color: "green"
Layout.preferredWidth: 40
Layout.preferredHeight: 70
}
Rectangle {
Layout.alignment: Qt.AlignBottom
Layout.fillHeight: true
color: "blue"
Layout.preferredWidth: 70
Layout.preferredHeight: 40
}
Rectangle {
Layout.alignment: Qt.AlignBottom
Layout.fillHeight: true
color: "orange"
Layout.preferredWidth: 70
Layout.preferredHeight: 40
}
}
}
Not an answer, but a simplification of the problem
import QtQuick 2.11
import QtQuick.Window 2.11
Window {
visible: true
width: 640
height: 480
// Works with any Item
Rectangle {
anchors.centerIn: parent
color: "red"
width: 40
height: 40
}
}
How to reproduce
On Windows 10, click on the window's maximize button
Previous frame is not cleared
Could be related to https://bugreports.qt.io/browse/QTBUG-54451
New bug created https://bugreports.qt.io/browse/QTBUG-70570
When I execute my QML code, the output is:
When I minimize the window, It becomes like
and finally, when I again maximize the window it changes to
the GUI which I want to make looks like
![][5]
I am not getting what is the issue for all of the changes in GUI at different events. And this is the Qml code which I wrote
import QtQuick 2.9
import QtQuick.Window 2.2
import QtQuick.Layouts 1.3
Window {
visible: true
width: 1080
height: 720
title: qsTr("Login")
GridLayout{
Rectangle{
id:one
Rectangle
{ id:two
color:"black";
width: 700
height:40
}
Image {
id: image
x: 470
y: 0
width: 54
height: 42
source: "qrc:/user.png"
}
Rectangle
{
id:three;
color:"#f47a42";
width: 200
height:40
anchors.left:two.right;
anchors.margins:940
Text {
id: user
text: qsTr("4200")
color:"white"
anchors.top: value.bottom
}
Text
{
id: value;
text: qsTr("User");
color:"yellow"
}}
}
}
Rectangle{
ColumnLayout{
width: 50
height: childrenRect.height+fillHeight;
}
color:"green"
}
}
So why this is happening and how can I solve this problem?
Output of the code below
Here is example of scalable window:
import QtQuick 2.11
import QtQuick.Window 2.11
import QtQuick.Layouts 1.11
Window {
visible: true
width: 800
height: 600
title: qsTr("Layout example")
ColumnLayout{
spacing: 0
anchors.fill: parent
Item {
id: titlebar
Layout.preferredHeight: 40
Layout.fillWidth: true
RowLayout {
anchors.fill: parent
spacing: 0
Rectangle {
Layout.fillWidth: true
Layout.fillHeight: true
color: "orange"
Text {
anchors.centerIn: parent
text: "Title"
}
}
Rectangle {
Layout.preferredWidth: 100
Layout.fillHeight: true
color: "lightgreen"
Text {
anchors.centerIn: parent
text: "Actions"
}
}
}
}
Rectangle {
id: content
Layout.fillHeight: true
Layout.fillWidth: true
color: "lightyellow"
Text {
anchors.centerIn: parent
text: "Content"
}
}
}
}
I have following QML Tumbler:
import QtQuick 2.0
import QtMultimedia 5.5
import QtQuick.Controls 1.3
import QtQuick.Extras 1.4
import QtQuick.Layouts 1.2
import QtQuick.Window 2.2
import QtTest 1.1
import "../items"
Rectangle
{
id: ueNumericTumbler
color: "grey"
ColumnLayout
{
id: ueMainLayout
anchors.rightMargin: parent.radius
anchors.leftMargin: parent.radius
anchors.bottomMargin: parent.radius
anchors.topMargin: parent.radius
anchors.centerIn: parent
antialiasing: true
spacing: 4
anchors.fill: parent
layoutDirection: Qt.LeftToRight
Tumbler
{
id: ueLoginKeypadTumbler
antialiasing: true
Layout.alignment: Qt.AlignHCenter
Layout.fillWidth: true
Layout.fillHeight: false
Layout.minimumWidth: parent.width
Layout.minimumHeight: parent.height*70/100
Layout.preferredWidth: parent.width
Layout.preferredHeight: parent.height*70/100
Layout.maximumWidth: parent.width
Layout.maximumHeight: parent.height*70/100
activeFocusOnTab: false
UeNumericTumblerColumn
{
id: ueTumblerColumnDigit1000
ueWidth: ueNumericTumbler.Layout.preferredWidth/ueLoginKeypadTumbler.columnCount
} // UeNumericTumblerColumn
UeNumericTumblerColumn
{
id: ueTumblerColumnDigit100
ueWidth: ueNumericTumbler.Layout.preferredWidth/ueLoginKeypadTumbler.columnCount
} // UeNumericTumblerColumn
UeNumericTumblerColumn
{
id: ueTumblerColumnDigit10
ueWidth: ueNumericTumbler.Layout.preferredWidth/ueLoginKeypadTumbler.columnCount
} // UeNumericTumblerColumn
UeNumericTumblerColumn
{
id: ueTumblerColumnDigit1
ueWidth: ueNumericTumbler.Layout.preferredWidth/ueLoginKeypadTumbler.columnCount
} // UeNumericTumblerColumn
} // Tumbler
} // ColumnLayout
} // Rectangle
Now, as you can see in screenshot, Tumbler Columns width is greater than parent's, ColumnLayout geometry, which is wrong. What did I miss? I've taken into acount ueNumericTumbler's ColumnLayout but the problem persits, I do not know what to do! Should I use anchors?
Or is it maybe problem in ueNumericTumbler's parent contaniner rectangle/window, named ueKeypad:
import QtQuick 2.0
import QtMultimedia 5.5
import QtQuick.Controls 1.3
import QtQuick.Extras 1.4
import QtQuick.Layouts 1.2
import QtQuick.Window 2.2
import QtTest 1.1
import "../delegates"
import "../items"
Rectangle
{
id: ueKeypad
width: 512
height: 384
color: "grey"
radius: 8
border.color: "steelblue"
border.width: 4
ColumnLayout
{
id: ueMainLayout
anchors.rightMargin: parent.radius
anchors.leftMargin: parent.radius
anchors.bottomMargin: parent.radius
anchors.topMargin: parent.radius
anchors.centerIn: parent
antialiasing: true
spacing: 4
anchors.fill: parent
layoutDirection: Qt.LeftToRight
UeNumericTumbler
{
id: ueLoginKeypadTumbler
Layout.alignment: Qt.AlignHCenter
Layout.fillWidth: true
Layout.fillHeight: false
Layout.minimumWidth: parent.width
Layout.minimumHeight: parent.height*70/100
Layout.preferredWidth: parent.width
Layout.preferredHeight: parent.height*70/100
Layout.maximumWidth: parent.width
Layout.maximumHeight: parent.height*70/100
} // UeNumericTumbler
} // ColumnLayout
states:
[
State
{
name: "ueStateLoginOk"
PropertyChanges
{
target: ueKeypad
border.color: "#00ff00"
}
},
State
{
name: "ueStateLoginOkFailed"
PropertyChanges
{
target: ueKeypad
border.color: "#ff0000"
}
}
]
}
You're using the Layout attached property on the wrong object; Layout.preferredWidth was only set on the Tumbler, not the TumblerColumn. You can debug this by adding a print() line before the return statement of the expression:
TumblerColumn
{
model: [0, 1, 2, 3, 4, 5, 6, 7, 8, 9]
width: {
print(Layout.preferredWidth)
Layout.preferredWidth/4
}
}
This prints -1, which is the default value. You can set the width to this instead:
ueLoginKeypadTumbler.Layout.preferredWidth / 4
You'll need to account for the width of the separators though... ugh. This is not very nice. Please open a bug report that mentions that this use case should be easier.
import QtQuick 2.2
import QtQuick.Window 2.1
import QtQuick.Controls 1.1
ApplicationWindow {
flags: Qt.FramelessWindowHint
width: 500
height: 500
x: (Screen.width - width) / 2
y: (Screen.height - height) / 2
color: "black"
opacity: 0.8
Flickable {
anchors.fill: parent
contentWidth: html.paintedWidth
contentHeight: html.paintedHeight
boundsBehavior: Flickable.StopAtBounds
TextEdit {
id: html
objectName: "html"
anchors.fill: parent
textFormat: TextEdit.RichText
focus: true
Keys.onEscapePressed: Qt.quit()
font.family: "Droid Sans Mono"
font.pointSize: 11
selectByMouse: true
readOnly: true
MouseArea {
anchors.fill: parent
propagateComposedEvents: true
onClicked: {
console.log("clicked")
mouse.accepted = false
}
}
}
}
}
I'm unable to get "clicked" printed... it seems like propagateComposedEvents and mouse.accepted are just not working as expected.
I'm using Qt 5.3 Beta.
contentWidth/Height is wrong,
import QtQuick 2.2
import QtQuick.Window 2.1
import QtQuick.Controls 1.1
ApplicationWindow {
flags: Qt.FramelessWindowHint
width: 500
height: 500
x: (Screen.width - width) / 2
y: (Screen.height - height) / 2
//color: "black"
opacity: 0.8
visible: true
Flickable {
anchors.fill: parent
//contentWidth: html.paintedWidth
//contentHeight: html.paintedHeight
boundsBehavior: Flickable.StopAtBounds
TextEdit {
id: html
objectName: "html"
anchors.fill: parent
textFormat: TextEdit.RichText
focus: true
Keys.onEscapePressed: Qt.quit()
font.family: "Droid Sans Mono"
font.pointSize: 11
selectByMouse: true
readOnly: true
text: "hello world"
MouseArea {
anchors.fill: parent
propagateComposedEvents: true
onClicked: {
console.log("clicked")
mouse.accepted = false
}
}
}
}
}