Qml 第二次点击后图像大小不同

我从当前项目中获得了以下最简单的工作示例：

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

现在，这个

项的目的是根据
文本字段
的输入值过滤数据库记录，这非常有效。但是，一旦
TextField
的文本不再为空（当用户输入一些字符串时），在
布局的右侧，用于清除文本的
图像将通过
OpacityAnimator
显示。应用程序启动后，我会看到以下屏幕截图-由于
TextField中没有文本，因此明文图标被隐藏：
然后，我在
TextField
中输入一些文本，然后弹出明文图标：
然后，例如，我通过点击清除文本图标来清除文本，它（图标）再次被隐藏，这是正常的：

最后，我将文本重新输入到
文本字段
，明文图标再次可见，但大小不同：
为什么？我没有改变密码。
Layout
s肯定有问题，但我就是看不到！以下是
onWidthChanged
和
onHeightChanged
处理程序的调试输出：

qml:ueImageWrapper。宽度：37.56521739130435

qml:ueImageWrapper。高度：480

qml:ueImageWrapper.宽度：132.923076922307693

qml:ueImageWrapper。宽度：133.83783783783784

巴卡罗佐的建议是可行的，但我也有点不确定它为什么会这样做。举一个简单的例子：

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
    }
}

第二个矩形开始是不可见的，然后通过单击按钮显示/隐藏。然而，当它开始时是不可见的，一旦显示，它就永远不会得到一个大小。另一方面，如果它开始可见，那么它将获得布局宽度的一半

如果您仔细阅读，它并不是说如果您只想让项目填满可用空间，就有必要设置
首选宽度
/
首选高度
。因此，布局如何处理项目的初始可见性似乎是一个缺陷。我建议您提交一份bug报告。
谢谢您的回答。我今天没有时间测试它。：）它闻起来也像虫子！但是，设置
preferredWidth
/
preferredHeight
通常是有意义的。至少如果你不想像这种情况下那样得到完美分割的空间。希望有人能提交一份bug报告。是的，这是有意义的，特别是如果它不仅仅是一个看不见的“间隔物”项目。