QT学习笔记-qml开发_IT分享知识网

大家好，欢迎来到IT知识分享网。

文章目录

一、qml工程创建
- 1.新建一个项目
- 2.项目中新建不同子文件
二、qml语法
- 1.qml基本结构
- 2.信号和槽
三、qml基本元素

一、qml工程创建

1.新建一个项目

2.项目中新建不同子文件

import QtQuick 2.12 import QtQuick.Window 2.12 Window { 
     width: 640 height: 480 visible: true title: qsTr("Hello World") Rectangle{ 
     x:100 y:150 z:1 //Z轴控制该元素图层位置 width: 200 height: 100 color: "red" } MyRectangle{ 
     //子文件名称 x:200 y:200 z:0 //Z轴控制该元素图层位置 width: 200 //主函数和子函数都可以定义 height: 100 myTopMargin: 10 //子函数中定义的变量可在主函数中传递参数 myBottomMargin: 10 //上下边框距离 } }

2）子函数MyRectangle.qml

import QtQuick 2.0 Rectangle{ 
     id:borderRect //矩形元素id property int myTopMargin : 0 //自定义上边框，可在主函数中调用 property int myBottomMargin : 0 color: "black" Rectangle{ 
     id:innerRect //矩形元素id color: "yellow" anchors.fill:parent //填充整个父类窗口 anchors.topMargin: myTopMargin //距离上边框 anchors.bottomMargin: myBottomMargin //距离下边框 anchors.leftMargin: 5 //距离左边框0 anchors.rightMargin: 5 //距离右边框0 } }

二、qml语法

1.qml基本结构

元素名 { 
     属性名1: 属性值1 属性名2: 属性值2 ... 子元素1 { 
     ... } 子元素2 { 
     ... } ... }

import QtQuick 2.12 import QtQuick.Window 2.12 Window { 
     width: 640 //宽 height: 480 //高 visible: true //是否可见 title: qsTr("Hello World") //标题 //子元素1--矩形 Rectangle { 
     width: 100 height: 100 color: "red" } //子元素2--文本 Text { 
     text: "Hello World" font.bold: true font.pixelSize: 24 color: "red" } }

2.信号和槽

Rectangle { 
     width: 100 height: 100 color: "red" signal clicked() //定义信号--clicked MouseArea { 
     //监听鼠标事件 anchors.fill: parent onClicked: parent.clicked() } } Rectangle { 
     width: 100 height: 100 color: "blue" Connections { 
     //槽函数 target: redRect onClicked: { 
     //点击事件发生后打印"Red rectangle clicked!" console.log("Red rectangle clicked!") } } }

三、qml基本元素

1.Rectangle 矩形

import QtQuick 2.12 import QtQuick.Window 2.12 import QtQuick.Controls 2.5 Window { 
     // x:30 //位置 // y:30 width: 320 //大小 height: 240 // minimumWidth: 320 //最小宽度 // minimumHeight: 240 //最小高度 // maximumWidth: 640 //最大宽度、高度 // maximumHeight: 480 visible: true //是否可见 title: qsTr("运行") //标题 opacity: 0.9 //窗口透明度、0-1的任意数(可以是小数) signal mysig() //自定义信号 //触发信号后实现的功能 onMysig: { 
     } //窗体生成控件能够自动生成对应信号和槽函数 onWidthChanged: { 
     console.log("width:",width) //打印输出当前宽度值 } onHeightChanged:{ 
     console.log("height:",height) //打印输出当前宽度值 } Button { 
     id: btn1 x:30 y:30 width: 60 height: 40 focus : true background: Rectangle{ 
     border.color: btn1.focus ? "blue" : "black" //边框颜色是否有点击，有为蓝色，没有为黑色 } onClicked: { 
     console.log("btn1 clicked") //按钮按下打印btn1 clicked } Keys.onRightPressed: { 
     //键盘右键按下聚焦到按钮2 btn2.focus = true } } Button { 
     id: btn2 x:100 y:30 width: 60 height: 40 background: Rectangle{ 
     border.color: btn2.focus ? "blue" : "black" //边框颜色是否有点击，有为蓝色，没有为黑色 } onClicked: { 
     console.log("btn2 clicked") } Keys.onLeftPressed: { 
     btn1.focus = true } } onActiveFocusItemChanged: { 
     console.log("active focus item changed",activeFocusItem) } Rectangle{ 
     //矩形 id:rect1 x:10 y:10 z:1 //Z轴控制在哪一图层 width:100 height:50 color: "blue" MouseArea{ 
     //聚焦鼠标 onClicked: { 
     console.log("on clicked rt1") } } } Rectangle{ 
     //矩形 id:rect2 // anchors.fill:parent //填充满父类窗口 // anchors.horizontalCenter: parent.horizontalCenter // 水平居中于父窗口,会随窗口变化 // anchors.verticalCenter: parent.verticalCenter // 垂直居中于父窗口,会随窗口变化 anchors.centerIn: parent //居于父窗口中心，会随窗口变化 // anchors.left: rect1.right //当前矩形左边等于rt2的右边 // anchors.leftMargin: 20 //当前矩形与之前矩形20 width:100 height:50 color: "red" } Rectangle{ 
     //矩形 id:rect3 anchors.top:rect1.bottom anchors.topMargin: 20 width:100 height:50 color: "black" } Rectangle{ 
     //矩形 id:rect4 x:50 y:100 z:1 width:50 height:100 // color: "yellow" rotation: 45 //旋转角度 scale: 0.5 //放大缩小 // opacity: 0.5 //透明度 border.width: 5 //内边框 border.color: "red" //红色 radius: 30 //边角弧度 gradient: Gradient { 
     //渐变色从0-1 浅蓝-蓝 GradientStop { 
    position: 0.0;color: "lightsteelblue"} GradientStop { 
    position: 1.0;color: "blue"} } } }

