qml中的两个互斥按钮怎么实现？

FlyWM_ 2016-10-26 11:20:59

如图，默认状态运行是蓝色，停止是灰色，点击运行，运行按钮编程灰色，停止按钮变成蓝色，点击停止，停止按钮编程灰色，运行按钮变成蓝色

...全文

931 3 打赏收藏转发到动态举报

写回复

用AI写文章

3 条回复

切换为时间正序

请发表友善的回复…

发表回复

yhgaven 2016-11-09

打赏
举报

ExclusiveGroup

马小悦悦 2016-10-27

打赏
举报

import QtQuick 2.7
import QtQuick.Window 2.2
import QtQuick.Controls 2.0

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

    Rectangle
    {
        id: run
        width: 100; height: 50
        Text {
            text: "运行"
            anchors.centerIn: parent
            font.pixelSize: 32
        }
        anchors.centerIn: parent
        state: "stopState"
        states: [
            State{
                name: "runState"
                PropertyChanges{
                    target: run; color:"lightgray"
                }
                PropertyChanges{
                    target: mouseArea1; enabled: false;
                }
            },
            State{
                name: "stopState"
                PropertyChanges{
                    target: run; color: "lightblue"
                }
                PropertyChanges{
                    target: mouseArea1; enabled: true;
                }
            }
        ]
        MouseArea
        {
            id: mouseArea1
            anchors.fill: parent
            onClicked: {
                if(run.state == "runState")
                    {
                        run.state = "stopState"
                        stop.state = "stopState"
                    }
                else
                    {
                        run.state = "runState"
                        stop.state = "runState"
                    }
            }
        }
    }

    Rectangle
    {
        id: stop
        width: 100; height: 50
        Text
        {
            anchors.centerIn: parent
            text: "暂停"
            font.pixelSize: 32
        }
        anchors.top: run.bottom
        anchors.left: run.left
        anchors.topMargin: 10
        state: "stopState"
        states: [
            State{
                name: "runState"
                PropertyChanges{
                    target: stop; color:"lightblue"
                }
                PropertyChanges{
                    target: mouseArea2; enabled: true;
                }
            },
            State{
                name: "stopState"
                PropertyChanges{
                    target: stop; color: "lightgray"
                }
                PropertyChanges{
                    target: mouseArea2; enabled: false;
                }
            }
        ]
        MouseArea
        {
            id: mouseArea2
            anchors.fill: parent
            onClicked: {
                if(stop.state == "runState")
                {stop.state = "stopState"
                 run.state = "stopState"}
                else
                {stop.state = "runState"
                 run.state = "runState"}
            }
        }
    }
}