Question

我的QML元素由透明Rectangle和Image组成。此元素的目的是显示一些操作成功 - 如果某些操作成功执行，checkmark icons会弹出，然后在 1000ms 的时间内慢慢消失。
这是完成这项工作的简化代码：

import QtQuick 2.5
import QtQuick.Layouts 1.1

Rectangle
{
    id: ueActionResultIndicator

    property bool ueParamConnectionOk: false

    width: 128
    height: 128

    color: "transparent"

    ColumnLayout
    {
        anchors.fill: parent


        Image
        {
            Layout.fillWidth: true
            Layout.fillHeight: true

            horizontalAlignment: Qt.AlignHCenter
            verticalAlignment: Qt.AlignVCenter

            smooth: true

            fillMode: Image.PreserveAspectFit

//            source: ueParamConnectionOk===true?"qrc:///ueIcons/icons/ueActionOk.png"
//                                              :"qrc:///ueIcons/icons/ueActionCancel.png"
            source: "http://www.clker.com/cliparts/0/f/7/0/11954234311954389563ok_mark_h_kon_l_vdal_02.svg.hi.png"
        }   // Image
    }   // ColumnLayout

    states:
    [
        State
        {
            name: "ueStateHidden"

            PropertyChanges
            {
                target: ueActionResultIndicator

                opacity: 0.00
            }   // PropertyChanges
        },  // State

        State
        {
            name: "ueStateShown"

            PropertyChanges
            {
                target: ueActionResultIndicator

                opacity: 1.00
            }   // PropertyChanges
        }   // State
    ]   // states

    transitions:
    [
        Transition
        {
            from: "ueStateShown"
            to: "ueStateHidden"

            PropertyAnimation
            {
                properties: "opacity"

                duration: 1000

                loops: 3

                easing.type: Easing.InOutSine

                onStarted:
                {
                    visible=true;
                    enabled=true;
                }   // onStarted

                onStopped:
                {
                    visible=false;
                    enabled=false;
                }   // onStopped
            }   // PropertyAnimation
        }   // Transition
    ]   // transitions

    Component.onCompleted:
    {
        state="ueStateHidden";
    }   // Component.onCompleted
}   // Rectangle

这是父.QML个文件触发它：

import QtQuick 2.5
import QtQuick.Controls 1.4
import QtQuick.Layouts 1.1
import QtQuick.Window 2.2
import QtQuick.Controls.Styles 1.4

Window
{
    width: 512
    height: 512

    flags: Qt.FramelessWindowHint

    visible: true

    ColumnLayout
    {
        anchors.fill: parent

        spacing: 8

        Rectangle
        {
            Layout.fillWidth: true
            Layout.fillHeight: true
            Layout.margins: 8

            radius: 16
            border.color: "#4682b4"
            border.width: 1
            antialiasing: true

            gradient: Gradient
            {
                GradientStop
                {
                    position: 0
                    color: "#636363"
                }   // GradientStop

                GradientStop
                {
                    position: 1
                    color: "#303030"
                }   // GradientStop
            }   // Gradient

            ColumnLayout
            {
                anchors.fill: parent

                RowLayout
                {
                    spacing: 8
                    Layout.fillWidth: true
                    Layout.fillHeight: true
                    Layout.margins: 8
                    Layout.alignment: Qt.AlignHCenter|Qt.AlignTop

                    antialiasing: true

                    Text
                    {
                        text: qsTr("APPLICATION SETTINGS")
                        clip: true
                        font.bold: true
                        font.pointSize: 24
                        textFormat: Text.RichText
                        verticalAlignment: Text.AlignVCenter
                        horizontalAlignment: Text.AlignHCenter
                    }   // Text
                }   // RowLayout

                ColumnLayout
                {
                    Layout.fillWidth: true
                    Layout.fillHeight: true
                    Layout.margins: 8
                    Layout.alignment: Qt.AlignHCenter|Qt.AlignBottom

                    TabView
                    {
                        Layout.fillWidth: true
                        Layout.fillHeight: true
                        Layout.alignment: Qt.AlignHCenter|Qt.AlignVCenter

                        frameVisible: true

                        Tab
                        {
                            asynchronous: true
                            title: qsTr("Database")

                            Layout.fillWidth: true
                            Layout.fillHeight: true
                            Layout.alignment: Qt.AlignHCenter|Qt.AlignVCenter

                            ColumnLayout
                            {
                                spacing: 8
                                Layout.fillWidth: true
                                Layout.fillHeight: true
                                Layout.alignment: Qt.AlignHCenter|Qt.AlignVCenter

                                TextField
                                {
                                    id: textFieldServerAddress
                                    antialiasing: true

                                    Layout.fillWidth: true
                                    Layout.fillHeight: false

                                    placeholderText: qsTr("database server address")
                                }   // TextField

                                TextField
                                {
                                    id: textFieldServerPort

                                    Layout.fillWidth: true
                                    Layout.fillHeight: false

                                    placeholderText: qsTr("database server port")
                                }   // TextField

                                TextField
                                {
                                    id: textFieldDatabaseName

                                    Layout.fillWidth: true
                                    Layout.fillHeight: false

                                    placeholderText: qsTr("database name")
                                }   // TextField

                                TextField
                                {
                                    id: textFieldDatabaseUsername

                                    Layout.fillWidth: true
                                    Layout.fillHeight: false

                                    placeholderText: qsTr("database access username")
                                }   // TextField

                                TextField
                                {
                                    id: textFieldDatabasePassword

                                    Layout.fillWidth: true
                                    Layout.fillHeight: false

                                    placeholderText: qsTr("database access password")

                                    echoMode: TextInput.PasswordEchoOnEdit
                                }   // TextField

                                RowLayout
                                {
                                    Layout.fillWidth: true
                                    Layout.fillHeight: false
                                    Layout.alignment: Qt.AlignLeft|Qt.AlignVCenter
                                    spacing: 8

                                    Button
                                    {
                                        Layout.fillWidth: false
                                        Layout.fillHeight: true
                                        Layout.alignment: Qt.AlignLeft|Qt.AlignVCenter

                                        text: qsTr("Test Connection")

                                        onClicked:
                                        {
                                            ueActionResultIndicator.state="ueStateShown";
                                        }   // onClicked
                                    }   // Button
                                }   // RowLayout
                            }   // ColumnLayout
                        }   // Tab
                    }   // TabView
                }   // ColumnLayout
            }   // ColumnLayout
        }   // Rectangle
    }   // ColumnLayout

    UeActionResultIndicator
    {
        id: ueActionResultIndicator
    }   // UeActionResultIndicator
}   // Window

为什么显示的复选标记不会慢慢消失，即为什么PropertyAnimation无法启动？

Answer 1

您只显示了图片。

ueActionResultIndicator.state = "ueStateShown";

对于消失，你必须添加

ueActionResultIndicator.state = "ueStateHidden"

但是，无论如何，我认为，您必须重构此代码并在没有状态的情况下从函数运行动画：

Rectangle {
    id: rect
    width: 100
    height: 62
    color: "green"
    PropertyAnimation
    {
        id: opacityAnimation
        properties: "opacity"
        target: rect
        from: 0.0
        to: 1.0
        duration: 1000

        loops: 3

        easing.type: Easing.InOutSine

        onStarted:
        {
            visible=true;
            enabled=true;
        }   // onStarted

        onStopped:
        {
            visible=false;
            enabled=false;
        }   // onStopped
    }   // PropertyAnimation

    function runAnimation() {
        opacityAnimation.running = true
    }
}

PropertyAnimation不会触发

1 个答案: