QT之QML从入门到精通（第三章）

QML-Property

关于属性的设置

MyRectangle.qml

import QtQuick 2.12
import QtQuick.Window 2.12 //2.15
import QtQuick.Controls 2.12 //可以引入别的控件
import Qt.labs.folderlistmodel 2.12
import Qt.labs.platform 1.0 as Platform

Rectangle {
    id:borderRect
    required property int myid //必须要初始化再能存在
    readonly property int myint: 100 //设置只读，外部不能够访问
    property alias btn_extern:btn //内部控件外部扩展，使外部可以访问 前面是新名字，后面是原始名字
    property alias btn_id:btn.height//只暴露某一个属性

    width:30
     height:30
    color:"red"
    property Component myComponent //组件类 //实现动态加载，可以支持组件
    Loader{
        id:loader
        sourceComponent: myComponent
    }

    Button{
        id:btn
        width:100
        height:100

    }

}

main.qml

import QtQuick 2.12 //2.15
import QtQuick.Window 2.12 //2.15
import QtQuick.Controls 2.12 //可以引入别的控件
import Qt.labs.folderlistmodel 2.12
import Qt.labs.platform 1.0 as Platform

Window{
    width:500
    height:500
    title: "Mouse Area"
    visible: true
    property  int  myid: 1
    property  real real:2.3 //没有flot类型要使用real
    property string name: "value" //string也可以赋值为color
    property color nc: "red"
    property url myurl: "../../C++.png"
    property variant myVar :1 //是一个万能的类型什么都可以
    property list<Rectangle> myList; //数组里面都是Rectangle

    Component{
        id:com
        Rectangle{
            width:40;height:40;
        }
    }
    MyRectangle{
        myid: 1
        // myComponent: com //实现组件的动态加载，注意：qml要是调用界面必须要加载qrc文件中。
        Component.onCompleted: {
            width =100 //可以赋值，入伙不想要赋值
            // myint = 100
            // console.log(width)
            // console.log(myint)
            console.log("btn = ",btn_extern.width)
        }
    }

}

QML-CheckBox

import QtQuick 2.12 //2.15
import QtQuick.Window 2.12 //2.15
import QtQuick.Controls 2.12 //可以引入别的控件
import Qt.labs.folderlistmodel 2.12
import Qt.labs.platform 1.0 as Platform

Window{
    width:500
    height:500
    title: "Mouse Area"
    visible: true

    ButtonGroup{//按钮组
        id:btngroup
        exclusive: true //设置排他属性
        // buttons: col.children //通过布局获取所有的控件是一个list<AbstractButton>方式1

    }

    Column //列布局，这里先不讲解，后续统一讲解
    {
        id:col
        CheckBox {
            checked: true //设置选择状态
            tristate:true //设置三态按钮
            autoExclusive: true //CheckBox不存在排他的方法 RadioButton自动存在排他
            checkable:false //设置可以被选中
            text: qsTr("First")
        }
        CheckBox {
            text: qsTr("Second")
            autoExclusive: true
            checkable:true
            ButtonGroup.group: btngroup //方式2设置组

        }
        CheckBox {
            checked: true
            checkable:true
            autoExclusive: true
            text: qsTr("Third")
            ButtonGroup.group: btngroup //方式2设置组
        }
    }

}

实现树形勾选框

import QtQuick 2.12 //2.15
import QtQuick.Window 2.12 //2.15
import QtQuick.Controls 2.12 //可以引入别的控件
import Qt.labs.folderlistmodel 2.12
import Qt.labs.platform 1.0 as Platform

Window{
    width:500
    height:500
    title: "Mouse Area"
    visible: true

    Column {
        ButtonGroup {
            id: childGroup
            exclusive: false
            checkState: parentBox.checkState
        }

        CheckBox {
            id: parentBox
            text: qsTr("Parent")
            checkState: childGroup.checkState
        }

        CheckBox {
            checked: true
            text: qsTr("Child 1")
            leftPadding: indicator.width
            ButtonGroup.group: childGroup
        }

        CheckBox {
            text: qsTr("Child 2")
            leftPadding: indicator.width
            ButtonGroup.group: childGroup
        }
    }


}

import QtQuick 2.12 //2.15
import QtQuick.Window 2.12 //2.15
import QtQuick.Controls 2.12 //可以引入别的控件
import Qt.labs.folderlistmodel 2.12
import Qt.labs.platform 1.0 as Platform

Window{
    width:500
    height:500
    title: "Mouse Area"
    visible: true

    CheckBox {
        tristate: true
        nextCheckState: function() { //下次切换的状态，手动管理
            if (checkState === Qt.Unchecked)
                return Qt.Checked
            else if(checkState == Qt.Checked)
                return Qt.PartiallyChecked
            else
                return Qt.Unchecked
        }
    }



}

QML-Button扩展

DelayButton

    DelayButton{
        width:150;height: 50
        delay:300 //持续的时间
        onProgressChanged: { //进度条改变的事件范围是0-1
            console.log(progress)
        }
    }

