qml Button RadioButton GroupBox CheckBox 按钮控件类

Button

• 导入 import QtQuick.Controls 1.4 或 import QtQuick.Controls 2.4
  根据自己的编译器选择相应的版本

• 新建一个Qt Quick工程，然后在window对象中调用我们的Button控件
  属性checkable默认是不选中的，即触发按钮，按下去马上弹起来。当设置为true时，Button变为切换按钮，有两种状态：按下/弹起
  

• 添加一些信号槽连接
  

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

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

    Button{
            id:button
            anchors.centerIn: parent
            text: "我是按钮"
            checkable: true

            background: Rectangle{
                        implicitHeight: 30  //高度
                        implicitWidth: 100  //长度
                        color: button.pressed ? "blue": "red" //按下去颜色的变换
                        border.width: 2 //边框
                        border.color: "slategray"   //颜色
                    }

            onClicked: {
                console.log("button被按了！") //信号槽设置
            }
        }
}

选择框控件

单选框RadioButton

用于多选一的场景，使用时需要通过exclusiveGroup属性为其制定一个分组，也可以和GroupBox结合使用,

• ExclusiveGroup(互斥分组)，这不是controls2的控件，所以我们需要导入QtQuick.Controls 1.4，ExclusiveGroup本身是不可见元素，用于将一些可选择元素组合到一起，供用户选择其中的一个选项

属性:

• text:单选按钮的文本
  checked:指示RadioButton是否被选中
  hovered:指示指针是否悬停在RadioButton上
  pressed:在按钮被按下时为true
  
• 义了3个单选框，将这3个单选框放到了一个矩形中，采用锚定位的方式anchors.top简单管理一下位置。定义ExclusiveGroup对象，在RadioButton中设置exclusiveGroup属性，可以实现单选框之间的互斥选择

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

Window {
    visible: true
    width: 480
    height: 320
    title: qsTr("RadioButton")

    ExclusiveGroup{
        id: exclusivegroup
     }

    Rectangle{
        width: 50
        height: 100
        anchors.centerIn: parent
        RadioButton{
            id: radio1
            text: "1号"
            checked: true
            exclusiveGroup: exclusivegroup
        }
        RadioButton{
            id: radio2
            anchors.top: radio1.bottom
            anchors.topMargin: 10
            text: "2号"
            checked: false
            exclusiveGroup: exclusivegroup
        }
        RadioButton{
            id: radio3
            anchors.top: radio2.bottom
            anchors.topMargin: 10
            text: "3号"
            checked: false
            exclusiveGroup: exclusivegroup
        }
    }
}

分组框GroupBox

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

Window {
    visible: true
    width: 480
    height: 320
    title: qsTr("GroupBox")

    GroupBox{
        id: groupbox
        title: "选择:"
        width: 200
        height: 180
        anchors.centerIn: parent

        RadioButton{
            id: radio1
            text: "我是1号"
            checked: true
            checkable: flase
        }
        RadioButton{
            id: radio2
            anchors.top: radio1.bottom
            anchors.topMargin: 4
            text: "我是2号"
            checked: false
        }
        RadioButton{
            id: radio3
            anchors.top: radio2.bottom
            anchors.topMargin: 4
            text: "我是3号"
            checked: false
        }
    }
}

多选框 CheckBox

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

Window {
    visible: true
    width: 240
    height: 160
    title: qsTr("CheckBox")

    CheckBox{
        anchors.centerIn: parent
        id: control
        text: "选我"
        spacing: 3

        indicator:Rectangle{
            id:rectangel1
            implicitWidth: 26
            implicitHeight: 26
            x: control.leftPadding
            y: parent.height / 2 - height / 2
            radius: 3   //边缘圆滑度
            border.color: control.down ? "orange" : "green" //按下去改变为橘黄色

            Rectangle
            {
                id: rectangle2
                width: 14
                height: 14
                x: 6
                y: 6
                radius: 2
                color: control.down ? "orange" : "green"
                visible: control.checked    //可视化属性
            }
        }
    }

}