Question

我有一个应用程序，我想将动画应用于按钮/矩形，然后执行动画，它应该显示一个对话框。问题是当onClicked上调用dialog.visible：true时，不会执行动画。我在这里创建了一个测试应用程序是两个qml文件：

main.qml

import QtQuick 2.3
import QtQuick.Window 2.2

Window {
    visible: true
    FileDialogs
    {
        id:fileDialog
        visible:false
        width:800
        height:800
        //modality: Qt.WindowModal
        z:10
    }

    Rectangle
    {
        id:rect
        width:200
        height:200
        color:"blue"
        Text
        {
            id:simpleText
            text:"This is a button"
            font.pixelSize: 20
            color:"white"
            width:200
            height:200
        }

        states: [
                State {
                    name: "PRESSED"
                },
                State {
                    name: "RELEASED"
                }
            ]
        transitions: [
                Transition {
                    from: "PRESSED"
                    to: "RELEASED"
                    PropertyAnimation { id: selectAnim; target: rect; properties: "scale"; easing.type: Easing.OutBack; easing.amplitude: 3.0; easing.period: 1.5; from: 0; to: 1; duration: 400 }
                }
        ]
        MouseArea {
                  anchors.fill: parent
                  onPressed:
                  {
                      parent.state = "PRESSED"
                  }
                  onReleased:
                  {
                      parent.state = "RELEASED"
                  }
                  onClicked: {
                      fileDialog.visible=true;
                  }
              }
    }
}

FileDialogs.qml，来自Qt示例

import QtQuick 2.2
import QtQuick.Controls 1.2
import QtQuick.Dialogs 1.1
import QtQuick.Layouts 1.1
import QtQuick.Window 2.0

Item {
    width: 580
    height: 400
    SystemPalette { id: palette }
    clip: true

    //! [filedialog]
    FileDialog {
        id: fileDialog
        visible: fileDialogVisible.checked
        modality: Qt.WindowModal
        title: fileDialogSelectFolder.checked ? "Choose a folder" :
        (fileDialogSelectMultiple.checked ? "Choose some files" : "Choose a file")
        selectExisting: fileDialogSelectExisting.checked
        selectMultiple: fileDialogSelectMultiple.checked
        selectFolder: fileDialogSelectFolder.checked
        nameFilters: [ "Image files (*.png *.jpg)", "All files (*)" ]
        selectedNameFilter: "All files (*)"
        sidebarVisible: fileDialogSidebarVisible.checked
        onAccepted: {
            console.log("Accepted: " + fileUrls)
            if (fileDialogOpenFiles.checked)
                for (var i = 0; i < fileUrls.length; ++i)
                    Qt.openUrlExternally(fileUrls[i])
        }
        onRejected: { console.log("Rejected") }
    }
    //! [filedialog]

    ScrollView {
        id: scrollView
        anchors {
            left: parent.left
            right: parent.right
            top: parent.top
            bottom: bottomBar.top
            leftMargin: 12
        }
        ColumnLayout {
            spacing: 8
            Item { Layout.preferredHeight: 4 } // padding
            Label {
                font.bold: true
                text: "File dialog properties:"
            }
            CheckBox {
                id: fileDialogModal
                text: "Modal"
                checked: true
                Binding on checked { value: fileDialog.modality != Qt.NonModal }
            }
            CheckBox {
                id: fileDialogSelectFolder
                text: "Select Folder"
                Binding on checked { value: fileDialog.selectFolder }
            }
            CheckBox {
                id: fileDialogSelectExisting
                text: "Select Existing Files"
                checked: true
                Binding on checked { value: fileDialog.selectExisting }
            }
            CheckBox {
                id: fileDialogSelectMultiple
                text: "Select Multiple Files"
                Binding on checked { value: fileDialog.selectMultiple }
            }
            CheckBox {
                id: fileDialogOpenFiles
                text: "Open Files After Accepting"
            }
            CheckBox {
                id: fileDialogSidebarVisible
                text: "Show Sidebar"
                checked: fileDialog.sidebarVisible
                Binding on checked { value: fileDialog.sidebarVisible }
            }
            CheckBox {
                id: fileDialogVisible
                text: "Visible"
                Binding on checked { value: fileDialog.visible }
            }
            Label {
                text: "<b>current view folder:</b> " + fileDialog.folder
            }
            Label {
                text: "<b>name filters:</b> {" + fileDialog.nameFilters + "}"
            }
            Label {
                text: "<b>current filter:</b>" + fileDialog.selectedNameFilter
            }
            Label {
                text: "<b>chosen files:</b> " + fileDialog.fileUrls
            }
            Label {
                text: "<b>chosen single path:</b> " + fileDialog.fileUrl
            }
        }
    }

    Rectangle {
        id: bottomBar
        anchors {
            left: parent.left
            right: parent.right
            bottom: parent.bottom
        }
        height: buttonRow.height * 1.2
        color: Qt.darker(palette.window, 1.1)
        border.color: Qt.darker(palette.window, 1.3)
        Row {
            id: buttonRow
            spacing: 6
            anchors.verticalCenter: parent.verticalCenter
            anchors.left: parent.left
            anchors.leftMargin: 12
            height: implicitHeight
            width: parent.width
            Button {
                text: "Open"
                anchors.verticalCenter: parent.verticalCenter
                onClicked: fileDialog.open()
            }
            Button {
                text: "Pictures"
                tooltip: "go to my Pictures directory"
                anchors.verticalCenter: parent.verticalCenter
                enabled: fileDialog.shortcuts.hasOwnProperty("pictures")
                onClicked: fileDialog.folder = fileDialog.shortcuts.pictures
            }
            Button {
                text: "Home"
                tooltip: "go to my home directory"
                anchors.verticalCenter: parent.verticalCenter
                enabled: fileDialog.shortcuts.hasOwnProperty("home")
                onClicked: fileDialog.folder = fileDialog.shortcuts.home
            }
        }
    }
}

Answer 1

动画正在发生。只有FileDialog覆盖按钮才能看到它的动画效果。释放按钮区域外的鼠标单击，您将看到动画（这样就不会触发onClicked）。

在动画后显示对话框的方法：

    states: [
        State {
            name: "PRESSED"
        },
        State {
            name: "RELEASED"
        }
    ]
    transitions: [
        Transition {
            from: "PRESSED"
            to: "RELEASED"
            PropertyAnimation { id: selectAnim; target: rect; properties: "scale"; easing.type: Easing.OutBack; easing.amplitude: 3.0; easing.period: 1.5; from: 0; to: 1; duration: 400 }
            onRunningChanged: {
                if (!running) {
                    fileDialog.visible = true
                }
            }
        }
    ]
    MouseArea {
        anchors.fill: parent
        onPressed:
        {
            parent.state = "PRESSED"
        }
        onClicked: {
            parent.state = "RELEASED"
        }
    }

qml：矩形动画不起作用

1 个答案: