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 PlatformRectangle {id:borderRectrequired property int myid //必须要初始化再能存在readonly property int myint: 100 //设置只读，外部不能够访问property alias btn_extern:btn //内部控件外部扩展，使外部可以访问 前面是新名字，后面是原始名字property alias btn_id:btn.height//只暴露某一个属性width:30height:30color:"red"property Component myComponent //组件类 //实现动态加载，可以支持组件Loader{id:loadersourceComponent: myComponent}Button{id:btnwidth:100height: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 PlatformWindow{width:500height:500title: "Mouse Area"visible: trueproperty  int  myid: 1property  real real:2.3 //没有flot类型要使用realproperty string name: "value" //string也可以赋值为colorproperty color nc: "red"property url myurl: "../../C++.png"property variant myVar :1 //是一个万能的类型什么都可以property list<Rectangle> myList; //数组里面都是RectangleComponent{id:comRectangle{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 PlatformWindow{width:500height:500title: "Mouse Area"visible: trueButtonGroup{//按钮组id:btngroupexclusive: true //设置排他属性// buttons: col.children //通过布局获取所有的控件是一个list<AbstractButton>方式1}Column //列布局，这里先不讲解，后续统一讲解{id:colCheckBox {checked: true //设置选择状态tristate:true //设置三态按钮autoExclusive: true //CheckBox不存在排他的方法 RadioButton自动存在排他checkable:false //设置可以被选中text: qsTr("First")}CheckBox {text: qsTr("Second")autoExclusive: truecheckable:trueButtonGroup.group: btngroup //方式2设置组}CheckBox {checked: truecheckable:trueautoExclusive: truetext: 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 PlatformWindow{width:500height:500title: "Mouse Area"visible: trueColumn {ButtonGroup {id: childGroupexclusive: falsecheckState: parentBox.checkState}CheckBox {id: parentBoxtext: qsTr("Parent")checkState: childGroup.checkState}CheckBox {checked: truetext: qsTr("Child 1")leftPadding: indicator.widthButtonGroup.group: childGroup}CheckBox {text: qsTr("Child 2")leftPadding: indicator.widthButtonGroup.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 PlatformWindow{width:500height:500title: "Mouse Area"visible: trueCheckBox {tristate: truenextCheckState: function() { //下次切换的状态，手动管理if (checkState === Qt.Unchecked)return Qt.Checkedelse if(checkState == Qt.Checked)return Qt.PartiallyCheckedelsereturn Qt.Unchecked}}}

QML-Button扩展

DelayButton

    DelayButton{width:150;height: 50delay:300 //持续的时间onProgressChanged: { //进度条改变的事件范围是0-1console.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 PlatformWindow{width:500height:500title: "Mouse Area"visible: trueColumn{RadioButton{ //可以自动实现排他性checked: truetext: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 PlatformWindow{width:500height:500title: "Mouse Area"visible: trueButtonGroup{id:groupbuttons: col.children//添加所有成员exclusive: true //设置自动排他}Column{id:colSwitch{ //勾选按钮checked: trueLayoutMirroring.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:groupbuttons: col.children//添加所有成员exclusive: true //设置自动排他}TabBar{id:colTabButton{ //tab框自带排他性checked: truetext: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 PlatformWindow{width:500height:500title: "Mouse Area"visible: trueButtonGroup{id:groupbuttons: col.children//添加所有成员exclusive: true //设置自动排他}RoundButton{//半圆形按钮,因为Button没有radius属性，需要设置background为rectangle设置x:1radius: 10text:qsTr("radio1")}RoundButton{x:150text: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.15Window{width:500height:500title: "Mouse Area"visible :trueToolBar {RowLayout {anchors.fill: parentToolButton {text: qsTr("‹")onClicked: stack.pop()}Label {text: "Title"elide: Label.ElideRighthorizontalAlignment: Qt.AlignHCenterverticalAlignment: Qt.AlignVCenterLayout.fillWidth: true}ToolButton {text: qsTr("⋮")onClicked: menu.open()}}}}

自定义按钮控件

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

    Button{id:btntext: qsTr("btn")width: 150height: 100contentItem: Text{ //内容重新绘制text:btn.textfont:btn.font// verticalAlignment:Text.horizontalAlignmentverticalAlignment: 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.15Window{width:500height:500title: "Mouse Area"visible :trueButton{id:btntext: qsTr("btn")width: 150height: 100contentItem: Rectangle{ //内容重新绘制Text{id:txttext:btn.textfont:btn.fontanchors.right: parent.right//靠右显示// verticalAlignment:Text.horizontalAlignment}Image {id: imagewidth: 50;height: 50source: "../../C++.png"// anchors.centerIn: parent//设置居中}}background:Rectangle{ //如果都存在background可以设置边框的颜色anchors.fill: btncolor: "red"}}}