目录

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-教程

版本信息

本文是转载文章,点击查看原文
如有侵权,请联系 xyy@jishuzhan.net 删除
相关推荐
加瓦点灯2 分钟前
观察者模式:解耦对象间的依赖关系
开发语言·javascript·观察者模式
愚润求学5 分钟前
Linux开发工具——apt
linux·服务器·开发语言
程序员小赵同学6 分钟前
AI Agent设计模式二:Parallelization
开发语言·python·设计模式
时光话12 分钟前
Lua:第1-4部分 语言基础
开发语言·lua
计算机毕设定制辅导-无忧学长14 分钟前
TDengine 数据写入优化:协议选择与批量操作(一)
网络·数据库·tdengine
Mr.洛 白16 分钟前
OpenEuler/CentOS一键部署OpenGauss数据库教程(脚本+视频)
数据库·opengauss·gaussdb·国产数据库安装·安装脚本
欧宸雅17 分钟前
Clojure语言的持续集成
开发语言·后端·golang
炬火初现30 分钟前
redis-cpp-cpp如何使用lua脚本
数据库·redis·lua
hxung30 分钟前
Redis 数据类型详解
数据库·redis·缓存
胡斌附体33 分钟前
qt tcpsocket编程遇到的并发问题
开发语言·网络·qt·并发编程·tcpsocket