QML_window属性、锚点、Rectangle、Button、RadioButton、CheckBox

QML_window属性、锚点、Rectangle、Button、RadioButton、CheckBox

1、window属性
注意：每个属性和变量都会有一个对应的槽函数（即使是自定义的变量）

/*****************例1*******************/
maximumHeight : int  //窗口的高度最大值
maximumWidth : int   //窗口的宽度最大值
minimumHeight : int  //窗口的高度最小值
minimumWidth : int   //窗口的宽度最小值
//当设置maximumHeight和minimumHeight相等时表示限定高度不变

/*****************例2*******************/
opacity : 0.5  
//表示窗口的透明度，取值范围0~1

/*****************例3*******************/
onWidthChanged: {
        console.count("WidthChanged")
    }//窗体宽度发生变化的时候，触发事件

/*****************例4*******************/
//每个属性和变量都会有一个对应的槽函数（即使是自定义的变量）
property int myValue: 1  //定义一个变量myValue

onMyValueChanged: {
    console.count("MyValueChanged!!! is:", myValue)
}//当变量发生变化时候触发的槽函数

2、button属性

/*****************例1*******************/
Button {
    id: but2
    text: "Cancel"
    background: Rectangle {
        border.color: but2.focus ? "blue" : "brack"  //查看按键是否获取到焦点，来决定显示对应边框的颜色
        border.width: 2  //边框宽度
    }
}

/*****************例2*******************/
onActiveFocusChanged: {  //当焦点发生变化时的槽函数
    console.count(activeFocusItem.objectName)
}

/*****************例3*******************/
Button{
        id:button
        anchors.centerIn: parent  //铆点在屏幕中间
        text: "我是按钮"
        checkable: true  //为false时按钮是微动按键形式，为true是按钮是自锁按键的形式

        background: Rectangle{
                    implicitHeight: 25
                    implicitWidth: 100
                    color: button.pressed ? "grey": "green"
                    border.width: 2
                    border.color: "slategray"
                }

        onClicked: {  //被点击事件触发
            console.log("哎呀，我被按到了！！！")
        }
    }
    
/*****************例4*******************/
Button {
    id: but
    x: 10
    y: 10
    width: 50
    height: 30
    text: "点击"
    background: Rectangle {
        radius: 5
        color: but.pressed ? "blue" : "red"
    }
}

3、锚点的使用

/*****************例1*******************/
anchors.fill: parent  //把当前控件铺满屏幕

/*****************例2*******************/
anchors.top: rectangle1.bottom  //设置现在矩形在rectangle1的下方
anchors.topMargin: 20           //设置当前控件距离上方矩形20个像素的位置

/*****************例3*******************/
anchors.centerIn: parent                           //设置现在矩形在父窗口的中心居中
anchors.verticalCenter: parent.verticalCenter      //设置现在矩形在父窗口的列向居中
anchors.horizontalCenter: parent.horizontalCenter  //设置现在矩形在父窗口的水平居中

4、矩形框的使用Rectangle

rotation: 45      	//旋转角度
scale: 2			//缩放倍数
antialiasing: true  //抗锯齿效果

5、RadioButton一般配合ExclusiveGroup对象或GroupBox分组使用，用于单选

/*****************例1*******************/
import QtQuick.Controls 2.3

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

    RadioButton {
        id: radbut1
        text: "1号"
        checked: true
    }
    RadioButton {
        id: radbut2
        anchors.top: radbut1.bottom
        text: "2号"
        checked: false
    }
}

/*****************例2*******************/
import QtQuick.Controls 1.4

ExclusiveGroup {  //ExclusiveGroup(互斥分组)，这不是controls2的控件，所以我们需要导入QtQuick.Controls 1.4
    id: radiobut
}

RadioButton {
    id: radbut1
    text: "1号"
    checked: true
    exclusiveGroup: radiobut  //通过exclusiveGroup属性为其制定一个分组
}
RadioButton {
    id: radbut2
    anchors.top: radbut1.bottom
    text: "2号"
    checked: false
    exclusiveGroup: radiobut
}

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
        }
    }
}