QML State类型,实现状态切换,图片切换等效果(二)——默认状态和when属性设置

版权声明:本文为博主原创文章,未经博主允许不得转载。 https://blog.csdn.net/hp_cpp/article/details/80852886

继续上一篇,所有基于Item的组件都有一个state属性和一个默认状态。默认状态就是空字符串(“”),包含了项目的所有初始值。

import QtQuick 2.6
import QtQuick.Controls 1.5

ApplicationWindow {
    visible: true
    width: 640
    height: 480
    title: qsTr("Hello World")

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

          MouseArea { id: mouseArea; anchors.fill: parent }

          states: State {
              name: "hidden"; when: mouseArea.pressed
              PropertyChanges { target: myRect; opacity: 0 }
          }
      }
}

运行效果:
这里写图片描述
点击后
松开鼠标,红色矩形又显示出来。
通过when可以绑定一个状态,当when中的条件为true的时候切换状态,否则就恢复默认状态。
如果有一组状态需要和多个when进行绑定,可以用以下代码格式:

  Item {
      states: [
          State { name: "state1"; when: sharedCondition },
          State { name: "state2"; when: sharedCondition }
      ]
      // ...
  }

举例二:

import QtQuick 2.6
import QtQuick.Controls 1.5

ApplicationWindow {
    visible: true
    width: 640
    height: 480
    title: qsTr("Hello World")

    Rectangle {
         id: myRect
         width: 100; height: 100
         color: "black"

         MouseArea {
             id: mouseArea
             anchors.fill: parent
             onClicked: myRect.state == 'clicked' ? myRect.state = "" : myRect.state = 'clicked';
         }

         states: [
             State {
                 name: "clicked"
                 PropertyChanges { target: myRect; color: "red" }
             }
         ]
     }

}

运行效果:
初始的时候:
这里写图片描述
点击后:
这里写图片描述
松开鼠标,颜色不会变化,点击后又会进行颜色切换。这样就可以实现两种状态的切换。

展开阅读全文

没有更多推荐了,返回首页