当前位置:网站首页>QML初学
QML初学
2022-07-07 15:32:00 【God港】
一、新建项目
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
边栏推荐
猜你喜欢
Temperature sensor chip used in temperature detector
记录Servlet学习时的一次乱码
爬虫(17) - 面试(2) | 爬虫面试题库
[Android -- data storage] use SQLite to store data
无法将“pip”项识别为 cmdlet、函数、脚本文件或可运行程序的名称
【医学分割】attention-unet
Cesium(3):ThirdParty/zip. js
Lowcode: four ways to help transportation companies enhance supply chain management
Binary search tree (features)
Introduction and use of gateway
随机推荐
OpenGL personal notes
Interface oriented programming
QT中自定义控件的创建到封装到工具栏过程(二):自定义控件封装到工具栏
水平垂直居中 方法 和兼容
Module VI
【MySql进阶】索引详解(一):索引数据页结构
LeetCode 120. 三角形最小路径和 每日一题
JS中null NaN undefined这三个值有什么区别
node:504报错
【图像传感器】相关双采样CDS
LeetCode 1626. 无矛盾的最佳球队 每日一题
01tire+ chain forward star +dfs+ greedy exercise one
网关Gateway的介绍与使用
Vs2019 configuration matrix library eigen
Sort out several important Android knowledge and advanced Android development interview questions
【C 语言】 题集 of Ⅹ
Personal notes of graphics (1)
最新Android高级面试题汇总,Android面试题及答案
Detailed explanation of several ideas for implementing timed tasks in PHP
Lowcode: four ways to help transportation companies enhance supply chain management