一、新建项目
1.选择Qt Quick Application Empty
2.命名为QmlDemoa,然后全部为下一步
3.此时工程目录和演示效果
二、新建另一个组件
1.选择QtQuick UI File
这里英文打错了:component1
2.当前工程的结构
3.设计新的qml的内容我们可以直接用qml.ui进行拖拽设计
本次演示我就用代码的方式进行添加。
工程目录中生成的component.qml和component1.ui.qml两个其实都可以用,qml可以调用ui中的任意元素,如果直接在ui中拖拽,会自动生成代码在ui.qml。当然我们代码可以写在任意文件,全凭个人喜好。
三、代码
component1.qml
import QtQuick 2.4
Rectangle {
property alias mouseArea:mouseArea
property alias topRect:topRect//define the property name
width: 360
height: 360//set form's width and height
MouseArea{
id:mouseArea//name
anchors.fill: parent
}
//the first rectangle
Rectangle{
rotation:45//define the rotation angle
//set the position,size and color
x:40
y:50
width: 100
height: 100
color: "blue"
}
//the second rectangle
Rectangle{
id:topRect//id
opacity: 0.5
scale: 0.8 //scale the size
x:135
y:60
width: 100
height: 100
radius: 8
gradient: Gradient{
GradientStop{position: 0.0;color:"yellow"}
GradientStop{position:1.0;color: "red"}
}
border{width: 3;color: "green"}
}
}
main.qml
import QtQuick 2.9
import QtQuick.Window 2.2
Window {
visible: true
width: 640
height: 480
title: qsTr("Hello World")
Component1
{
}
}
四、总结
这样,一个简单的qml应用程序搭建完成,组件式开发现在事互联网很盛行的方式,曾经学习的VUE3大规模运用,好处在于耦合度较好,便于后期代码的维护,毕竟一个软件程序的声明周期,20%的时间在开发,80%的时间在维护。
五、效果图
demo下载地址:https://download.csdn.net/download/qq_38491692/85448974