用一篇短文带你进入QML的精彩世界转载本文请联系老吴嵌入式游公众号。大家好，我是老吴。今天，我将通过几个小例子，为大家快速介绍一下QML编程。0.QML是什么？QML是一种用于描述应用程序用户界面的声明性编程语言，而QtQuick是QML应用程序的标准库。我为什么选择学习QML？便于使用;可读性高；很多学习资料，有各种文档和例子；跨平台；性能还不错，流畅度也不错。1.如何创建QML应用程序？例如：在QtCreator中，点击：->File->NewFileorProject->Applications->QtQuickApplication点击??next直到完成。修改main.qml://filemain.qmlimportQtQuick2.12importQtQuick.Window2.12Window{visible:truewidth:320height:240title:qsTr("HelloWorld")Rectangle{width:320height:240color:"green"Text{anchors.centerIn:parenttext:"Hello,World!"}}}这样就完成了您的第一个QML程序，它显示“HelloWorld!”在一个绿色的长方形上。运行效果：这里的Window、Rectangle、Text都是QML中的类型，术语是QMLType。了解有关QML类型的更多信息：QML类型系统QML基本类型QML对象类型2.使用Qt快速控件什么是Qt快速控件？QtQuickControls是一组用于在QtQuick中构建完整界面的控件。例如：//filemain.qmlimportQtQuick2.12importQtQuick.Controls2.12ApplicationWindow{visible:truetitle:qsTr("HelloWorld")width:320height:240menuBar:MenuBar{Menu{title:qsTr("File")MenuItem{text:qsTr("&Open")onTriggered:console.log("Openactiontriggered");}MenuItem{text:qsTr("Exit")onTriggered:Qt.quit();}}}Button{text:qsTr("HelloWorld")锚点。horizo??ntalCenter:parent.horizo??ntalCenteranchors.verticalCenter:parent.verticalCenter}}这里，ApplicationWindow、MenuBar、Button首先是QMLType，是QtQuickControls中提供的控件。ApplicationWindow是一个通用的窗口控件；MenuBar是一个菜单栏控件；Button是一个按钮控件；运行效果：详细了解QtQuickControls：QtQuickLayouts-BasicExampleQtQuickControls-Gallery3。使用QML处理用户输入以设计大型界面优点是它允许设计人员使用简单的JavaScript表达式定义应用程序对事件的反应。在QML中，我们将事件称为信号，这些信号由信号处理程序处理。例如：//filemain.qmlApplicationWindow{...Rectangle{width:100height:100color:"red"anchors.verticalCenter:parent.verticalCenterText{anchors.centerIn:parenttext:"Hello,World!"}TapHandler{onTapped:parent.color="green"}}}运行效果：TapHandler用于响应触摸屏或鼠标点击，这里我们用它来处理绿色方块的点击事件。事件处理更进一步：SignalandHandlerEventSystem4.属性绑定什么是属性绑定？对象及其属性构成了QML文件中定义的图形界面的基础。QML允许属性以各种方式相互绑定，从而实现高度动态的用户界面。例如：//filemain.qmlApplicationWindow{Rectangle{width:100height:100color:"red"Rectangle{width:parent.width/2height:parent.height/2color:"green"}}}运行效果：子矩形的长度和宽度绑定到父矩形的几何形状。如果父矩形的高度和宽度发生变化，子矩形的高度和宽度将由于属性绑定而自动更新。5.自定义QML类型每个QML文件都隐式定义了一个QML类型，可以在其他QML文件中重复使用。例如：新建一个QML文件MessageLabel.qml://fileMessageLabel.qmlimportQtQuick2.12Rectangle{height:50propertystringmessage:"debugmessage"propertyvarmsgType:["debug","warning","critical"]color:"black"Column{anchors.fill:parentpadding:5.0spacing:2Text{text:msgType.toString().toUpperCase()+":"font.bold:msgType=="critical"font.family:"TerminalRegular"color:msgType==="警告”||msgType==="critical"?"red":"yellow"ColorAnimationoncolor{running:msgType=="critical"from:"red"to:"black"duration:1000loops:msgType="critical"?Animation.Infinite:1}}Text{text:messagecolor:msgType==="warning"||msgType==="critical"?"red":"yellow"font.family:"TerminalRegular"}}}可以理解这里为我们创建了一个名为MessageLabel的控件。引用MessageLabel://filemain.qmlWindow{...Column{...MessageLabel{width:parent.width-2msgType:"debug"}MessageLabel{width:parent.width-2message:"Thisisawarning!"msgType:"warning"}MessageLabel{width:parent.width-2message:"Acriticalwarning!"msgType:"critical"}}}运行效果：我们方便地构造了一个名为MessageLabel的控件来实现不同级别的日志打印。至此，相信你已经进入了QML编程的世界，请开始你自己的探索之旅吧。
