我有以下自定义QML Item ，它将代表一个密码输入GUI元素：
import QtQuick 2.0 import QtQuick.Layouts 1.2 import QtQuick.Controls 1.3 import "../items" Item { id: ueKeypad width: 512 height: 512 Rectangle { id: ueKeypadWrapper antialiasing: true anchors.fill: parent ColumnLayout { id: ueKeypadLayoutMain antialiasing: true layoutDirection: Qt.LeftToRight spacing: 8 anchors.fill: parent ColumnLayout { id: ueKeypadTitleLayout layoutDirection: Qt.LeftToRight Layout.fillWidth: true Layout.minimumHeight: 24 Layout.preferredHeight: 24 Layout.maximumHeight: 24 Text { Layout.fillWidth: true Layout.fillHeight: true text: qsTr("PIN ENTRY") clip: true font.bold: true font.pointSize: 24 textFormat: Text.RichText verticalAlignment: Text.AlignVCenter horizontalAlignment: Text.AlignHCenter } // Text } // ColumnLayout GridLayout { id: ueKeypadNumbersLayout Layout.fillWidth: true Layout.fillHeight: true Layout.alignment: Qt.AlignHCenter|Qt.AlignVCenter layoutDirection: Qt.LeftToRight columnSpacing: 8 rowSpacing: 8 flow: GridLayout.LeftToRight columns: 3 UeButton { id: ueKeypadButton1 Layout.minimumHeight: 32 Layout.preferredHeight: 32 Layout.maximumHeight: 32 ueText: qsTr("1") } UeButton { id: ueKeypadButton2 Layout.minimumHeight: 32 Layout.preferredHeight: 32 Layout.maximumHeight: 32 ueText: qsTr("2") } UeButton { id: ueKeypadButton3 Layout.minimumHeight: 32 Layout.preferredHeight: 32 Layout.maximumHeight: 32 ueText: qsTr("3") } UeButton { id: ueKeypadButton4 Layout.minimumHeight: 32 Layout.preferredHeight: 32 Layout.maximumHeight: 32 ueText: qsTr("4") } UeButton { id: ueKeypadButton5 Layout.minimumHeight: 32 Layout.preferredHeight: 32 Layout.maximumHeight: 32 ueText: qsTr("5") } UeButton { id: ueKeypadButton6 Layout.minimumHeight: 32 Layout.preferredHeight: 32 Layout.maximumHeight: 32 ueText: qsTr("6") } UeButton { id: ueKeypadButton7 Layout.minimumHeight: 32 Layout.preferredHeight: 32 Layout.maximumHeight: 32 ueText: qsTr("7") } UeButton { id: ueKeypadButton8 Layout.minimumHeight: 32 Layout.preferredHeight: 32 Layout.maximumHeight: 32 ueText: qsTr("8") } UeButton { id: ueKeypadButton9 Layout.minimumHeight: 32 Layout.preferredHeight: 32 Layout.maximumHeight: 32 ueText: qsTr("9") } } // GridLayout RowLayout { id: ueKeypadActionLayout Layout.fillWidth: true Layout.fillHeight: true Layout.alignment: Qt.AlignHCenter|Qt.AlignVCenter layoutDirection: Qt.LeftToRight spacing: 8 UeButton { id: ueKeypadButtonOk ueText: qsTr("Ok") } // UeButton UeButton { id: ueKeypadButton0 ueText: qsTr("0") Layout.minimumHeight: 32 Layout.preferredHeight: 32 Layout.maximumHeight: 32 } // UeButton UeButton { id: ueKeypadButtonCancel ueText: qsTr("Cancel") } // UeButton } // RowLayout } // ColumnLayout } // Rectangle } // Item它使用名为UeButton自定义QML Button ：
import QtQuick.Controls 1.4 import QtQuick.Controls.Styles 1.4 import QtQuick 2.5 Button { property string ueText id: ueButton text: ueText style: ButtonStyle { background: Rectangle { antialiasing: true smooth: true gradient: Gradient { GradientStop { position: 0 color: "#ffffff" } // GradientStop GradientStop { position: 0.418 color: "#000000" } // GradientStop } // Gradient border.color: "steelblue" border.width: control.activeFocus?2:1 radius: 4 } // background label: Text { color: "#ffffff" font.bold: true verticalAlignment: Text.AlignVCenter horizontalAlignment: Text.AlignHCenter font.pointSize: 16 text: control.text } // label } // ButtonStyle } // ueButton如果我在QtCreator的Designer工具中查看第一个代码，我会遇到以下情况：
为什么Button不会传播到GridLayout ？ 同样适用于较低的RowLayout ，其Item s（ UeButton类型的三个Item ）没有居中并在整个RowLayout对齐？
I have the following custom QML Item, which will represent a pin code entry GUI element:
import QtQuick 2.0 import QtQuick.Layouts 1.2 import QtQuick.Controls 1.3 import "../items" Item { id: ueKeypad width: 512 height: 512 Rectangle { id: ueKeypadWrapper antialiasing: true anchors.fill: parent ColumnLayout { id: ueKeypadLayoutMain antialiasing: true layoutDirection: Qt.LeftToRight spacing: 8 anchors.fill: parent ColumnLayout { id: ueKeypadTitleLayout layoutDirection: Qt.LeftToRight Layout.fillWidth: true Layout.minimumHeight: 24 Layout.preferredHeight: 24 Layout.maximumHeight: 24 Text { Layout.fillWidth: true Layout.fillHeight: true text: qsTr("PIN ENTRY") clip: true font.bold: true font.pointSize: 24 textFormat: Text.RichText verticalAlignment: Text.AlignVCenter horizontalAlignment: Text.AlignHCenter } // Text } // ColumnLayout GridLayout { id: ueKeypadNumbersLayout Layout.fillWidth: true Layout.fillHeight: true Layout.alignment: Qt.AlignHCenter|Qt.AlignVCenter layoutDirection: Qt.LeftToRight columnSpacing: 8 rowSpacing: 8 flow: GridLayout.LeftToRight columns: 3 UeButton { id: ueKeypadButton1 Layout.minimumHeight: 32 Layout.preferredHeight: 32 Layout.maximumHeight: 32 ueText: qsTr("1") } UeButton { id: ueKeypadButton2 Layout.minimumHeight: 32 Layout.preferredHeight: 32 Layout.maximumHeight: 32 ueText: qsTr("2") } UeButton { id: ueKeypadButton3 Layout.minimumHeight: 32 Layout.preferredHeight: 32 Layout.maximumHeight: 32 ueText: qsTr("3") } UeButton { id: ueKeypadButton4 Layout.minimumHeight: 32 Layout.preferredHeight: 32 Layout.maximumHeight: 32 ueText: qsTr("4") } UeButton { id: ueKeypadButton5 Layout.minimumHeight: 32 Layout.preferredHeight: 32 Layout.maximumHeight: 32 ueText: qsTr("5") } UeButton { id: ueKeypadButton6 Layout.minimumHeight: 32 Layout.preferredHeight: 32 Layout.maximumHeight: 32 ueText: qsTr("6") } UeButton { id: ueKeypadButton7 Layout.minimumHeight: 32 Layout.preferredHeight: 32 Layout.maximumHeight: 32 ueText: qsTr("7") } UeButton { id: ueKeypadButton8 Layout.minimumHeight: 32 Layout.preferredHeight: 32 Layout.maximumHeight: 32 ueText: qsTr("8") } UeButton { id: ueKeypadButton9 Layout.minimumHeight: 32 Layout.preferredHeight: 32 Layout.maximumHeight: 32 ueText: qsTr("9") } } // GridLayout RowLayout { id: ueKeypadActionLayout Layout.fillWidth: true Layout.fillHeight: true Layout.alignment: Qt.AlignHCenter|Qt.AlignVCenter layoutDirection: Qt.LeftToRight spacing: 8 UeButton { id: ueKeypadButtonOk ueText: qsTr("Ok") } // UeButton UeButton { id: ueKeypadButton0 ueText: qsTr("0") Layout.minimumHeight: 32 Layout.preferredHeight: 32 Layout.maximumHeight: 32 } // UeButton UeButton { id: ueKeypadButtonCancel ueText: qsTr("Cancel") } // UeButton } // RowLayout } // ColumnLayout } // Rectangle } // ItemIt uses custom QML Button, named UeButton:
import QtQuick.Controls 1.4 import QtQuick.Controls.Styles 1.4 import QtQuick 2.5 Button { property string ueText id: ueButton text: ueText style: ButtonStyle { background: Rectangle { antialiasing: true smooth: true gradient: Gradient { GradientStop { position: 0 color: "#ffffff" } // GradientStop GradientStop { position: 0.418 color: "#000000" } // GradientStop } // Gradient border.color: "steelblue" border.width: control.activeFocus?2:1 radius: 4 } // background label: Text { color: "#ffffff" font.bold: true verticalAlignment: Text.AlignVCenter horizontalAlignment: Text.AlignHCenter font.pointSize: 16 text: control.text } // label } // ButtonStyle } // ueButtonIf I view first code in QtCreator's Designer Tool, I get the following situation:
Why are Buttons not spread across GridLayout? Same goes to lower RowLayout, whose Items (three Items of type UeButton) are not centered and aligned across whole RowLayout?
最满意答案
Layout的附加属性确保包含的Item在给定约束下的大小正确。
可以拉伸Item s以填充可用空间（ fillWidth / fillHeight ），强制在一定值（ minimumWidth / minimumHeight ）下不收缩或不扩大某个其他值（ maximumWidth / maximumHeight ）。 您还可以强制Item占用多个行/列（ rowSpan / columnSpan ）并假设特定大小（ preferredWidth / preferredHeight表示minimum == maximum ）。
优先顺序是：
preferred < minimum / maximum < width / height
向左设置属性会自动丢弃右侧的属性。 您可以轻松理解这背后的原因。 这个方案可能会被implicitWidth/implicitHeight “破坏”，因为任何Item的大小都不能在这些值下缩小。 fill属性确保Item根据上面的约束填充可用空间：如果未定义fill则Item不能根据其约束增长或缩小。
现在，如果您希望Button s维持它们的方面并仍然拉伸网格，则可以使用中间 Item 。 将Layout附加属性应用于外部Item ， Button可以centerIn并且不受影响。
示例代码：
import QtQuick 2.5 import QtQuick.Window 2.2 import QtQuick.Layouts 1.1 import QtQuick.Controls 1.4 Window { width: 200; height: 200; minimumHeight: 100; visible: true GridLayout { anchors.fill: parent rows: 3 columns: 3 Repeater { model: 9 Item { Layout.fillWidth: true Layout.fillHeight: true Button { anchors.centerIn: parent; width: 32; height: 32; text: index + 1 } } } } }相反，如果您希望Button s填充可用空间，只需指定fillWidth / fillHeight 。 由于没有设置其他布局约束（例如minimum* ， maximum* ），因此Button正确占用了所有可用空间。 以下是重新审视的代码。 正如所料， width和height被简单地丢弃：
import QtQuick 2.5 import QtQuick.Window 2.2 import QtQuick.Layouts 1.1 import QtQuick.Controls 1.4 Window { width: 200; height: 200; minimumHeight: 100; visible: true GridLayout { anchors.fill: parent rows: 3 columns: 3 Repeater { model: 9 Button {width: 32; height: 32; text: index + 1; // 32? NOPE! Layout.fillWidth: true; Layout.fillHeight: true } } } }The attached properties of a Layout ensures that the Items contained are correctly sized w.r.t. the given constraints.
Items can be stretched to fill the available space (fillWidth/fillHeight), forced to not shrink under a certain value (minimumWidth/minimumHeight) or not enlarge over a certain other value (maximumWidth/maximumHeight). You can also force an Item to occupy more than one row/column (rowSpan/columnSpan) and to assume a specific size (preferredWidth/preferredHeight which implies minimum == maximum).
The precedence is:
preferred <minimum/maximum < width/height
Setting a property to the left automatically discard any to the right. You can easily understand the reasoning behind this. This scheme can be somewhat "broken" by implicitWidth/implicitHeight since the size of any Item cannot shrink under these values. fill properties ensure that the Item fills the available space, according to the constrains above: if fill is not defined an Item cannot grow or shrink according to its constrains.
Now, if you want the Buttons to maintain they aspect and still stretch the grid, you can use an intermediate Item. While applying Layout attached properties to the external Item, the Buttons can be centerIn it and be unaffected.
Sample code:
import QtQuick 2.5 import QtQuick.Window 2.2 import QtQuick.Layouts 1.1 import QtQuick.Controls 1.4 Window { width: 200; height: 200; minimumHeight: 100; visible: true GridLayout { anchors.fill: parent rows: 3 columns: 3 Repeater { model: 9 Item { Layout.fillWidth: true Layout.fillHeight: true Button { anchors.centerIn: parent; width: 32; height: 32; text: index + 1 } } } } }Instead if you want the Buttons to fill the available space, just specify fillWidth/fillHeight. Since no other layout constraints are set (e.g. minimum*, maximum*) the Buttons correctly occupy all the available space. Here is the code above revisited. As expected, width and height are simply discarded:
import QtQuick 2.5 import QtQuick.Window 2.2 import QtQuick.Layouts 1.1 import QtQuick.Controls 1.4 Window { width: 200; height: 200; minimumHeight: 100; visible: true GridLayout { anchors.fill: parent rows: 3 columns: 3 Repeater { model: 9 Button {width: 32; height: 32; text: index + 1; // 32? NOPE! Layout.fillWidth: true; Layout.fillHeight: true } } } }更多推荐
发布评论