我有以下最小的工作示例,取自我当前的项目:
import QtQuick 2.5
import QtQuick.Window 2.2
import QtQuick.Layouts 1.1
import QtQuick.Controls 1.4
Window {
visible: true
width: Screen.width/2
height: Screen.height/2
property real ueMinOpacity: 0.00
property real ueMaxOpacity: 1.00
Rectangle {
anchors.fill: parent
anchors.margins: 8
border.color: "#4682b4"
radius: 16
clip: true
gradient: Gradient {
GradientStop {
position: 0
color: "#ffffff"
} // GradientStop
GradientStop {
position: 1
color: "#303030"
} // GradientStop
} // Gradient
Rectangle {
anchors.fill: parent
antialiasing: true
border.color: "#4682b4"
border.width: 1
radius: 16
clip: true
gradient: Gradient {
GradientStop {
position: 0
color: "#ffffff"
} // GradientStop
GradientStop {
position: 1
color: "#000000"
} // GradientStop
} // Gradient
RowLayout {
spacing: 8
anchors.fill: parent
TextField {
id: ueProductSearchTextField
antialiasing: true
Layout.fillWidth: true
Layout.fillHeight: true
Layout.alignment: Qt.AlignLeft|Qt.AlignVCenter
Layout.margins: 8
placeholderText: qsTr("Enter product info")
} // TextField
Rectangle {
id: ueImageWrapper
Layout.fillWidth: true
Layout.fillHeight: true
Layout.alignment: Qt.AlignRight|Qt.AlignVCenter
Layout.margins: 8
antialiasing: true
border.color: "#4682b4"
border.width: 1
radius: 16
clip: true
visible: ueProductSearchTextField.length > 0
gradient: Gradient {
GradientStop {
position: 0
color: "#636363"
} // GradientStop
GradientStop {
position: 1
color: "#303030"
} // GradientStop
} // Gradient
Image {
anchors.fill: parent
source: "http://www.clipartbest.com/cliparts/9iR/gEX/9iRgEXXxT.png"
antialiasing: true
clip: true
smooth: true
fillMode: Image.PreserveAspectFit
horizontalAlignment: Image.AlignHCenter
verticalAlignment: Image.AlignVCenter
sourceSize.width: 96
sourceSize.height: 96
} // Image
MouseArea {
anchors.fill: parent
enabled: ueImageWrapper.visible
onClicked: {
ueProductSearchTextField.text="";
} // onClicked
} // MouseArea
onWidthChanged: {
print("ueImageWrapper.width:"+ueImageWrapper.width);
} // onWidthChanged
onHeightChanged: {
print("ueImageWrapper.height:"+ueImageWrapper.height);
} // onHeightChanged
} // Rectangle
} // RowLayout
} // Rectangle
} // Rectangle
} // Window
现在,此Item
/ Rectangle
的目的是根据TextField
输入的值过滤数据库记录,这非常有效。但是,一旦TextField
的文字不再为空(当用户输入一些字符串时),Layout
Image
右侧的清除文字就会显示{{1 }}。应用程序启动后,我会看到以下屏幕截图 - 明文图标被隐藏,因为OpacityAnimator
中没有文字:
然后,我在TextField
输入一些文字,弹出明文图标:
然后,例如,我通过单击清除文本图标清除文本,然后再次隐藏它(图标),这是正常的:
最后,我重新输入文本到TextField
,明文图标再次可见,但它有不同的大小:
为什么?我没有更改代码。 TextField
s一定有问题,但我根本看不到它!以下是Layout
和onWidthChanged
处理程序的调试输出:
qml:ueImageWrapper.width:37.56521739130435
qml:ueImageWrapper.height:480
qml:ueImageWrapper.width:132.92307692307693
qml:ueImageWrapper.width:133.83783783783784
答案 0 :(得分:3)
BaCaRoZzo的建议有效,但我也不确定它的行为方式。如果你举一个更简单的例子:
import QtQuick 2.6
import QtQuick.Window 2.2
import QtQuick.Layouts 1.0
import QtQuick.Controls 1.0
Window {
visible: true
width: 800
height: 800
Shortcut {
sequence: "Ctrl+Q"
onActivated: Qt.quit()
}
Item {
id: boundary
width: 400
height: 400
anchors.centerIn: parent
RowLayout {
anchors.fill: parent
Rectangle {
Layout.fillWidth: true
Layout.fillHeight: true
color: "steelblue"
}
Rectangle {
id: rect
Layout.fillWidth: true
Layout.fillHeight: true
color: "salmon"
visible: false
}
}
}
Rectangle {
anchors.fill: boundary
color: "transparent"
border.color: "black"
}
Button {
text: "Toggle visibility"
onClicked: rect.visible = !rect.visible
}
}
第二个矩形开始不可见,然后通过单击按钮显示/隐藏。但是,当它以不可见的方式开始时,它永远不会显示一次。另一方面,如果它开始可见,那么它将获得布局宽度的一半。
如果您仔细阅读documentation,则表示如果您只想填充可用空间,则不需要设置preferredWidth
/ preferredHeight
。出于这个原因,它似乎是布局如何处理其项目的初始可见性的错误。我建议提交一份错误报告。