Конечный автомат и переходы между представлениями в QML в qt - PullRequest
Новая
       20

Конечный автомат и переходы между представлениями в QML в qt

0 голосов
/ 04 февраля 2019

Я создал стандартное приложение Qt Quick с QML и использую Qt Creator 4.0.1 на основе QT 5.6.2

Я изменил только main.qml на: 

import QtQuick 2.5
import QtQuick.Window 2.2
import QtQuick.Controls 1.4
import QtQuick.Controls.Styles 1.4
import QtQml.StateMachine 1.0 as DSM

Window {
    visible: true
    width: 1280
    height: 800
    id: v1_View
    title: " "

    Rectangle {
        id: rectangle1
        width: parent.width
        height: parent.height
        color: "orange"
        border.color: "black"
        border.width: 5

        Label{
            id: label1

            anchors.horizontalCenter: parent.horizontalCenter
            anchors.top: parent.top
            anchors.margins: 100

            text: "My View V1"
            font.pointSize: 32
            color: "white"
            verticalAlignment: Text.AlignVCenter
            horizontalAlignment: Text.AlignHCenter
        }

        Button {
            id: b1
            anchors.verticalCenter: parent.verticalCenter
            anchors.top: parent.bottom
            anchors.left: parent.left
            anchors.margins: 100

            text: "Button B1"

            style: ButtonStyle {
                id:mybuttonStyle1

                label: Text {
                    verticalAlignment: Text.AlignVCenter
                    horizontalAlignment: Text.AlignHCenter
                    font.pointSize: 32
                    color: "white"
                    text: control.text
                }
            }
        }

        Button {
            id: b2

            anchors.verticalCenter: parent.verticalCenter
            anchors.top: parent.bottom
            anchors.left: parent.left
            anchors.margins: 550

            text: "Button B2"

            style: ButtonStyle {
                id:mybuttonStyle2

                label: Text {
                    verticalAlignment: Text.AlignVCenter
                    horizontalAlignment: Text.AlignHCenter
                    font.pointSize: 32
                    color: "white"
                    text: control.text
                }
            }
        }
    }

    Component {
            id: myViewV2

            Rectangle {
                id: rectangle6
                color: "limegreen"
                width: 1280
                height: 800
                border.color: "black"
                border.width: 5

                Label{
                    id: label2

                    anchors.horizontalCenter: parent.horizontalCenter
                    anchors.top: parent.top
                    anchors.margins: 100

                    text: "My View V2"
                    font.pointSize: 32
                    color: "white"
                    verticalAlignment: Text.AlignVCenter
                    horizontalAlignment: Text.AlignHCenter
                }

                Button {
                    id: b3

                    anchors.verticalCenter: parent.verticalCenter
                    anchors.top: parent.bottom
                    anchors.left: parent.left
                    anchors.leftMargin: 350

                    text: "Button B3"

                    style: ButtonStyle {
                        id:mybuttonStyle3

                        label: Text {
                            verticalAlignment: Text.AlignVCenter
                            horizontalAlignment: Text.AlignHCenter
                            font.pointSize: 32
                            color: "white"
                            text: control.text
                        }
                    }
                }
            }
        }

    DSM.StateMachine {
        id: stateMachine
        // set the initial state
        initialState: v1

        // start the state machine
        running: true

        DSM.State {
            id: v1
            // create a transition from v2 to v3 when the button is clicked
            DSM.SignalTransition {
                targetState: v2
                signal: b1.clicked
            }
            // do something when the state enters/exits
            onEntered: console.log("v1 entered")
            onExited: console.log("v1 exited")
        }
        DSM.State {
            id: v2

            // create a transition from v3 to s13 when the button is clicked
            DSM.SignalTransition {
                targetState: v1
                signal: b3.clicked
            }
            // do something when the state enters/exits
            onEntered: {
                console.log("v2 entered");
            }
            onExited: console.log("v2 exited")
        }
    }
}
  1. Как мне изменить код, который переход изменил на Component (myViewV2), нажав кнопку (b1) из прямоугольника (rectangle1).И переход изменился на Rectangle (rectangle1), нажав кнопку (b3) из компонента (myViewV2).
  2. Я взял Rectangle и Component в качестве примера.На самом деле, основная идея состоит в том, чтобы иметь 2 представления в QML.View1 с 1 меткой и 2 кнопками.View2 с 1 меткой и 1 кнопкой.Должны быть переходы между видами при нажатии на кнопки.
...