Qt Design Studio教程(1)登录界面制作-组件

admin 2022年11月3日18:53:40评论204 views字数 5038阅读16分47秒阅读模式

创建界面

本节看完你将学会:

  1. 用Qt Design Studio创建工程

  2. 绘制自定义输入框和按钮

  3. 使用组件完成一个登录界面

前言

本节将练习使用Qt Design Studio,目标是制作一个漂亮的登录界面。使用Qt Design Studio搞Qt Quick界面真的是非常快捷,即可以像Qt Widget一样拖拉拽放置控件,又可以像画图一样随意的制作自定义控件。下图就是本节要制作的登录界面了,两个输入框和两个按钮都是制作的自定义控件。

登录界面制作-组件是系列教程中的第一节,说明如何使用Qt Design Studio使用一些基本的UI组件(如页面、按钮和输入框)创建一个简单的UI。本节描述了如何使用Qt Design Studio向导模板来创建项目和按钮UI控件,以及如何修改向导模板生成的文件来构建UI。

Qt Design Studio教程(1)登录界面制作-组件

创建工程

首先要进行Qt Design Studio工程的创建。

Qt Design Studio教程(1)登录界面制作-组件

  1. 选择File > New Project > General > Qt Quick Application - Empty > Choose

  2. 在Details栏输入工程名称和存放位置。

这里需要注意的是,工程名称一旦确认后期更改会非常麻烦,因此最好确认以后再输入

  1. 选择版本和样式,我们这里选择Qt6,默认样式即可

  2. 确认无误后选择Create

工程创建完成后会自动生成一些文件夹和文件。这里对其进行解释。

  • Loginui1.qmlproject: 项目文件定义项目文件夹中的所有组件、JavaScript和图像文件都属于项目。

import QmlProject
Project { //界面的主文件 mainFile: "content/App.qml"
/* Include .qml, .js, and image files from current directory and subdirectories */ QmlFiles { directory: "content" }
QmlFiles { directory: "imports" } //包含js代码的文件夹 JavaScriptFiles { directory: "content" } //包含js代码的文件夹 JavaScriptFiles { directory: "imports" } //包含图片文件的文件夹 ImageFiles { directory: "images" } //conf文件指定所选的UI样式和一些特定于样式的参数。 Files { filter: "*.conf" files: ["qtquickcontrols2.conf"] } //qmldir文件 Files { filter: "qmldir" directory: "." } //文字集文件 Files { filter: "*.ttf;*.otf" } //音频文件 Files { filter: "*.wav;*.mp3" } //视频文件 Files { filter: "*.mp4" } //OpenGL着色文件 Files { filter: "*.glsl;*.glslv;*.glslf;*.vsh;*.fsh;*.vert;*.frag" } //3d模型文件 Files { filter: "*.mesh" directory: "asset_imports" } //环境配置 Environment { QT_QUICK_CONTROLS_CONF: "qtquickcontrols2.conf" QT_AUTO_SCREEN_SCALE_FACTOR: "1" QT_LOGGING_RULES: "qt.qml.connections=false" QT_ENABLE_HIGHDPI_SCALING: "0" /* Useful for debugging QSG_VISUALIZE=batches QSG_VISUALIZE=clip QSG_VISUALIZE=changes QSG_VISUALIZE=overdraw */ }
qt6Project: true
/* List of plugin directories passed to QML runtime */ importPaths: [ "imports", "asset_imports" ]
/* Required for deployment */ targetDirectory: "/opt/Loginui1"
qdsVersion: "3.0"
/* If any modules the project imports require widgets (e.g. QtCharts), widgetApp must be true */ widgetApp: true
multilanguageSupport: true supportedLanguages: ["en"] primaryLanguage: "en"
}


  • content文件夹中包含了项目需要的.ui.qml文件。其中App.qml是主文件,用来加载和展示Screen01.ui.qml文件所绘制的组件。Screen01.ui.qml是主窗口文件,EntryField.ui.qml和PushButton.ui.qml是自定义的输入框和按钮控件。

  • imports文件夹中包含Loginui1文件夹,Loginui1文件夹中包含了四个配置文件。

  • conf文件指定所选的UI样式和一些特定于样式的参数。

刚创建好的工程目录

完成后的工程目录



Qt Design Studio教程(1)登录界面制作-组件

Qt Design Studio教程(1)登录界面制作-组件

创建主页面

双击Screen01.ui.qml文件会跳转到UI Design窗口,将Properties视窗中的GEOMETRY-2D中的Size改变为720W,1280H:

Qt Design Studio教程(1)登录界面制作-组件

如果没有Form Editor视窗,点击View->Views可以添加需要的视窗。Libray视窗、Navigator视窗、Form Editor视窗和Properties视窗是必须添加的。

添加图片资源

本节需要使用两张图片,一张是Qt的logo图片,另一张是背景图片。将这两张图片放在images文件夹中,images文件夹与Loginui1.qmlproject工程文件放在同一目录下。

然后将Loginui1.qmlproject文件中的ImageFiles文件下的默认content文件夹改为images文件夹。此时项目文件列表中就添加了两张图片。

放置图片资源

将图片资源添加完成以后,双击Screen01.ui.qml文件,点击Library中的Assets就可以看到添加的图片了。

  • 将adventurePage.jpg拖拽到Navigator的Rectangle

  • 再将Qt logo拖拽到Navigator的Rectangle

  • 点击Text组件,再点击Navigator的⬇向下按钮,将Text放置在最下方

Navigator中的组件排列方式与展示层级有关,最新添加的资源在最下方,展示在页面的最上层