RadioButton

import QtQuick 2.12 //2.15
import QtQuick.Window 2.12 //2.15
import QtQuick.Controls 2.12 //可以引入别的控件
import Qt.labs.folderlistmodel 2.12
import Qt.labs.platform 1.0 as Platform

Window{
    width:500
    height:500
    title: "Mouse Area"
    visible: true

    Column
    {
        RadioButton{ //可以自动实现排他性
            checked: true
            text:qsTr("radio1")
        }
        RadioButton{
            text:qsTr("radio2")
        }
        RadioButton{
            text:qsTr("radio3")
        }
    }


}

Switch

import QtQuick 2.12 //2.15
import QtQuick.Window 2.12 //2.15
import QtQuick.Controls 2.12 //可以引入别的控件
import Qt.labs.folderlistmodel 2.12
import Qt.labs.platform 1.0 as Platform

Window{
    width:500
    height:500
    title: "Mouse Area"
    visible: true

    ButtonGroup{
        id:group
        buttons: col.children//添加所有成员
        exclusive: true //设置自动排他
    }
    Column
    {
        id:col
        Switch{ //勾选按钮
            checked: true
            LayoutMirroring.enabled: true//开启镜像效果
            text:qsTr("radio1")
            onPositionChanged: {
                console.log("pos:",position) //输出位置1是开0是关，可以用鼠标去拖动他
            }
        }
        Switch{
            text:qsTr("radio2")
            onPositionChanged: {
                console.log("radio2:",position) //输出位置1是开0是关
            }
        }

    }


}

TabBar

 ButtonGroup{
        id:group
        buttons: col.children//添加所有成员
        exclusive: true //设置自动排他
    }
    TabBar
    {
        id:col
        TabButton{ //tab框自带排他性
            checked: true
            text:qsTr("radio1")

        }
        TabButton{
            text:qsTr("radio2")

        }

    }

RoundButton

import QtQuick 2.12 //2.15
import QtQuick.Window 2.12 //2.15
import QtQuick.Controls 2.12 //可以引入别的控件
import Qt.labs.folderlistmodel 2.12
import Qt.labs.platform 1.0 as Platform

Window{
    width:500
    height:500
    title: "Mouse Area"
    visible: true

    ButtonGroup{
        id:group
        buttons: col.children//添加所有成员
        exclusive: true //设置自动排他
    }

        RoundButton{//半圆形按钮,因为Button没有radius属性，需要设置background为rectangle设置
            x:1
            radius: 10
            text:qsTr("radio1")

        }
        RoundButton{
            x:150
            text:qsTr("radio2")
        }




}

ToolButton

工具按钮

import QtQuick 2.12 //2.15
import QtQuick.Window 2.12 //2.15
import QtQuick.Controls 2.12 //可以引入别的控件
import Qt.labs.folderlistmodel 2.12
import Qt.labs.platform 1.0 as Platform
import QtQuick.Layouts 1.15

Window{
    width:500
    height:500
    title: "Mouse Area"
    visible :true

    ToolBar {
        RowLayout {
            anchors.fill: parent
            ToolButton {
                text: qsTr("‹")
                onClicked: stack.pop()
            }
            Label {
                text: "Title"
                elide: Label.ElideRight
                horizontalAlignment: Qt.AlignHCenter
                verticalAlignment: Qt.AlignVCenter
                Layout.fillWidth: true
            }
            ToolButton {
                text: qsTr("⋮")
                onClicked: menu.open()
            }
        }
    }



}

自定义按钮控件

    Button{
        id:btn
        width: 150
        height: 100
        background: Rectangle{
            anchors.fill: parent
            color: btn.checked | btn.down ?"blue":"black" //选中或者按下就走三目运算符
            
        }
    }

    Button{
        id:btn
        text: qsTr("btn")
        width: 150
        height: 100
        contentItem: Text{ //内容重新绘制
            text:btn.text
            font:btn.font
            // verticalAlignment:Text.horizontalAlignment
            verticalAlignment: Text.horizontalCenter
        }
    }

import QtQuick 2.12 //2.15
import QtQuick.Window 2.12 //2.15
import QtQuick.Controls 2.12 //可以引入别的控件
import Qt.labs.folderlistmodel 2.12
import Qt.labs.platform 1.0 as Platform
import QtQuick.Layouts 1.15

Window{
    width:500
    height:500
    title: "Mouse Area"
    visible :true
    Button{
        id:btn
        text: qsTr("btn")
        width: 150
        height: 100
        contentItem: Rectangle{ //内容重新绘制
            Text{
            id:txt
            text:btn.text
            font:btn.font
            anchors.right: parent.right//靠右显示
            // verticalAlignment:Text.horizontalAlignment
            }
            Image {
                id: image
                width: 50;height: 50
                source: "../../C++.png"
                // anchors.centerIn: parent//设置居中
            }
        }
        background:Rectangle{ //如果都存在background可以设置边框的颜色
            anchors.fill: btn
            color: "red"
        }
    }




}