持续创作，加速成长！这是我参与「掘金日新计划 · 6 月更文挑战」的第1天，点击查看活动详情

📒博客首页：何名取的个人主页 - 文章 - 掘金 (juejin.cn)
🎉欢迎关注🔎点赞👍收藏⭐️留言📝
❤️期待一起交流！
🙏作者水平很有限，如果发现错误，求告知，多谢！
🌺有问题可私信交流！！！

创建界面

本节看完你将学会：

用Qt Design Studio创建工程

绘制自定义输入框和按钮

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

前言

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

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

创建工程

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

选择File > New Project > General > Qt Quick Application - Empty > Choose
在Details栏输入工程名称和存放位置。

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

选择版本和样式，我们这里选择Qt6，默认样式即可
确认无误后选择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保存更改

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

Qt Design Studio教程（1）登录界面制作-组件