qt Qml qml Item属性了解

Qml qml Item属性了解

属性

​anchors:​锚点 一般使用anchors.fill等等 在anchors group里面的都可以用

​anchors.fill:​填满，一般跟父控件 parent

​anchors.left: ​左侧锚点的位置，一般跟对应控件比如rec1.right​

​anchors.leftMargin:​距离左侧锚点的距离，跟数字

​anchors.centerIn:​中心居中

​anchors.horizontalCenter: ​宽居中父控件

​anchors.verticalCenter: ​高居中父控件

​rotation:​旋转角度

​scale:​放缩比例

‍

‍

特殊属性：

​states:​状态通常后面跟你的状态

states: [
             State {
                 name: "red_color"
                 PropertyChanges { target: root; color: "red" }
             },
             State {
                 name: "blue_color"
                 PropertyChanges { target: root1; color: "blue" }
             }
         ]

​state:​"blue_color"可以直接使用states里面的状态

import QtQuick 2.9
import QtQuick.Window 2.2
import QtQuick.Controls 2.2

Window {
    visible: true
    width: 800
    height: 600
    title: qsTr("Hello scan")
    color: "gray"
  
  
    Rectangle {
        id: root
        width: 100; height: 100
        state:"normal"
        states: [
            State {
                name: "normal"
                PropertyChanges { target: root; color: "green" }
            },
            State {
                name: "red_color"
                PropertyChanges { target: root; color: "red";width:200 }
            },
            State {
                name: "blue_color"
                PropertyChanges { target: root; color: "blue";height:200 }
            }
        ]
  
        MouseArea{
            anchors.fill: parent
            onPressed: {
                root.state= "blue_color"
            }
            onReleased: {
                root.state="red_color"
            }
        }
    }
}

‍

​Animation​动画，具体用法如下

第一种

Rectangle {
        id: flashingblob//建立矩形对象
        width: 75; height: 75
        color: "blue"
        opacity: 1.0
MouseArea {
            anchors.fill: parent
            onClicked: {
                animateColor.start()//开始
                animateOpacity.start()
            }
        }

        PropertyAnimation {//属性变换
            id: animateColor; 
            target: flashingblob; 
            properties: "color"; 
            to: "green"; duration: 1000//转换时间
        }
        NumberAnimation {//数值变换
            id: animateOpacity
            target: flashingblob
            properties: "opacity"
            from: 0.1
            to: 1.0
            duration: 1000//转换时间
       }
}

第二种

    Rectangle {
         id: rect
         width: 100; height: 100
         color: "red"

         PropertyAnimation on x { to: 100 ;duration: 1000}
         PropertyAnimation on y { to: 100 ;duration: 1000}
         PropertyAnimation on width { to: 200 ;duration: 2000}
     }

第三种

‍

​ColorAnimation​颜色转换

​SequentialAnimation​顺序转换，先执行一个动画再执行一个

Rectangle {
      width: 100; height: 100
      color: "red"

      SequentialAnimation on color {
          ColorAnimation { to: "yellow"; duration: 1000 }
          ColorAnimation { to: "blue"; duration: 1000 }
      }
  }

    Rectangle {
         id: rect
         width: 100; height: 100
         color: "red"


         SequentialAnimation {//不同的属性顺序变换
             id: animation
                ColorAnimation { target: rect; property: "color"; to: "yellow"; duration: 1000 }
                ColorAnimation { target: rect; property: "color"; to: "blue"; duration: 1000 }

                PropertyAnimation { target: rect; property: "x"; to: 100; duration: 1000 }
                PropertyAnimation { target: rect; property: "y"; to: 100; duration: 1000 }
                PropertyAnimation { target: rect; property: "width"; to: 200; duration: 2000 }
            }
         Component.onCompleted: {//开始时启动，用component封装
                 animation.start();
             }
     }

Transitions During State Changes​在状态切换是载入动画

Rectangle {
        width: 75; height: 75
        id: button
        state: "RELEASED"

        MouseArea {//鼠标按下和松开的时候切换状态
            anchors.fill: parent
            onPressed: button.state = "PRESSED"
            onReleased: button.state = "RELEASED"
        }

        states: [//给状态的属性定义
            State {
                name: "PRESSED"
                PropertyChanges { target: button; color: "lightblue"}
            },
            State {
                name: "RELEASED"
                PropertyChanges { target: button; color: "green"}
            }
        ]

        transitions: [//写状态切换时的动画
            Transition {
                from: "PRESSED"
                to: "RELEASED"
                ColorAnimation { target: button; duration: 100}
            },
            Transition {
                from: "RELEASED"
                to: "PRESSED"
                ColorAnimation { target: button; duration: 100}
            }
        ]
    }

Behaviors​预先写好的动画效果，针对某个属性改变时的动画

Rectangle {
        width: 75; height: 75; radius: width
        id: ball
        color: "salmon"
        MouseArea{//鼠标触发位置属性改变
            anchors.fill: parent
            onClicked: {
            	ball.x += 50
                ball.y += 50
				ball.color = "green"
		
            }
        }
        Behavior on x {//预先写好x改变时的动画效果
            NumberAnimation {
                id: bouncebehavior
                easing {
                    type: Easing.OutElastic
                    amplitude: 1.0
                    period: 0.5
                }
            }
        }
        Behavior on y {//同上
            animation: bouncebehavior
        }
        Behavior {
            ColorAnimation { target: ball; duration: 100 }
        }
    }

Playing Animations in Parallel or in Sequence​顺序执行动画效果用Sequence​

 Rectangle {
          id: banner
          width: 150; height: 100; border.color: "black"

          Column {//列形排序
              anchors.centerIn: parent
              Text {
                  id: code
                  text: "Code less."
				  font.pointSize: 30
                  opacity: 0.01
              }
              Text {
                  id: create
                  text: "Create more."
				  font.pointSize: 20
                  opacity: 0.01
              }
              Text {
                  id: deploy
                  text: "Deploy everywhere."
                  opacity: 0.01
              }
          }

          MouseArea {//触发SequentialAnimation 
              anchors.fill: parent
              onPressed: playbanner.start()
          }

          SequentialAnimation {//顺序执行动画
              id: playbanner
              running: false
              NumberAnimation { target: code; property: "opacity"; to: 1.0; duration: 200}
              NumberAnimation { target: create; property: "opacity"; to: 1.0; duration: 200}
              NumberAnimation { target: deploy; property: "opacity"; to: 1.0; duration: 200}
          }
      }

‍