编辑Text

  • 点击Text,设置Component > ID为tagLine

  • 设置Character > Text为Are you ready to explore?

  • 设置Font为Arial

  • 设置Size为50px

  • 设置Text color为#ffffff

  • 设置Size为541W,78H

编辑完成后,可以点击Form Editor上方的Show Live Preview按钮可以进行预览。

Qt Design Studio教程(1)登录界面制作-组件

创建自定义控件

接下来需要绘制自定义的输入框和按钮。

自定义输入框

使用向导模板创建按钮:

  1. 选择File > New File > Qt Quick Controls > Custom Button > Choose

Qt Design Studio教程(1)登录界面制作-组件

  1. 在Component name字段中,在按钮组件输入一个名称:EntryField

  2. 选择Finish(或在macOS上完成)来创建按钮UI文件EntryField.ui.qml

设置输入框样式

现在可以根据自己的喜好修改EntryField组件的属性。要将更改应用于所有EntryField实例,必须在EntryField.ui.qml文件中进行更改。

自定义按钮向导模板添加了一个正常状态和一个按下状态,以在单击按钮时更改按钮背景和文本颜色。现在需要更改所有状态的颜色。对处于基状态的按钮进行更改时,这些更改将自动应用于其他状态。但是,在正常状态或关闭状态下显式更改的属性值不会自动更改,必须将它们重置为基状态或在该状态下分别设置它们。

更改按钮属性值:

  1. 在Navigator中选择control以显示其属性Properties

  2. 在Geometry - 2D > Size中设置500W,100H

  3. 在Control中取消Hover

  4. 在Navigator中选择background以显示其属性Properties

  5. 在Rectangle > Fill color设置其颜色为#28e7e7e7

  6. 设置Border Color为#ffffff

  7. 设置Radius为50

  8. 在Navigator中选择text以显示其属性Properties

  9. 在Character > Font选择Arial字体

  10. 设置Size为34px

  11. 设置Text color为#ffffff

  12. 在Alignment H设置为Left

  13. 在Padding部分设置Horizontal > Left为50

  14. 在States视图中,选择normal state并根据需要重复背景颜色和文本属性的更改

  15. 选择File > Save或按Ctrl+S保存更改

自定义按钮

按照创建自定义输入框的方式创建一个自定义按钮。在Component name字段中,在按钮组件输入一个名称:PushButton。要使更改应用于所有PushButton实例,可以在PushButton.ui.qml文件中进行更改。

更改按钮属性值:

  1. 在Navigator中选择control以显示其属性Properties

  2. 在Geometry - 2D > Size中设置500W,100H

  3. 在Control中取消Hover

  4. 在Navigator中选择background以显示其属性Properties

  5. 在Rectangle > Border color设置其颜色为#41cd52

  6. 设置Radius为50

  7. 在Navigator中选择text以显示其属性Properties

  8. 在Character > Font选择Arial字体

  9. 设置Size为34px

  10. 设置Text color颜色为#41cd52

  11. 在States视图中,选择normal state并根据需要重复更改

  12. 重复按下状态。将Rectangle > Fill color设置颜色为绿色(#41cd52),当按钮被按下时,按钮背景变成绿色。同样,将Text > Character > Text color设置文本颜色为白色(#ffffff)

  13. 选择File > Save或按Ctrl+S保存更改

Qt Design Studio教程(1)登录界面制作-组件创建完成这两个自定义组件后,在Library > Components > MY COMPONENTS中可以看到。

添加自定义组件

现在可以向主界面中添加自定义组件,这个操作称为"实例化"

在UI中添加EntryField

  1. 双击Screen01.ui.qml跳转到Form Editor视窗

  2. 从Library > Components > My Components拖拽EntryField组件到Navigator中

Qt Design Studio教程(1)登录界面制作-组件

  1. 在Navigator中选择第一个EntryField以显示其属性Properties

  2. 将Component > ID设置为username

  3. 将Button Content > Text设置为Username or Email,并选择tr按钮设置为可翻译

  4. 选择第二个EntryField实例,并将其ID更改为password,文本更改为Password。同样,将文本标记为可翻译。

  5. 在Form Editor中可以拖动文字输入框摆放其位置

  6. 选择File > Save或按Ctrl+S保存更改

在UI中添加PushButton

  1. 与上述在UI中添加EntryField方法相同,拖拽好两个PushButton到Navigator中

  2. 选择第一个PushButton实例,并将其ID更改为login,并将文本标签更改为Continue。同样,将文本标记为可翻译。

  3. 选择第二个PushButton实例,并将其ID更改为createAccount,并将文本标签更改为Create Account。同样,将文本标记为可翻译。

  4. 选择File > Save或按Ctrl+S保存更改

至此就完成了整个登录界面的创建。

Qt Design Studio教程(1)登录界面制作-组件


作者:何名取
链接:https://juejin.cn/post/7101480677488459806
来源:稀土掘金
著作权归作者所有。商业转载请联系作者获得授权,非商业转载请注明出处。


原文始发于微信公众号(汇编语言):Qt Design Studio教程(1)登录界面制作-组件

  • 左青龙
  • 微信扫一扫
  • weinxin
  • 右白虎
  • 微信扫一扫
  • weinxin
admin
  • 本文由 发表于 2022年11月3日18:53:40
  • 转载请保留本文链接(CN-SEC中文网:感谢原作者辛苦付出):
                   Qt Design Studio教程(1)登录界面制作-组件http://cn-sec.com/archives/1388348.html

发表评论

匿名网友 填写信息