QT QML 网格布局绝望

huangapple go评论80阅读模式
英文:

QT QML Gridlayout desperation

问题

我需要一个相当简单的QML布局。

我已经花了一些时间尝试GridLayout,我实际上认为它适用于这个要求 - 但它不起作用。

应该是这样的

QT QML 网格布局绝望

而现在是这样的 - 右边的矩形(黄色)完全丢失了。

QT QML 网格布局绝望

这是我的当前代码

ApplicationWindow {
    property real _encoderWidth: 254
    property real _headerHeight: 188
    property real _leftSideWidth: 70
    property real _keyboard1Height: 100
    property real _keyboard2Height: 180

    visible: true
    id: root
    objectName: "mainScreen"
    width: 600 + _encoderWidth + _leftSideWidth
    height: 800 + _headerHeight + _keyboard1Height + _keyboard2Height
    minimumHeight: height
    maximumHeight: height
    minimumWidth: width
    maximumWidth: width

    GridLayout {
        id: grid
        anchors.fill: parent
        rows: 4
        columns: 3

        Rectangle {
            id: left
            Layout.column: 0
            Layout.rowSpan: 4
            Layout.fillWidth: true
            Layout.fillHeight: true
            Layout.minimumHeight: root.height
            Layout.maximumHeight: root.height
            Layout.minimumWidth: _leftSideWidth
            Layout.maximumWidth: _leftSideWidth
            color: "blue"
        }
        Rectangle {
            id: top
            Layout.row: 0
            Layout.column: 1
            Layout.fillWidth: true
            Layout.fillHeight: true
            Layout.minimumHeight: _headerHeight
            Layout.maximumHeight: _headerHeight
            Layout.minimumWidth: root.width
            Layout.maximumWidth: root.width
            color: "red"
        }
        Rectangle {
            id: right
            Layout.row: 0
            Layout.column: 2
            Layout.rowSpan: 4
            Layout.fillWidth: true
            Layout.fillHeight: true
            Layout.minimumHeight: root.height
            Layout.maximumHeight: root.height
            Layout.minimumWidth: _encoderWidth
            Layout.maximumWidth: _encoderWidth
            color: "yellow"
        }
        Rectangle {
            id: content
            Layout.row: 1
            Layout.column: 1
            Layout.fillWidth: true
            Layout.fillHeight: true
            Layout.minimumHeight: 800
            Layout.maximumHeight: 800
            Layout.minimumWidth: 600
            Layout.maximumWidth: 600
            color: "green"
        }
        Rectangle {
            id: bottom1
            Layout.row: 2
            Layout.column: 1
            Layout.fillWidth: true
            Layout.fillHeight: true
            Layout.minimumHeight: _keyboard1Height
            Layout.maximumHeight: _keyboard1Height
            Layout.minimumWidth: root.width
            Layout.maximumWidth: root.width
            color: "lightgray"
        }
        Rectangle {
            id: bottom2
            Layout.row: 3
            Layout.column: 1
            Layout.fillWidth: true
            Layout.fillHeight: true
            Layout.minimumHeight: _keyboard2Height
            Layout.maximumHeight: _keyboard2Height
            Layout.minimumWidth: root.width
            Layout.maximumWidth: root.width
            color: "gray"
        }
    }
}

布局不需要是动态的,窗口大小是固定的,不能更改。

欢迎任何改进的提示或建议。

非常感谢和最好的祝愿

Arne

英文:

I need a fairly simple layout in qml.

I have now struggled for some time with the GridLayout, which I had actually classified as correct for this requirement - but it does not work.

This is how it should be

QT QML 网格布局绝望

And this is how it is currently - the right rectangle (yellow) is completely missing.

QT QML 网格布局绝望

This is my current code

