当前位置:网站首页>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
边栏推荐
- Find tags in prefab in unity editing mode
- Imitate the choice of enterprise wechat conference room
- three. JS create cool snow effect
- 预售17.9万,恒驰5能不能火?产品力在线,就看怎么卖
- 记录Servlet学习时的一次乱码
- ATM system
- Pycharm terminal enables virtual environment
- Master this set of refined Android advanced interview questions analysis, oppoandroid interview questions
- OpenGL personal notes
- JS中null NaN undefined这三个值有什么区别
猜你喜欢
随机推荐
Module VI
LeetCode 1696. 跳跃游戏 VI 每日一题
Binary search tree (basic operation)
Set the route and optimize the URL in thinkphp3.2.3
一文读懂数仓中的pg_stat
打造All-in-One应用开发平台,轻流树立无代码行业标杆
Ray and OBB intersection detection
数据中台落地实施之法
【医学分割】attention-unet
Inner monologue of accidental promotion
LeetCode 1031. 两个非重叠子数组的最大和 每日一题
射线与OBB相交检测
[PHP] PHP interface inheritance and interface multi inheritance principle and implementation method
【Vulnhub靶场】THALES:1
three. JS create cool snow effect
【图像传感器】相关双采样CDS
最新Android高级面试题汇总,Android面试题及答案
[Android -- data storage] use SQLite to store data
[designmode] flyweight pattern
LeetCode 1043. 分隔数组以得到最大和 每日一题