QML TumblerColumn 宽度超过 ColumnLayout 几何
QML TumblerColumn width exceeds ColumnLayout geometry
我有以下 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
现在,如您在屏幕截图中所见,Tumbler Columns 宽度大于父项的 ColumnLayout 几何图形,这是错误的。我错过了什么?我已经考虑了ueNumericTumbler
的ColumnLayout
,但是问题依然存在,我不知道该怎么办!我应该使用锚点吗?
还是 ueNumericTumbler
的父容器 rectangle/window 中的问题,命名为 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"
}
}
]
}
您在错误的对象上使用了 属性 附加的 Layout
; Layout.preferredWidth
仅在 Tumbler
上设置,而不是 TumblerColumn
。您可以通过在表达式的 return 语句之前添加 print()
行来调试它:
TumblerColumn
{
model: [0, 1, 2, 3, 4, 5, 6, 7, 8, 9]
width: {
print(Layout.preferredWidth)
Layout.preferredWidth/4
}
}
这会打印 -1
,即 default value。您可以将 width
设置为此:
ueLoginKeypadTumbler.Layout.preferredWidth / 4
不过您需要考虑分隔符的宽度……呃。这不是很好。请打开一个 bug report 提到这个用例应该更简单。
我有以下 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
现在,如您在屏幕截图中所见,Tumbler Columns 宽度大于父项的 ColumnLayout 几何图形,这是错误的。我错过了什么?我已经考虑了ueNumericTumbler
的ColumnLayout
,但是问题依然存在,我不知道该怎么办!我应该使用锚点吗?
ueNumericTumbler
的父容器 rectangle/window 中的问题,命名为 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"
}
}
]
}
您在错误的对象上使用了 属性 附加的 Layout
; Layout.preferredWidth
仅在 Tumbler
上设置,而不是 TumblerColumn
。您可以通过在表达式的 return 语句之前添加 print()
行来调试它:
TumblerColumn
{
model: [0, 1, 2, 3, 4, 5, 6, 7, 8, 9]
width: {
print(Layout.preferredWidth)
Layout.preferredWidth/4
}
}
这会打印 -1
,即 default value。您可以将 width
设置为此:
ueLoginKeypadTumbler.Layout.preferredWidth / 4
不过您需要考虑分隔符的宽度……呃。这不是很好。请打开一个 bug report 提到这个用例应该更简单。