ApplicationWindow {
property real _encoderWidth: 254
property real _headerHeight: 188
property real _leftSideWidth: 70
property real _keyboard1Height: 100
property real _keyboard2Height: 180
visible: true
id: root
objectName: "mainScreen" 
width: 600 + _encoderWidth + _leftSideWidth 
height: 800 + _headerHeight + _keyboard1Height + _keyboard2Height 
minimumHeight: height
maximumHeight: height
minimumWidth: width
maximumWidth: width
GridLayout {
id: grid
anchors.fill: parent
rows: 4
columns: 3
Rectangle {
id: left
Layout.column: 0
Layout.rowSpan: 4
Layout.fillWidth: true
Layout.fillHeight: true
Layout.minimumHeight: root.height
Layout.maximumHeight: root.height
Layout.minimumWidth: _leftSideWidth
Layout.maximumWidth: _leftSideWidth
color: "blue"
}
Rectangle {
id: top
Layout.row: 0
Layout.column: 1
Layout.fillWidth: true
Layout.fillHeight: true
Layout.minimumHeight: _headerHeight
Layout.maximumHeight: _headerHeight
Layout.minimumWidth: root.width
Layout.maximumWidth: root.width
color: "red"
}
Rectangle {
id: right
Layout.row: 0
Layout.column: 2
Layout.rowSpan: 4
Layout.fillWidth: true
Layout.fillHeight: true
Layout.minimumHeight: root.height
Layout.maximumHeight: root.height
Layout.minimumWidth: _encoderWidth
Layout.maximumWidth: _encoderWidth
color: "yellow"
}
Rectangle {
id: content
Layout.row: 1
Layout.column: 1
Layout.fillWidth: true
Layout.fillHeight: true
Layout.minimumHeight: 800
Layout.maximumHeight: 800
Layout.minimumWidth: 600
Layout.maximumWidth: 600
color: "green"
}
Rectangle {
id: bottom1
Layout.row: 2
Layout.column: 1
Layout.fillWidth: true
Layout.fillHeight: true
Layout.minimumHeight: _keyboard1Height
Layout.maximumHeight: _keyboard1Height
Layout.minimumWidth: root.width
Layout.maximumWidth: root.width
color: "lightgray"
}
Rectangle {
id: bottom2
Layout.row: 3
Layout.column: 1
Layout.fillWidth: true
Layout.fillHeight: true
Layout.minimumHeight: _keyboard2Height
Layout.maximumHeight: _keyboard2Height
Layout.minimumWidth: root.width
Layout.maximumWidth: root.width
color: "gray"
}
}
}

The layout does not have to be dynamic, the window size is fixed and cannot be changed.

Any tip or suggestion for improvement is welcome.

Many thanks and best regards

Arne

答案1

得分: 1

以下是您窗口中发现的两个奇怪之处:

  • 如果您固定了所有尺寸,为什么要使用布局?
  • 除了“green”(您在那里使用了600),为什么在您的中间列中使用 root.width?可能正是这一点导致了黄色矩形超出了视口。

我不确定这些是否是您正在寻找的比例。

  1. 我在顶部添加了2个变量。
  2. 我保留了布局,尽管尺寸应该是固定的。
  3. 我设置了首选尺寸而不是最小/最大尺寸。请注意,由于您似乎没有考虑矩形之间的间距(rowSpacingcolumnSpacing),确保矩形适应窗口的代价是它们的尺寸会略有不同于您的期望。
  4. 我去掉了左侧和右侧项目的显式设置高度(它们应该填充它们跨越的所有4行)。
  5. 我去掉了中间列中除1个项目之外的所有项目的显式设置宽度(它们都应该填充可用宽度)。

这留下:

ApplicationWindow {
    property real _baseWidth: 600
    property real _baseHeight: 400
    property real _encoderWidth: 254
    property real _headerHeight: 188
    property real _leftSideWidth: 70
    property real _keyboard1Height: 100
    property real _keyboard2Height: 180

    visible: true
    id: root
    objectName: "mainScreen" 
    width: _baseWidth + _encoderWidth + _leftSideWidth 
    height: _baseHeight + _headerHeight + _keyboard1Height + _keyboard2Height 
    minimumHeight: height
    maximumHeight: height
    minimumWidth: width
    maximumWidth: width

    GridLayout {
    id: grid
    anchors.fill: parent
    rows: 4
    columns: 3

        Rectangle {
            id: left
            Layout.row: 0
            Layout.column: 0
            Layout.rowSpan: 4
            Layout.fillWidth: true
            Layout.fillHeight: true
            Layout.preferredWidth: _leftSideWidth
            color: "blue"
        }
        Rectangle {
            id: top
            Layout.row: 0
            Layout.column: 1
            Layout.fillWidth: true
            Layout.fillHeight: true
            Layout.preferredHeight: _headerHeight
            Layout.preferredWidth: _baseWidth
            color: "red"
        }
        Rectangle {
            id: content
            Layout.row: 1
            Layout.column: 1
            Layout.fillWidth: true
            Layout.fillHeight: true
            Layout.preferredHeight: _baseHeight
            color: "green"
        }
        Rectangle {
            id: bottom1
            Layout.row: 2
            Layout.column: 1
            Layout.fillWidth: true
            Layout.fillHeight: true
            Layout.preferredHeight: _keyboard1Height
            color: "lightgray"
        }
        Rectangle {
            id: bottom2
            Layout.row: 3
            Layout.column: 1
            Layout.fillWidth: true
            Layout.fillHeight: true
            Layout.preferredHeight: _keyboard2Height
            color: "gray"
        }
        Rectangle {
            id: right
            Layout.row: 0
            Layout.column: 2
            Layout.rowSpan: 4
            Layout.fillWidth: true
            Layout.fillHeight: true
            Layout.preferredWidth: _encoderWidth
            color: "yellow"
        }
    }
}

