Qt Quick 教程(一)

文章目录

1.Qt Quick

  • Qt Quick 是一种现代的用户界面技术,将声明性用户界面设计和命令性编程逻辑分开。 它是 Qt 框架内的一个应用框架。 它提供了一种构建自定义的,高度动态的,具有流畅过渡和效果的用户界面的方式,这种方式在移动设备中尤为常见。
  • Qt Quick 是与 Qt Widgets 分离的模块,该模块针对传统的桌面应用。 Qt Quick 基于 QML 声明性语言。

2.QML

QML 是一种用户界面规范和编程语言。 它允许创建流畅的动画和视觉吸引力的应用。 QML 提供了一种高度可读的,声明性的,类似于 JSON 的语法,并支持将命令性 JavaScript 表达式与动态属性绑定结合在一起。QML 由元素层次构成。

3.Day01 案例

新建项目

main.qml

该代码创建一个带有居中文本的小窗口。

sh 复制代码
// 导入了必要的模块
import QtQuick 2.9
import QtQuick.Window 2.2

// Qt Quick 控件 top-level Window
Window {
    visible: true
    // 指定窗口的宽度,高度和标题
    width: 300
    height: 200
    title: "QmlApp"

    // Text控件显示文本
    Text {
        text: "Qt Quick"
        // 水平、垂直居中
        anchors.horizontalCenter: parent.horizontalCenter
        anchors.verticalCenter: parent.verticalCenter
        // font属性用于设置文本的大小
        font.pointSize: 24; font.bold: true
    }
}

退出按钮,基于上面代码添加

sh 复制代码
// 导入了必要的模块
import QtQuick 2.9
import QtQuick.Window 2.2
import QtQuick.Controls 2.15

// Qt Quick 控件 top-level Window
Window {
    visible: true
    // 指定窗口的宽度,高度和标题
    width: 300
    height: 200
    title: "QmlApp"

    // Text控件显示文本
    Text {
        id: label
        text: "Qt Quick"
        // 水平、垂直居中
        anchors.horizontalCenter: parent.horizontalCenter
        anchors.verticalCenter: parent.verticalCenter
        // font属性用于设置文本的大小
        font.pointSize: 24; font.bold: true
    }

    // 退出按钮
    Button {
        text: "Quit"
        anchors.horizontalCenter: parent.horizontalCenter
        // 相对label控件底部间距
        anchors.top: label.bottom
        anchors.topMargin: 20
        onClicked: Qt.quit()
    }
}

4.使用Qt Design Studio

上面的例子,我们是手动布局,不是很方便,使用Qt Design Studio,快捷高效。

使用该工具,我们进行界面化操作,添加了2个控件

Qt Design Studio简介

  • 让您的设计栩栩如生
  • 通过弥合设计师与开发者之间的鸿沟,将您的设计愿景转化为可运行的 UI,从而变革您的开发流程。
  • Qt Design Studio拥有丰富功能,从可定制的视觉特效到 3D 元素等等,使用户能在破纪录的时间内制作出令人惊叹的用户界面。

Qt Design Studio工具使用

参考:

https://zhuanlan.zhihu.com/p/687823588

https://blog.csdn.net/m0_37845735/article/details/128509702

https://github.com/apachecn/zetcode-zh/blob/master/docs/gui/57.md#qt-quick-教程

版本信息

相关推荐
♡喜欢做梦17 分钟前
【MySQL】深入浅出事务:保证数据一致性的核心武器
数据库·mysql
遇见你的雩风20 分钟前
MySQL的认识与基本操作
数据库·mysql
Edingbrugh.南空21 分钟前
Aerospike与Redis深度对比:从架构到性能的全方位解析
java·开发语言·spring
dblens 数据库管理和开发工具23 分钟前
MySQL新增字段DDL:锁表全解析、避坑指南与实战案例
数据库·mysql·dblens·dblens mysql·数据库连接管理
weixin_4196583124 分钟前
MySQL的基础操作
数据库·mysql
CodeCraft Studio1 小时前
借助Aspose.HTML控件,在 Python 中将 HTML 转换为 Markdown
开发语言·python·html·markdown·aspose·html转markdown·asposel.html
QQ_4376643141 小时前
C++11 右值引用 Lambda 表达式
java·开发语言·c++
aramae1 小时前
大话数据结构之<队列>
c语言·开发语言·数据结构·算法
封奚泽优1 小时前
使用Python实现单词记忆软件
开发语言·python·random·qpushbutton·qtwidgets·qtcore·qtgui
不辉放弃2 小时前
ZooKeeper 是什么?
数据库·大数据开发