创建界面

本节看完你将学会：

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. 选择File > New Project > General > Qt Quick Application - Empty > Choose

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

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

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

4. 确认无误后选择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样式和一些特定于样式的参数。


刚创建好的工程目录
完成后的工程目录

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



如果没有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按钮可以进行预览。


创建自定义控件
接下来需要绘制自定义的输入框和按钮。
自定义输入框
使用向导模板创建按钮:


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






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


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


设置输入框样式
现在可以根据自己的喜好修改EntryField组件的属性。要将更改应用于所有EntryField实例，必须在EntryField.ui.qml文件中进行更改。
自定义按钮向导模板添加了一个正常状态和一个按下状态，以在单击按钮时更改按钮背景和文本颜色。现在需要更改所有状态的颜色。对处于基状态的按钮进行更改时，这些更改将自动应用于其他状态。但是，在正常状态或关闭状态下显式更改的属性值不会自动更改，必须将它们重置为基状态或在该状态下分别设置它们。
更改按钮属性值:


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


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


在Control中取消Hover


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


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


设置Border Color为#ffffff


设置Radius为50


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


在Character > Font选择Arial字体


设置Size为34px


设置Text color为#ffffff


在Alignment H设置为Left


在Padding部分设置Horizontal > Left为50


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


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


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


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


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


在Control中取消Hover


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


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


设置Radius为50


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


在Character > Font选择Arial字体


设置Size为34px


设置Text color颜色为#41cd52


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


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


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


创建完成这两个自定义组件后,在Library > Components > MY COMPONENTS中可以看到。

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


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


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






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


将Component > ID设置为username


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


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


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


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


在UI中添加PushButton


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


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


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


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


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




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




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