如果需要,您可以进一步微调,包括布局的间距。

英文:

2 things I found strange in your window:

  • Why use a layout if you fix all the sizes?
  • Why use root.width for items in your middle column (except for green, you used 600 there)?<br/>It is probably that very point that pushed the yellow rectangle outside the viewport.

I'm not sure these are the proportions you are looking for.

  1. I added 2 variables at the top.
  2. I kept the layout even though sizes are supposed to be fixed.
  3. I set the preferred sizes instead of min/max sizes.<br/>Note that since you do not seem to have taken the space between rectangles into consideration (rowSpacing and columnSpacing), the cost of ensuring rectangles fit in the window is that their sizes are going to be slightly different from what you expect.
  4. I removed the explicitly set height for the left and right item (they are supposed to fill all 4 rows they span across.
  5. I removed the explicitly set width for all but 1 item in the middle column (they are all supposed to fill the available width).

This leaves:

ApplicationWindow {
property real _baseWidth: 600
property real _baseHeight: 400
property real _encoderWidth: 254
property real _headerHeight: 188
property real _leftSideWidth: 70
property real _keyboard1Height: 100
property real _keyboard2Height: 180
visible: true
id: root
objectName: &quot;mainScreen&quot; 
width: _baseWidth + _encoderWidth + _leftSideWidth 
height: _baseHeight + _headerHeight + _keyboard1Height + _keyboard2Height 
minimumHeight: height
maximumHeight: height
minimumWidth: width
maximumWidth: width
GridLayout {
id: grid
anchors.fill: parent
rows: 4
columns: 3
Rectangle {
id: left
Layout.row: 0
Layout.column: 0
Layout.rowSpan: 4
Layout.fillWidth: true
Layout.fillHeight: true
Layout.preferredWidth: _leftSideWidth
color: &quot;blue&quot;
}
Rectangle {
id: top
Layout.row: 0
Layout.column: 1
Layout.fillWidth: true
Layout.fillHeight: true
Layout.preferredHeight: _headerHeight
Layout.preferredWidth: _baseWidth
color: &quot;red&quot;
}
Rectangle {
id: content
Layout.row: 1
Layout.column: 1
Layout.fillWidth: true
Layout.fillHeight: true
Layout.preferredHeight: _baseHeight
color: &quot;green&quot;
}
Rectangle {
id: bottom1
Layout.row: 2
Layout.column: 1
Layout.fillWidth: true
Layout.fillHeight: true
Layout.preferredHeight: _keyboard1Height
color: &quot;lightgray&quot;
}
Rectangle {
id: bottom2
Layout.row: 3
Layout.column: 1
Layout.fillWidth: true
Layout.fillHeight: true
Layout.preferredHeight: _keyboard2Height
color: &quot;gray&quot;
}
Rectangle {
id: right
Layout.row: 0
Layout.column: 2
Layout.rowSpan: 4
Layout.fillWidth: true
Layout.fillHeight: true
Layout.preferredWidth: _encoderWidth
color: &quot;yellow&quot;
}
}
}

I let you fine-tune the thing if needed, such as including the spacing of the layout.

huangapple
  • 本文由 发表于 2023年1月9日 00:54:11
  • 转载请务必保留本文链接:https://go.coder-hub.com/75049668.html
匿名

发表评论

匿名网友

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen:

确定