QML State states 状态机

最新推荐文章于 2024-04-13 23:26:51 发布

NGC_2070

最新推荐文章于 2024-04-13 23:26:51 发布

阅读量429

点赞数 2

分类专栏： # QT

本文链接：https://blog.csdn.net/baidu_41388533/article/details/117426569

版权

QT 专栏收录该内容

110 篇文章 26 订阅

订阅专栏

本文介绍了QML中的QMLState状态机及其使用方法，包括两种状态触发方式：通过状态名切换和在状态中添加when条件。示例代码展示了如何改变Rectangle颜色以及根据SwipeView的当前页面改变Button的文本和点击事件。

摘要由CSDN通过智能技术生成

QML State states 状态机

参考视频：https://www.bilibili.com/video/BV1Ay4y1W7xd
QML State 官方文档：https://doc.qt.io/qt-5/qml-qtquick-state.html
Qt Quick States 官方文档：https://doc.qt.io/qt-5/qtquick-statesanimations-states.html

QML State

状态触发方式1（使用状态名）：

import QtQuick 2.14
import QtQuick.Window 2.14
import QtQuick.Controls 2.5
import QtQuick.Layouts 1.15
import "./common.js"  as FunJs

Window
{
    id: window
    width: 600
    height: 480
    visible: true
    title: "QML Demo"

    Item
    {
        id: rootItem
        anchors.fill: parent
        property var colorBuilder: FunJs.getColorBudider(Qt.rgba)
        property var pages:["Home", "Help", "About"]


        Rectangle
        {
            id:rect
            implicitHeight: 200
            implicitWidth: 200
            color: rootItem.colorBuilder()

            states:
                State
                {
                    name: "rectColor"
                    PropertyChanges
                    {
                        target: rect
                        color: rootItem.colorBuilder()

                    }
                }

            MouseArea
            {
                anchors.fill: parent
                onClicked:
                {
                    rect.state = rect.state === "rectColor" ? "" : "rectColor"
                }
            }

            
        }
    }
}

状态触发方式2（在状态中添加when）：

import QtQuick 2.14
import QtQuick.Window 2.14
import QtQuick.Controls 2.5
import QtQuick.Layouts 1.15
import "./common.js"  as FunJs

Window
{
    id: window
    width: 600
    height: 480
    visible: true
    title: "QML Demo"

    Item
    {
        id: rootItem
        anchors.fill: parent
        property var colorBuilder: FunJs.getColorBudider(Qt.rgba)
        property var pages:["Home", "Help", "About"]

        Rectangle
        {
            id: rect
            implicitHeight: 200
            implicitWidth: 200
            color: "pink"

            states:
                State
                {
                    when: rectMouse.pressed
                    name: "rectColor"
                    PropertyChanges
                    {
                        target: rect
                        color: rootItem.colorBuilder()
                    }
                }

            MouseArea
            {
                id: rectMouse
                anchors.fill: parent
            }


        }
    }
}

states 状态机

import QtQuick 2.14
import QtQuick.Window 2.14
import QtQuick.Controls 2.5
import QtQuick.Layouts 1.15
import "./common.js"  as FunJs

Window
{
    id: window
    width: 600
    height: 480
    visible: true
    title: "QML Demo"

    Item
    {
        id: rootItem
        anchors.fill: parent
        property var colorBuilder: FunJs.getColorBudider(Qt.rgba)
        property var pages:["Home", "Help", "About"]


        SwipeView
        {
            id:view
            anchors.top: parent.top
            anchors.right: parent.right
            anchors.left: parent.left
            anchors.bottom: btn.top

            Repeater
            {
                model: 3
                Rectangle
                {
                    color: rootItem.colorBuilder()
                }
            }
        }

        PageIndicator
        {
            anchors.bottom: view.bottom
            anchors.horizontalCenter: view.horizontalCenter
            count: view.count
            currentIndex: view.currentIndex
        }

        Button
        {
            id:btn
            anchors.horizontalCenter: parent.horizontalCenter
            anchors.bottom: parent.bottom
            text: "btn state"

            states:
                [

                State
                {
                    when: view.currentIndex === 0
                    PropertyChanges
                    {
                        target: btn
                        text: "Home"
                        onClicked:
                        {
                            console.log("Home State")
                        }
                    }
                },


                State
                {
                    when: view.currentIndex === 1
                    PropertyChanges
                    {
                        target: btn
                        text: "Help"
                        onClicked:
                        {
                            console.log("Help State")
                        }
                    }
                },

                State
                {
                    when: view.currentIndex === 2
                    PropertyChanges
                    {
                        target: btn
                        text: "About"
                        onClicked:
                        {
                            console.log("About State")
                        }
                    }
                }

                ]

        }
    }
}