当前位置:网站首页>QML beginner
QML beginner
2022-07-07 16:58:00 【God port】
One 、 New projects
1. choice Qt Quick Application Empty
2. Name it QmlDemoa, Then all for the next step
3. At this point, the project directory and demonstration effect
Two 、 Create another component
1. choice QtQuick UI File
Wrong English type here :component1
2. The structure of the current project
3. Design new qml We can directly use qml.ui Drag and drop design
In this demonstration, I will add it in the form of code .
Generated in the project directory component.qml and component1.ui.qml In fact, both can be used ,qml You can call ui Any element in , If you are directly in ui Drag and drop , Will automatically generate code in ui.qml. Of course, our code can be written in any file , It's all about personal preference .
3、 ... and 、 Code
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
{
}
}
Four 、 summary
such , A simple qml Application setup is complete , Component development is now a popular way of Internet , Once learned VUE3 Large scale application , The advantage is better coupling , It is convenient for later code maintenance , After all, the declaration cycle of a software program ,20% Time in development ,80% Time for maintenance .
5、 ... and 、 design sketch
demo Download address :https://download.csdn.net/download/qq_38491692/85448974
边栏推荐
- 射线与OBB相交检测
- As an Android Developer programmer, Android advanced interview
- LeetCode 213. 打家劫舍 II 每日一题
- 模拟Servlet的本质
- 字节跳动Android面试,知识点总结+面试题解析
- dapp丨defi丨nft丨lp单双币流动性挖矿系统开发详细说明及源码
- 打造All-in-One应用开发平台,轻流树立无代码行业标杆
- Spark Tuning (III): persistence reduces secondary queries
- DNS 系列(一):为什么更新了 DNS 记录不生效?
- 面试题 01.02. 判定是否互为字符重排-辅助数组算法
猜你喜欢
Vs2019 configuration matrix library eigen
A tour of gRPC:03 - proto序列化/反序列化
如何选择合适的自动化测试工具?
Three. JS series (1): API structure diagram-1
最新2022年Android大厂面试经验,安卓View+Handler+Binder
The team of East China Normal University proposed the systematic molecular implementation of convolutional neural network with DNA regulation circuit
Temperature sensor chip used in temperature detector
使用JSON.stringify()去实现深拷贝,要小心哦,可能有巨坑
QT中自定义控件的创建到封装到工具栏过程(二):自定义控件封装到工具栏
最新Android高级面试题汇总,Android面试题及答案
随机推荐
typescript ts基础知识之tsconfig.json配置选项
3000 words speak through HTTP cache
[designmode] template method pattern
ByteDance Android gold, silver and four analysis, Android interview question app
LeetCode 300. 最长递增子序列 每日一题
谎牛计数(春季每日一题 53)
node:504报错
LocalStorage和SessionStorage
Opencv configuration 2019vs
二叉搜索树(特性篇)
Prometheus API deletes all data of a specified job
华东师大团队提出,具有DNA调控电路的卷积神经网络的系统分子实现
Pycharm terminal enables virtual environment
射线与OBB相交检测
LeetCode 1031. 两个非重叠子数组的最大和 每日一题
AutoLISP series (2): function function 2
Laravel service provider instance tutorial - create a service provider test instance
typescript ts 基础知识之类型声明
LeetCode 1626. 无矛盾的最佳球队 每日一题
QT视频传输