2.Text 文本

import QtQuick 2.12 import QtQuick.Window 2.12 Window { 
     width: 640 //宽 height: 480 //高 visible: true //是否可见 title: qsTr("Hello World") //标题 //子元素1--矩形 Rectangle { 
     width: 100 height: 100 color: "red" } //子元素2--文本 Text { 
     text: "Hello World" font.bold: true font.pixelSize: 24 color: "red" } }

3.States状态

import QtQuick 2.12 import QtQuick.Window 2.12 Window { 
     width: 640 height: 480 visible: true title: qsTr("Hello World") Rectangle{ 
     id: root width: 100 ; height: 100 state: "normal" //调用名为red_color的状态 states: [ //设置该矩形元素的状态 State { 
     //状态1 name: "normal" //normal //id：root；颜色：黑色 PropertyChanges { 
    target: root ; color:"black"} }, State { 
     //状态1 name: "red_color" //名称：red_color //id：root；颜色：红色；宽度200 PropertyChanges { 
    target: root ; color:"red";width:200} }, State { 
     name: "blue_color" PropertyChanges { 
    target: root ; color:"blue";height:200} } ] } MouseArea{ 
     //鼠标事件 anchors.fill: parent //填充父类 onPressed: { 
     //按下鼠标 root.state = "red_color" //设置为red_color状态 } onReleased: { 
     //松开鼠标 root.state = "blue_color" //设置为blue_color状态 } } }

4.Transitions动画效果

import QtQuick 2.12 import QtQuick.Window 2.12 Window { 
     width: 640 height: 480 visible: true title: qsTr("Hello World") Rectangle { 
     id: flashingblob width: 75; height: 75 color: "blue" opacity: 1.0 //透明度 MouseArea { 
     anchors.fill: parent //填充 onClicked: { 
     //鼠标点击 animateColor.start() //animateColor颜色 animateOpacity.start() //animateOpacity透明度 animateWidth.start() //animateWidth宽度 } } PropertyAnimation { 
     //属性 id: animateColor; //id：animateColor target: flashingblob; properties: "color"; //颜色 to: "green"; //绿色 duration: 1000 //持续时间1000ms } NumberAnimation { 
     //数值 id: animateOpacity target: flashingblob properties: "opacity" //透明度 from: 0.1 //0.1-1 to: 1.0 duration: 2000 //持续时间1000ms // loops: Animation.Infinite // easing {type: Easing.OutBack; overshoot: 500} } NumberAnimation { 
     //数值 id: animateWidth target: flashingblob properties: "width" //透明度 from: 50 //0.1-1 to: 100 duration: 2000 //持续时间1000ms // loops: Animation.Infinite // easing {type: Easing.OutBack; overshoot: 500} } } }

import QtQuick 2.12 import QtQuick.Window 2.12 Window { 
     width: 640 height: 480 visible: true title: qsTr("Hello World") Rectangle{ 
     id: rect width: 10 height: 10 color: "red" opacity: 0 PropertyAnimation on x { 
     to:100 ; duration:1000} PropertyAnimation on y { 
     to:100 ; duration:1000} PropertyAnimation on width { 
     to:100 ; duration:1000} PropertyAnimation on height { 
     to:100 ; duration:1000} PropertyAnimation on opacity { 
     to:0.9 ; duration:1000} ColorAnimation on color{ 
     // from: "white" //从白色开始 to: "black" duration: 2000 } } }

import QtQuick 2.12 import QtQuick.Window 2.12 Window { 
     width: 640 height: 480 visible: true title: qsTr("Hello World") Rectangle{ 
     id: rect width: 100 height: 100 color: "red" SequentialAnimation on color{ 
     ColorAnimation { 
    to: "yellow";duration: 2000} ColorAnimation { 
    to: "blue";duration: 2000} } } }

import QtQuick 2.12 import QtQuick.Window 2.12 Window { 
     width: 640 height: 480 visible: true title: qsTr("Hello World") Rectangle { 
     width: 75; height: 75 id: button state: "RELEASED" MouseArea { 
     anchors.fill: parent onPressed: button.state = "PRESSED" onReleased: button.state = "RELEASED" } states: [ State { 
     name: "PRESSED" //按下状态 PropertyChanges { 
     target: button; color: "yellow"} }, State { 
     name: "RELEASED" //松开状态 PropertyChanges { 
     target: button; color: "blue"} } ] transitions: [ //状态过度动画 Transition { 
     from: "PRESSED" //从PRESSED到RELEASED to: "RELEASED" ColorAnimation { 
     target: button; duration: 1000} }, Transition { 
     from: "RELEASED" to: "PRESSED" ColorAnimation { 
     target: button; duration: 1000} } ] } }

5）预先设置效果，当x,y改变时该效果跟随x,y改变

import QtQuick 2.12 import QtQuick.Window 2.12 Window { 
     width: 640 height: 480 visible: true title: qsTr("Hello World") Rectangle { 
     width: 75; height: 75; radius: width id: ball color: "salmon" MouseArea{ 
     anchors.fill: parent onClicked: { 
     ball.x += 50 ball.y += 50 } } 预先设置效果，当x,y改变时该效果跟随x,y改变 Behavior on x { 
     NumberAnimation { 
     id: bouncebehavior easing { 
     type: Easing.OutElastic amplitude: 1.0 period: 0.5 } } } Behavior on y { 
     animation: bouncebehavior } Behavior { 
     ColorAnimation { 
     target: ball; duration: 1000 } } } }

6）设置三个文本，当鼠标点击时将三个文本透明度由0.01变为1

import QtQuick 2.12 import QtQuick.Window 2.12 Window { 
     width: 640 height: 480 visible: true title: qsTr("Hello World") 设置三个文本，当鼠标点击时将三个文本透明度由0.01变为1 Rectangle { 
     id: banner width: 150; height: 100; border.color: "black" Column { 
     anchors.centerIn: parent Text { 
     id: code text: "Code less." opacity: 0.01 } Text { 
     id: create text: "Create more." opacity: 0.01 } Text { 
     id: deploy text: "Deploy everywhere." opacity: 0.01 } } MouseArea { 
     anchors.fill: parent onPressed: playbanner.start() } SequentialAnimation { 
     id: playbanner running: false NumberAnimation { 
     target: code; property: "opacity"; to: 1.0; duration: 200} NumberAnimation { 
     target: create; property: "opacity"; to: 1.0; duration: 200} NumberAnimation { 
     target: deploy; property: "opacity"; to: 1.0; duration: 200} } } }

5.Component组件、Loader动态加载

import QtQuick 2.0 Rectangle{ 
     id:borderRect //矩形元素id property int myTopMargin : 0 //自定义上边框，可在主函数中调用 property int myBottomMargin : 0 width: 100 height: 100 color: "black" Rectangle{ 
     id:innerRect //矩形元素id color: "yellow" anchors.fill:parent //填充整个父类窗口 anchors.topMargin: myTopMargin //距离上边框 anchors.bottomMargin: myBottomMargin //距离下边框 anchors.leftMargin: 5 //距离左边框0 anchors.rightMargin: 5 //距离右边框0 } }

main.qml文件

import QtQuick 2.12 import QtQuick.Window 2.12 import QtQuick.Controls 2.5 Window { 
     width: 640 height: 480 visible: true title: qsTr("Hello World") // Component{ 
     // id:com // Rectangle{ 
     // id:rect // width: 200 // height: 100 // color: "black" // Component.onCompleted:{ //控件生成时执行以下函数 // console.log("onCompleted",width,height,color) //打印 // } // Component.onDestruction:{ //控件销毁时执行以下函数 // console.log("onCompleted") //打印 // } // } // } Component{ 
     id:com AnimatedImage{ 
     //Image加载静态图片；AnimatedImage加载动态图片 id:img source: "/01.gif" //图片控件可以使用路径加载 width: 200 height: 100 speed: 0.5 //动态图片播放速度0.5倍速 Component.onCompleted:{ 
     //控件生成时执行以下函数 console.log("onCompleted",width,height,color) //打印 } Component.onDestruction:{ 
     //控件销毁时执行以下函数 console.log("onCompleted") //打印 } } } Loader{ 
     id:loader // source: "/MyRectangle.qml" //图片不能用添加控件路径实现 // source: "/MyRectangle.qml" //添加控件路径 asynchronous: true //设置异步加载，若当前状态为加载中则status为2，加载完成status为1 sourceComponent: com //添加控件id:com,不能跨文件调用 onStatusChanged: { 
     //状态改变时默认为1生成控件 console.log("status:",status) } } Button{ 
     width: 50 height: 50 x:200 onClicked: { 
     //点击按钮时让sourceComponent为null，控件析构 // loader.item.width = 50 //loader.item可以访问生成的控件并修改 // loader.item.height = 50 // loader.item.color = "red" loader.item.paused = !loader.item.paused //播放状态取反 // loader.sourceComponent = null //销毁控件 } } }

6.MouseArea组件

1)MouseArea区域默认与父类窗口颜色一致，需更改颜色才能看见该区域。鼠标区域悬停使能（hoverEnabled:false具有悬浮特性的事件不会被触发，例如：onContainsMouseChanged，onMouseXChanged）

import QtQuick 2.12 import QtQuick.Window 2.12 import QtQuick.Controls 2.5 Window { 
     width: 320 height: 240 visible: true title: qsTr("运行") color: "white" MouseArea{ 
     //区域一般和背景色一致 id:mouseArea //默认响应鼠标左键 width: 100 height: 100 acceptedButtons: Qt.LeftButton | Qt.RightButton //支持左右键 hoverEnabled: true //默认为false，设置为true时鼠标悬停使能可以触发 cursorShape: Qt.CrossCursor //鼠标样式，十字形光标 enabled: true //区域内事件使能控制，false：关闭 Rectangle{ 
     //一个矩形区域填充父类-MouseArea区域 anchors.fill: parent color: "black" } onClicked: { 
     //点击 console.log("clicked") } onPressed: { 
     //按下 var ret = pressedButtons & Qt.LeftButton //左键按下赋值 var ret2 = pressedButtons & Qt.RightButton //右键按下赋值 console.log(ret ? "left" : ret2 ? "right" : "other") //判断值打印对应按键 console.log("pressed") } onReleased: { 
     //松开 console.log("released") } onDoubleClicked: { 
     //双击 console.log("doubleClicked") } 鼠标悬停默认false鼠标区域改变不会触发(hoverEnabled: true时可以触发)，按下才行/ onContainsMouseChanged: { 
     //当鼠标变化时 console.log("onContainsMouseChanged",containsMouse) } onContainsPressChanged: { 
     console.log("onContainsPressChanged",containsPress) } onMouseXChanged: { 
     //当鼠标位置变化时 console.log("x:",mouseX) //打印当前鼠标X轴位置 } onMouseYChanged: { 
     console.log("y:",mouseY) } } }

drag（拖动光标范围设置的矩形区域进行移动）

import QtQuick 2.12 import QtQuick.Window 2.12 import QtQuick.Controls 2.5 Window { 
     width: 480 height: 360 visible: true title: qsTr("运行") color: "white" Rectangle{ 
     id: container width: 480 height: 200 Rectangle{ 
     id: rect width: 50 height: 50 color: "red" opacity: (480.0 - rect.x) / 600 //透明度为0-1的值 MouseArea{ 
     anchors.fill:parent darg可以拖动MouseArea覆盖的某一矩形的区域 drag.target: rect drag.axis: Drag.XAxis //移动方向,Drag.XAxis:X轴,Drag.YAxis:Y轴 drag.minimumX: 0 //最小为0 最大=矩形container宽 - 矩形rect宽 drag.maximumX: container.width - rect.width onDoubleClicked: { 
     //双击随拖动的区域移动 console.log("doubleClicked") } } } } }

设置父类可拖动区域（浅蓝色），该区域内部设置子区域（黄色）drag.filterChildren: true可以让子控件区域（黄色区域）继承拖动父控件（浅蓝色区域），若为false则子控件区域无法实现拖动但不影响该区域内的事件

import QtQuick 2.12 import QtQuick.Window 2.12 import QtQuick.Controls 2.5 Window { 
     width: 480 height: 360 visible: true title: qsTr("运行") color: "white" Rectangle { 
     width: 480 height: 320 Rectangle { 
     x: 30; y: 30 width: 300; height: 240 color: "lightsteelblue" MouseArea { 
     anchors.fill: parent drag.target: parent; drag.axis: "XAxis" drag.minimumX: 30 drag.maximumX: 150 drag.filterChildren: true Rectangle { 
     color: "yellow" x: 50; y : 50 width: 100; height: 100 MouseArea { 
     anchors.fill: parent onClicked: console.log("Clicked") } } } } } }

事件过滤：设置父类区域（黄色），该区域内部设置子区域（蓝色）propagateComposedEvents: true //将当前区域事件发送给父类
mouse.accepted = false //禁止该区域接收当前信息

import QtQuick 2.12 import QtQuick.Window 2.12 import QtQuick.Controls 2.5 Window { 
     width: 480 height: 360 visible: true title: qsTr("运行") color: "white" Rectangle { 
     color: "yellow" width: 100; height: 100 MouseArea { 
     anchors.fill: parent onClicked: console.log("clicked yellow") } Rectangle { 
     color: "blue" width: 50; height: 50 MouseArea { 
     anchors.fill: parent propagateComposedEvents: true //将当前区域事件发送给父类 onClicked: { 
     console.log("clicked blue") mouse.accepted = false //禁止该鼠标区域接收当前信息 } } } } }

7.Button 组件

1)自定义Button

import QtQuick 2.12 import QtQuick.Window 2.12 import QtQuick.Controls 2.5 Window { 
     width: 640 height: 480 visible: true title: qsTr("Hello World") Button { 
     id: control text: qsTr("Button") padding:0 contentItem: Rectangle { 
     Rectangle默认白色 color: "transparent" //设置透明色 Text { 
     id:txt text: control.text } Image { 
     id: img source: "/05.jpg" width: 50 height: 50 anchors.right: parent.right } } } }

2)通过background在button按钮中生成矩形框，通过改变矩形框的样式改变button按钮

import QtQuick 2.12 import QtQuick.Window 2.12 import QtQuick.Controls 2.5 Window { 
     width: 480 height: 360 visible: true title: qsTr("运行") color: "white" Button{ 
     id: btn1 width: 100 height: 50 autoRepeat: true // background: Rectangle{ 
     anchors.fill: btn1 Image { 
     id: name source: "/门模式AA.gif" } // color: { 
     // if(btn1.pressed){ 
     // return "green" // } // else{ 
     // return "blue" // } // } // border.width: 5 // border.color: { 
     // if(btn1.pressed){ 
     // return "black" // } // else{ 
     // return "red" // } // } } } }

autoExclusive : true	将有这条语句的按钮设置为只能单选
checkable: true	设置为可选中状态

import QtQuick 2.12 import QtQuick.Window 2.12 import QtQuick.Controls 2.5 Window { 
     width: 480 height: 360 visible: true title: qsTr("运行") color: "white" Button{ 
     id: btn1 x: 0 y: 300 width: 50 height: 50 checkable: true //可选中状态 autoExclusive: true //只能选择一个按钮 onClicked: { 
     console.log("btn1") } } Button{ 
     id: btn2 x: (btn1.x+55) y: 300 width: 50 height: 50 checkable: true //可选中状态 autoExclusive: true //将有这条语句的按钮设置为只能单选 onClicked: { 
     console.log("btn2") } } Button{ 
     id: btn3 x: (btn2.x+55) y: 300 width: 50 height: 50 checkable: true //可选中状态 onClicked: { 
     console.log("btn3") } } }

checkable、text、Repeat、RepeatDelay、RepeatInterval（按下间隔）

import QtQuick 2.12 import QtQuick.Window 2.12 import QtQuick.Controls 2.5 Window { 
     width: 480 height: 360 visible: true title: qsTr("运行") color: "white" Button{ 
     id: btn1 width: 50 height: 50 text: "运行" //按钮的文字 font.pixelSize: 24 //字号 autoRepeat: true // autoRepeatDelay: 3000 //第一次触发到下一次触发的间隔 autoRepeatInterval: 1000 //每次触发之间的间隔 checkable: true onDownChanged: { 
     //获取当前按钮是否被按下，按下返回true，松开返回false console.log("down:",down,"pressed:",pressed) } } }

5）icon和indicator为按钮添加图片

import QtQuick 2.12 import QtQuick.Window 2.12 import QtQuick.Controls 2.5 Window { 
     width: 480 height: 360 visible: true title: qsTr("运行") color: "white" Button{ 
     id: btn1 width: 50 height: 100 autoRepeat: true // autoRepeatDelay: 3000 //第一次触发到下一次触发的间隔 autoRepeatInterval: 1000 //每次触发之间的间隔 checkable: true // icon.source: "/门模式AA - 副本.png" // icon.color: "red" // indicator: Image { 
     // id: img // source: "/门模式AA.gif" // } } }

6）DelayButton类似于进度条的按钮，需要按住一定时间

import QtQuick 2.12 import QtQuick.Window 2.12 import QtQuick.Controls 2.5 Window { 
     width: 640 height: 480 visible: true title: qsTr("Hello World") DelayButton{ 
     //类似于进度条的按钮，需要按住一定时间 width: 150 height: 50 delay: 3000 onParentChanged: { 
     console.log(progress) //打印当前进度 } } }

7）TabButton可做页面选择按钮

import QtQuick 2.12 import QtQuick.Window 2.12 import QtQuick.Controls 2.5 Window { 
     width: 640 height: 480 visible: true title: qsTr("Hello World") TabBar { 
     TabButton { 
     text: qsTr("Home") } TabButton { 
     text: qsTr("Discover") } TabButton { 
     text: qsTr("Activity") } } }

8）RadioButton单选框

import QtQuick 2.12 import QtQuick.Window 2.12 import QtQuick.Controls 2.5 Window { 
     width: 640 height: 480 visible: true title: qsTr("Hello World") Column { 
     //单选按钮，自动排他 RadioButton { 
     checked: true text: qsTr("First") } RadioButton { 
     text: qsTr("Second") } RadioButton { 
     text: qsTr("Third") } } }

import QtQuick 2.12 import QtQuick.Window 2.12 import QtQuick.Controls 2.5 Window { 
     width: 640 height: 480 visible: true title: qsTr("Hello World") ButtonGroup{ 
     id:btngrp exclusive: true buttons: col.children } Column { 
     id:col Switch { 
     //滑动勾选 text: qsTr("Wi-Fi") // LayoutMirroring.enabled: true //控件镜像 } Switch { 
     text: qsTr("Bluetooth") } } }

import QtQuick 2.12 import QtQuick.Window 2.12 import QtQuick.Controls 2.5 Window { 
     width: 640 height: 480 visible: true title: qsTr("Hello World") ButtonGroup{ 
     //把checkbox引入buttongroup组中可以利用button实现排他性，实现单选 id:childGroup exclusive: true buttons: col.children //利用id } Column{ 
     id:col CheckBox { 
     checked: true // tristate: true //三态设置"v"选中、"x"未选中、"-"不可选中 text: qsTr("First") // ButtonGroup.group: childGroup //和buttons: col.children作用相同 } CheckBox { 
     checkable: true text: qsTr("Second") // ButtonGroup.group: childGroup } CheckBox { 
     checkable: true // checked: true text: qsTr("Third") // ButtonGroup.group: childGroup } } }

import QtQuick 2.12 import QtQuick.Window 2.12 import QtQuick.Controls 2.5 Window { 
     width: 640 height: 480 visible: true title: qsTr("Hello World") // CheckBox { 
     // tristate: true // nextCheckState: function() { //实现各种勾选状态的顺序设置 // if (checkState === Qt.Unchecked) // return Qt.Checked // else if(checkState === Qt.Checked) // return Qt.PartiallyChecked // else // return Qt.Unchecked // } // }  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 } } }

8.Text 组件

1）文本基本属性

import QtQuick 2.12 import QtQuick.Window 2.12 import QtQuick.Controls 2.5 Window { 
     width: 640 height: 480 visible: true title: qsTr("Hello World") Text { 
     id: tex text: qsTr("text\ntext") //\n 换行 color: "red " font.bold: true //粗体 font.italic: true //斜体 font.letterSpacing: 10 //字体间距 font.family: "Courier New" //字体 // font.pixelSize: 20 //字体大小-像素 font.pointSize: 15 //字体大小-磅数 font.underline: true //下滑线 lineHeight: 5 //上下行距 } }

2）elide文本省略、 wrapMode文本自动换行

import QtQuick 2.12 import QtQuick.Window 2.12 import QtQuick.Controls 2.5 Window { 
     width: 640 height: 480 visible: true title: qsTr("Hello World") Rectangle { 
     id:rect width: 50 height: 100 border.color: "black" Text { 
     id: txt text: qsTr("txt shf sbd jbs kvj bsb") wrapMode:Text.WordWrap //自动换行，连续的字母或数字不行 anchors.fill: parent elide: Text.ElideRight //右边省略 // elide: Text.ElideMiddle //中间省略 } } }

3）Format文本类型

Column { 
     Text { 
     font.pointSize: 24 text: "<b>Hello</b> <i>World!</i>" } Text { 
     font.pointSize: 24 textFormat: Text.RichText //富文本 text: "<b>Hello</b> <i>World!</i>" } Text { 
     font.pointSize: 24 //纯文本显示 textFormat: Text.PlainText text: "<b>Hello</b> <i>World!</i>" } }

4）超链接

import QtQuick 2.12 import QtQuick.Window 2.12 import QtQuick.Controls 2.5 Window { 
     width: 480 height: 360 visible: true title: qsTr("超链接") MouseArea { 
     anchors.fill: parent width:200 height: 100 onClicked: { 
     Qt.quit(); } } MouseArea{ 
     anchors.centerIn: parent width: hp.width height: hp.height hoverEnabled: true // cursorShape: containsMouse ? (pressed ? Qt.ClosedHandCursor : Qt.OpenHandCursor) : Qt.ArrowCursor cursorShape: Qt.PointingHandCursor Text { 
     id: hp text: "<a href='http://qt-project.org\'><h1>Qt网站</h1></a>" anchors.centerIn: parent onLinkActivated: Qt.openUrlExternally(link) } } }

9.Property 组件

1）property 可以声明基本类型，也可以声明组件，在外部需要使用时在进行参数传递；required 外部设置才能使用；readonly设置为只读不能修改

required property Component myComponent readonly property int rectWidth: width property Rectangle myRectangle

2）main.qml

import QtQuick 2.12 import QtQuick.Window 2.12 import QtQuick.Controls 2.5 Window { 
     width: 640 height: 480 visible: true title: qsTr("Hello World") Component { 
     id:com Button { 
     width:50 height:50 } } Rectangle{ 
     x:100 y:150 z:1 //Z轴控制该元素图层位置 width: 200 height: 100 color: "red" } MyRectangle{ 
     //子文件名称 x:200 y:200 z:0 //Z轴控制该元素图层位置 width: 200 //主函数和子函数都可以定义 height: 100 myComponent:com myTopMargin: 10 //子函数中定义的变量可在主函数中传递参数 myBottomMargin: 10 //上下边框距离 Component.onCompleted: { 
     // newinnerRectColor = "red" // newinnerRect.width = 200 console.log(rectWidth) } } }

MyRectangle

import QtQuick 2.0 Rectangle{ 
     id:borderRect //矩形元素id property 可以声明基本类型，也可以声明组件，在外部需要使用时在进行参数传递 property int myTopMargin : 0 //自定义上边框，可在主函数中调用 property int myBottomMargin : 0 property real myReal: 0.0 property string myString: "black" property color myColor: "black" property url myUrl: "qrc:/01.jpg" required 外部设置才能使用，readonly设置为只读不能修改 required property Component myComponent property Rectangle myRectangle property var myVar: ["123",3,4] //可以装载不同类型 封装一个组件，让外部只能访问不能修改 readonly property int rectWidth: width 命名新id实现外部引用,某一属性也可以引用innerRect.color property alias newinnerRect: innerRect color: "black" Rectangle{ 
     Loader { 
     id:loader sourceComponent: myComponent } id:innerRect //矩形元素id color: "yellow" anchors.fill:parent //填充整个父类窗口 anchors.topMargin: myTopMargin //距离上边框 anchors.bottomMargin: myBottomMargin //距离下边框 anchors.leftMargin: 5 //距离左边框0 anchors.rightMargin: 5 //距离右边框0 } }

10.ListView组件

1）可以通过model 和delegate实现对控件生成次数和生成内容的控制

ListView{ 
     width: 180 height: 200 // model: 3 //数字-控制绘制几次 model : ["Button","Rectangle","MouseArea","CheckBox"] //数组数量为 spacing: 10 //绘制每一个控件的间隔 delegate: Button { 
     //控制每一项如何绘制，Text-文本、Button-按钮 text: modelData } }

2）ListElement生成复杂控件（过低版本无法使用import QtQuick 2.5）

ListView{ 
     width: 180 height: 200 model: ListModel{ 
     ListElement{ 
     //可以生成复杂listview name:"Bill Smith" number:"555 3246" myValue:111 } ListElement{ 
     name:"vdill gbith" number:"vf3246" myValue:222 } ListElement{ 
     name:"vsill svith" number:"er3246" myValue:333 } } spacing: 10 //绘制每一个控件的间隔 delegate: Button { 
     //控制每一项如何绘制，Text-文本、Button-按钮 text: name + " " + number + " " + myValue //将每一项内容复制到文本 } }

3）highlight生成列表背景色

import QtQuick 2.5 import QtQuick.Controls 2.5 ListView{ 
     width: 180 height: 200 id:list model: ListModel{ 
     ListElement{ 
     //可以生成复杂listview name:"Bill Smith" number:"555 3246" myValue:111 } ListElement{ 
     name:"vdill gbith" number:"vf3246" myValue:222 } ListElement{ 
     name:"vsill svith" number:"er3246" myValue:333 } } spacing: 20 //绘制每一个控件的间隔 // HorizontalFlick-横向回弹效果,HorizontalAndVerticalFlick-横向、纵向都有回弹效果 flickableDirection: Flickable.HorizontalFlick highlight: Rectangle{ 
     //绘制一个背景色 color: "grey" //颜色 radius: 5 //圆角度 } delegate: Rectangle { 
     //控制每一项如何绘制，Text-文本、Button-按钮 color: "transparent" //关闭背景色 width:list.width height: 50 Text { 
     id: txt text: name //将每一项内容复制到文本 } MouseArea{ 
     //设置一个鼠标区域 anchors.fill: parent onClicked: { 
     currentIndex = index //将index值赋给currentIndex实现点击后背景色改变 } } } }

11.Repeater 组件

 Repeater{ 
     // model: 3 //构建三个按钮，模型为数字、代表循环几次 model : ["Button","Rectangle","MouseArea","CheckBox"] //数组数量为循环次数，内容被下方modelData调用  Button{ 
     y: index * 50 width: 100 height: 40 text: modelData //调用model数组中的数据 } }

免责声明：本站所有文章内容,图片，视频等均是来源于用户投稿和互联网及文摘转载整编而成，不代表本站观点，不承担相关法律责任。其著作权各归其原作者或其出版社所有。如发现本站有涉嫌抄袭侵权/违法违规的内容,侵犯到您的权益，请在线联系站长,一经查实,本站将立刻删除。本文来自网络,若有侵权，请联系删除，如若转载，请注明出处：https://haidsoft.com/114267.html

QT学习笔记-qml开发