QML是Qt推出的Qt Quick技术的一部分,是一种新增的简便易学的语言。QML是一种陈述性语言,用来描述一个程序的用户界面:无论是什么样子,以及它如何表现。在QML,一个用户界面被指定为具有属性的对象树。
windows控件
import QtQuick 2.15
import QtQuick.Window 2.15
import QtQuick.Controls 2.15
Window {
width: 1000 //宽度
height: 780 //高度
visible: true //可见
title: qsTr("this is a test ") //窗口标题
x:400 //坐标 x y 相对于父控件 顶层相对于windows桌面 左上为0,0
y:80
//控制最大最小的宽度,高度 可以
minimumWidth: 1000
minimumHeight: 780
maximumWidth: 1200
maximumHeight: 780
//opacity:0.5 控件透明度
onWidthChanged: {
console.log(" width ",width) //打印日志 当宽度发送变化时 自动接收信号槽函数 widthChanged()
}
onActiveFocusItemChanged: {
console.log("focus object ",activeFocusItem.objectName)
}
//控件button
Button {
id:btn1
objectName: "btn1"
x:100
y:100
width: 50
height: 50
background: Rectangle{
border.color: btn1.focus ? "blue":"black"
}
onClicked:
{
console.log("btn1 click")
}
Keys.onLeftPressed: {
btn1.focus= true
}
}
Button {
id:btn2
objectName: "btn2"
x:200
y:100
width: 50
height: 50
background: Rectangle{
border.color: btn2.focus ? "blue":"black"
}
onClicked:
{
console.log("btn2 click")
}
Keys.onRightPressed: {
btn1.focus= true
}
}
}
调试方法:通过qmlscence 即可预览画面
通过 工具-选项-环境-键盘,输入 qmlscence .添加快捷键。比如 Crtl+Shirt+Z.即可通过快捷键调用预览当前qml画面。非常方便,快捷