| 一、概念描述 1、状态：通常我们将用户界面描述为一种状态。一个状态定义了一组属性的改变，并且会在一定的条件下被触发。另外在这些状态转化的过程中可以有一个过渡（定义了这些属性的动画或者一些附加的动作，当进入一个新的状态时，动作也可以被执行）。 为了让用户界面看起来更加自然，我们需要使用动画效果来增加一些过渡。一个过渡能被状态的改变触发。在qml中，使用State元素来定义状态，需要与基础元素对象（Item）的states序列属性连接。状态通过它的状态名来鉴别，由组成它的一系列简单的属性来改变元素。默认的状态在初始化元素属性时被定义，并命名为“”（一个空的字符串）。状态的改变由分配一个元素新的状态属性名来完成。另一种切换属性的方法是使用状态元素的when属性。when属性能够被设置为一个表达式的结果，当结果为true时，状态被使用。 2、过渡：一系列的过渡能够被加入任何元素，一个过渡由状态的改变触发执行。可以使用属性的from:和to:来定义状态改变的指定过渡。这两个属性就像一个过滤器，当过滤器为true时，过渡生效。也可以使用“”来表示任何状态。例如from:" ";to:" * "表示从任一状态到另一个任一状态的默认值，这意味着过渡用于每个状态的切换。在这个例子中，我们期望从状态“go”到“stop”,转换时实现一个颜色改变的动画。对于从“stop”到“go”状态的改变，我们期望保持颜色的直接改变，不使用过渡。我们使用from和to来限制过渡只在从“go”到“stop”时生效。在过渡中我们给每个灯添加两个颜色的动画，这个动画将按照状态的描述来改变属性。 import QtQuick 2.9import QtQuick.Window 2.2//实现qml状态与过渡Window { visible: true width: 400 height: 400 color: "#737513" title: qsTr("Hello World") Rectangle{ id:root width:400 height: width //color: "black" //自定义属性 property <type> <name>:<value> property color black: '#1f1f21' property color red: '#fc3d39' property color green: '#53d769' property color yellow: '#ffff37' //颜色渐变 gradient: Gradient { GradientStop { position: 0.0; color: "#2ed5fa" } GradientStop { position: 1.0; color: "#2467ec" } } Rectangle { id: light1 x: 25; y: 15 width: 100; height: width radius: width/2 color: root.black border.color: Qt.lighter(color, 1.1) } Rectangle { id: light2 x: 150; y: 15 width: 100; height: width radius: width/2 color: root.black border.color: Qt.lighter(color, 1.1) } Rectangle { id: light3 x: 275; y: 15 width: 100; height: width radius: width/2 color: root.black border.color: Qt.lighter(color, 1.1) } // 默认状态为“stop” state: "stop" states: [ State { name: "stop" PropertyChanges { target: light1; color: root.red } PropertyChanges { target: light2; color: root.black } }, State { name: "go" PropertyChanges { target: light1; color: root.black } PropertyChanges { target: light2; color: root.green } }, State { name: "wait" PropertyChanges { target: light1; color: root.black } PropertyChanges { target: light2; color: root.black } PropertyChanges { target: light3; color: root.yellow } } ] //注意：在一个状态中，只需要描述属性如何从它们的默认状态改变（而不是前一个状态的改变） // 设置鼠标区域为全局 MouseArea { anchors.fill: parent onClicked: { if(parent.state == "stop") parent.state = "wait"; else if(parent.state == "wait") parent.state = "go"; else parent.state = "stop" } } // 添加过渡 transitions: [ Transition { from: "stop"; to: "go" // from: "*"; to: "*" ColorAnimation { target: light1; properties: "color"; duration: 2000 } ColorAnimation { target: light2; properties: "color"; duration: 2000 } }, Transition { from: "wait"; to: "go" ColorAnimation { target: light2; properties: "color"; duration: 2000 } ColorAnimation { target: light3; properties: "color"; duration: 2000 } } ] }} 运行结果如下： ---------------------------------------------------------------------------------------------------------------------- 我们尊重原创，也注重分享，文章来源于微信公众号：郝飞的俱俱，建议关注公众号查看原文。如若侵权请联系qter@qter.org。 ---------------------------------------------------------------------------------------------------------------------- |
Copyright © 2001-2019 Comsenz Inc. Powered by Discuz! X3.4 ICP证: 冀ICP备10016221号-2
