QML Windows介绍
一、QML是什么
QML介绍:QML是一种描述性的脚本编程语言,通俗来讲就是我们来描述一个东西长什么样子,可以干什么。
文件格式:.qml结尾
语法格式:类似JSON语法
二、QML优点
使用 QML 开发界面主要有以下几个优点:
1) QML 非常灵活,可以做出非常炫酷的效果。
2) QML 是标记语言,见名知意,非常容易编写和阅读,大大提高了开发和维护效率。
3) QML 界面简洁大气,有很多动画,适合移动端。
4) 不同平台下的 QML 使用相同的渲染机制,界面效果一致,不会随操作系统的不同而变化。
三、QML怎么用
代码
import QtQuick 2.9
import QtQuick.Window 2.2
import QtQuick.Controls 2.5
Window {
visible: true
width: 640
height: 480
title: qsTr("Hello World")
//x:200
//y:200 //修改控件坐标
minimumWidth: 500
minimumHeight: 400
maximumWidth: 600
maximumHeight: 500 //修改最小和最大的宽度和高度
//opacity: 0.5 //0-1 设置窗口透明度
Button{
id:btn1
width: 30
height: 30
focus: true
objectName: "btn1"
background: Rectangle{//设置一下边框颜色,边框颜色会根据是否有焦点进行变换
border.color: btn1.focus ? "red" : "black"
}
//写一个点击事件,打印输出
onClicked: {
console.log("btn1 clicked")
}
//键盘事件如果我们按下了键盘右键就把当前焦点移动到btn2上
Keys.onRightPressed: {
btn2.focus = true
}
}
Button{
id:btn2
x:100
width: 30
height: 30
objectName: "btn2"
background: Rectangle{//设置一下边框颜色,边框颜色会根据是否有焦点进行变换
border.color: btn2.focus ? "red" : "black"
}
onClicked: {
console.log("btn2 clicked")
}
//键盘事件如果我们按下了键盘左键就把当前焦点移动到btn1上
Keys.onLeftPressed: {
btn1.focus = true
}
}
}
四、Item和Rectangle
Rectangle:通常是用来绘制一个矩形框
MouseArea:是不可见的项目,通常与可见的item结合使用,以便为item提供鼠标事件处理。 通过有效地充当代理,在MouseArea的item中,包含鼠标处理逻辑
4.1 Item属性
Rectangle{ //通常是用来绘制一个矩形框
x:100
y:100
//z: 1 //控制当前控件显示顺序
width: 100
height: 100
color: "black"
focus: true //当前控件是否有焦点
MouseArea{ //鼠标点击焦点控件打印
anchors.fill: parent
onClicked: {
console.log("on cliecked")
}
}
Keys.onReturnPressed: //按下回车打印
console.log("enter cliecked")
}
anchors.fill:意思是填充在哪一个控件当中
Rectangle{
id:rect1
anchors.fill: parent //anchors.fill意思是填充在哪一个控件当中
//width: 100
//height: 50
color: "black"
}
anchors.left:当前控件左边
anchors.leftMargin:控制左侧距离
例:使两个重叠方框对齐
Rectangle{
id:rect1
width: 100
height: 50
color: "black"
}
Rectangle{
id:rect2
width: 100
height: 50
anchors.left: rect1.right //当前控件的左边等rect1的右边
anchors.leftMargin: 20 //控制距离
color: "black"
}
anchors.centerIn: 设置控件居中于父控件
//设置方框居中于父控件
Rectangle{
width: 100
height: 50
color: "black"
anchors.centerIn: parent
}
anchors.horizontalCenter: parent.horizontalCenter //调整 横向设置居中
anchors.verticalCenter: parent.verticalCenter //调整 纵向居中
Rectangle{
width: 100
height: 50
color: "black"
//anchors.centerIn: parent
anchors.horizontalCenter: parent.horizontalCenter //调整 横向设置居中
}
rotation: 90 //设置控件旋转
scale: 2 //进行控件放大缩小
Rectangle{
width: 100
height: 50
color: "black"
rotation: 90 //设置控件旋转
scale: 2 //进行控件放大缩小
}
4.2 Rectangle属性
antialiasing: true //抗锯齿属性,使控件显示更加圆滑,默认显示的就是true
border.width: 2 //border属性控制外边框 margin属性控制内边框
radius: 15 //调整圆角弧度
gradient: Gradient //做一个颜色层次变换的效果
Rectangle{
width: 100
height: 50
color: "black"
antialiasing: true //抗锯齿属性,使控件显示更加圆滑,默认显示的就是true
border.width: 2 //border属性控制外边框 margin属性控制内边框
border.color: "red"
radius: 15 //调整圆角弧度
gradient: Gradient{ //做一个颜色层次变换的效果
GradientStop{ position: 0.0; color: "lights teelblue"}
GradientStop{ position: 1.0; color: "blue"}
}
//rotation: 90 //设置控件旋转
//scale: 2 //进行控件放大缩小
}
自定义边框Rectangle
新添加qml file文件MyRectangle.qml(注意新添加的文件命名的时候首字母一定要大写)
import QtQuick 2.0
Rectangle{
id:borderRect
width: 200
height: 100
color: "black" //边框颜色
Rectangle{
id:innerRect
color: "blue"
anchors.fill: parent
anchors.topMargin: 0 //调整这几个数值就能改变对应边框颜色
anchors.bottomMargin: 0
anchors.leftMargin: 0
anchors.rightMargin: 0
}
}
//以上可以修改为对属性进行开放来设置 修改后内容为
import QtQuick 2.0
Rectangle{
id:borderRect
property int myTopMargin: 0
property int myBottomMargin: 0
property int myLeftMargin: 0
property int myRightMargin: 0
color: "black"
Rectangle{
id:innerRect
color: "blue"
anchors.fill: parent
anchors.topMargin: myTopMargin
anchors.bottomMargin: myBottomMargin
anchors.leftMargin: myLeftMargin
anchors.rightMargin: myRightMargin
}
}
main.qml里面进行调用
import QtQuick 2.9
import QtQuick.Window 2.2
import QtQuick.Controls 2.5
Window {
visible: true
width: 640
height: 480
title: qsTr("Hello World")
MyRectangle{
x:100
y:100
}
/// 通过修改后开放的属性进行调用 修改后如下
MyRectangle{
x:100
y:100
width: 200
height: 100
//可以通过调用暴露出来的属性进行设置
myTopMargin: 10
myBottomMargin: 10
}
MyRectangle{
x:100
y:100
}
/// 通过修改后开放的属性进行调用 修改后如下
MyRectangle{
x:100
y:100
width: 200
height: 100
//可以通过调用暴露出来的属性进行设置
myTopMargin: 10
myBottomMargin: 10
}