如何动画显示在底部的消息？

Question

我在底部显示一条消息：

Msg.qml

import QtQuick 2.4

Item {
    property alias text: mf.text
    anchors.fill: parent
    antialiasing: false
    opacity: 0.9
    z: 100

    MsgForm {
        id: mf
        width: parent.width
        y: parent.height - height - 5
    }
}

MsgForm.ui.qml

import QtQuick 2.4

Item {
    property alias text: msg.text

    width: 200

    id: message
    height: msg.height+10

    Rectangle {
        id: rectangle
        color: "#fb9191"
        anchors.fill: parent
        border.color: "#fd6666"
        border.width: 2

        Text {
            id: msg
            anchors.top: parent.top
            anchors.topMargin: 2
            textFormat: Text.PlainText
            anchors.right: parent.right
            anchors.rightMargin: 4
            anchors.left: parent.left
            anchors.leftMargin: 4
            wrapMode: Text.WordWrap
            clip: false
            font.bold: true
            font.pointSize: 12
            font.family: "Tahoma"
        }
    }
}

我怎样才能让表单从底部顺利出现？动画结束后，如果 window 调整大小，消息必须始终位于底部。

Answer 1

您可以在 opacity 变化上制作动画：

Msg.qml

import QtQuick 2.4

Item {
    property alias text: mf.text
    anchors.fill: parent
    antialiasing: false
    opacity: 0.9
    z: 100
    MouseArea{
        anchors.fill: parent
        onClicked: mf.opacity = !mf.opacity
    }
    MsgForm {
        id: mf
        //y: parent.height - height - 5
        opacity:0
        Behavior on opacity {
            NumberAnimation{
                duration:600
            }
        }
        width: parent.width
        anchors.bottom: parent.bottom 
    }
}

或任何其他 NumberAnimation。我建议您创建 States，在其中做一些 propertyChanges，并在某些操作上，例如单击按钮更改状态。在您的 MsgForm.ui.qml 示例中添加：

MouseArea{
    anchors.fill: parent
    onClicked: mf.state= "show"
}

在动作中，例如：在我的 mouseArea 中，我更改了 mf

的状态

MouseArea{
    anchors.fill: parent
    onClicked: mf.state= "show"
}

如果你想要 y 上的动画，试试这个：

MsgForm.ui.qml

import QtQuick 2.4

Item {
    id: message
    property alias text: msg.text
    width: parent.width
    height: msg.height+10

    Rectangle {
        id: rectangle
        color: "#fb9191"
        anchors.fill: parent
        border.color: "#fd6666"
        border.width: 2

        Text {
            id: msg
            anchors.top: parent.top
            anchors.topMargin: 2
            textFormat: Text.PlainText
            anchors.right: parent.right
            anchors.rightMargin: 4
            anchors.left: parent.left
            anchors.leftMargin: 4
            wrapMode: Text.WordWrap
            clip: false
            font.bold: true
            font.pointSize: 12
            font.family: "Tahoma"
        }
    }
    Behavior on y {
        NumberAnimation{
            duration:300
        }
    }
    states: [
        State {
            name: "show"
            PropertyChanges {
                target: message
                y: parent.height - height
            }
        },
        State {
            name: "hide"
            PropertyChanges {
                target: message
                y: parent.height + height + 5
            }
        }
    ]
}

Msg.qml

import QtQuick 2.4

Rectangle {
    property alias text: mf.text
    width:800
    height: 480
    antialiasing: false
    opacity: 0.9
    z: 100
    MouseArea{
        anchors.fill: parent
        onClicked:  mf.state= "show"
    }
    MsgForm {
        id: mf
        //y: parent.height - height - 5
        y: parent.height +height + 5
        width: parent.width
    }
}

Answer 2

你可以玩 anchors.bottomMargin 属性从底部提升消息项目。

import QtQuick 2.4

Item {
    property alias text: mf.text
    anchors.fill: parent
    antialiasing: false
    opacity: 0.9
    z: 100

    MsgForm {
        id: mf
        property bool showing: false

        width: parent.width
        anchors{
            bottom: parent.bottom
            bottomMargin: mf.showing ? 0 : -mf.height
            Behavior on bottomMargin{
                NumberAnimation{  }
            }
        }
    }
}

Answer 3

谢谢大家。最后，我按照 qtcentre forum 中收到的建议解决了这个问题。

通过定义用于绑定到 anchors.XXXXmargin 或 y 属性表达式的本地数值属性可以轻松实现所需的效果。

按照这种方法，可能的解决方案如下：

MsgForm {
    property bool showing: false
    property int position: showing ? height : 0
    width: parent.width
    y: parent.height - position
    Behavior on position {
        NumberAnimation {duration: 500}
    }   
}

如何动画显示在底部的消息？

How to animate a message that appears on bottom?

qt

qml

qtquick2

qt5.4

Msg.qml

MsgForm.ui.qml

Msg.qml