Qt Quick QML 登录界面代码学习报告

Qt Quick QML 登录界面代码学习报告

一、学习目标

本次学习基于Qt Quick QML实现一个极简无边框登录界面，核心掌握：

1. QML自定义组件的封装与调用方法
2. QML基础控件、布局、样式的基础用法
3. 无边框窗口、窗口居中、快捷键等实用功能
4. QML代码的基础结构和语法逻辑

项目包含2个核心QML文件 ：Custominput.qml（自定义输入框）、main.qml（主登录界面），下面逐段小白友好式拆解代码。

二、代码逐段详细解析

（一）Custominput.qml：自定义输入框组件

这个文件是通用输入框封装，把输入框的样式写好后，主界面直接调用即可，不用重复写样式，是QML「组件复用」的基础。

import QtQuick 2.0
import QtQuick.Controls 2.12

• import QtQuick 2.0：导入Qt Quick核心基础模块（版本2.0），QML的矩形、文本、基础语法都靠这个模块支持。
• import QtQuick.Controls 2.12：导入Qt Quick控件模块 （版本2.12），提供输入框、按钮、标签等桌面原生控件，这里是为了使用TextField输入框。

TextField {
    id:control
    implicitHeight: 40
    background: Rectangle{
        anchors.fill: parent
        color: "#f1f1f1"
        radius: 10
    }
}

• TextField { }：自定义组件的根元素 ，表示这个组件继承Qt自带的单行输入框，拥有输入文字、光标等所有原生输入框功能。
• id:control：给输入框起唯一名字（ID） ，后续可以通过control.属性控制输入框（比如获取输入的文字），是控件的身份标记。
• implicitHeight: 40：设置输入框默认高度为40像素。「隐式高度」就是不手动改高度时，控件固定用这个高度。
• background: Rectangle{ }：重写输入框背景 ，把原生输入框的背景换成自定义矩形。
  • anchors.fill: parent：锚点属性，让矩形完全填满输入框，保证背景和输入框大小一致。
  • color: "#f1f1f1"：设置背景为浅灰色（十六进制颜色码）。
  • radius: 10：设置矩形圆角10像素，让输入框边角变圆，更美观。

---

（二）main.qml：主登录界面

这个文件是程序主入口，负责搭建窗口、排版所有界面元素、调用自定义输入框，最终显示完整登录页。

import QtQuick 2.14
import QtQuick.Window 2.14
import QtQuick.Layouts 1.12
import QtQuick.Controls 2.12
import "Utils"

• import QtQuick 2.14：高版本核心模块，兼容更多新特性。
• import QtQuick.Window 2.14：窗口模块 ，专门用来创建桌面主窗口（Window元素）。
• import QtQuick.Layouts 1.12：布局模块 ，提供ColumnLayout（列布局），让控件自动垂直排版，不用手动算位置。
• import QtQuick.Controls 2.12：控件模块，使用图片、标签、文本等控件。
• import "Utils"：导入项目里的Utils文件夹，自定义的Custominput.qml就存在这里，导入后才能调用自定义输入框。

Window {
    id:window
    visible: true
    width: 400
    height: 700
    title: qsTr("Hello World")
    flags: Qt.Window|Qt.FramelessWindowHint
    x:(Screen.width-width)/2
    y:(Screen.height-height)/2
    color: "transparent"

• Window { }：主界面根元素，代表桌面程序的主窗口，所有内容都写在这个大括号里。
• id:window：主窗口的唯一ID，方便后续控制窗口。
• visible: true：设置窗口启动就显示 ，false则程序打开后看不到窗口。
• width: 400 / height: 700：设置窗口固定大小：宽400像素、高700像素。
• title: qsTr("Hello World")：窗口标题（无边框窗口看不到），qsTr()是国际化函数，支持后续翻译文字。
• flags: Qt.Window|Qt.FramelessWindowHint：关键设置 ，做无边框窗口 ：
  • Qt.Window：声明这是独立桌面窗口；
  • Qt.FramelessWindowHint：去掉原生标题栏、关闭/最大化按钮，实现极简界面。
• x:(Screen.width-width)/2：让窗口水平居中（屏幕宽度 - 窗口宽度 ÷ 2）。
• y:(Screen.height-height)/2：让窗口垂直居中（屏幕高度 - 窗口高度 ÷ 2）。
• color: "transparent"：设置窗口背景透明，为后续圆角界面做铺垫（避免窗口边角有生硬白色）。

    Rectangle{
        anchors.fill: parent
        color: "#fafafa"
        radius: 40

• Rectangle { }：窗口内的主背景板，登录界面的视觉主体。
• anchors.fill: parent：让矩形填满整个窗口，和窗口一样大。
• color: "#fafafa"：背景色为浅米白色，比纯白更柔和。
• radius: 40：设置大圆角40像素，因为窗口是透明的，这个圆角矩形就是界面的外观，实现「圆角窗口」效果。

        ColumnLayout{
            anchors{
                left:parent.left
                right: parent.right
                top: parent.top
                margins: 20
            }

• ColumnLayout { }：列布局 ，Qt Quick的自动排版工具，所有子元素会从上到下垂直排列，不用手动写坐标。
• anchors{ ... }：设置布局的位置：
  • 左、右、上对齐父背景矩形；
  • margins: 20：布局和父元素留20像素边距，避免控件贴边。

            Image {
                id: imageone
                source: "qrc:/image/BgImage.png"
                Layout.fillWidth: true
                Layout.preferredHeight: 200
            }

• Image { }：图片控件，显示登录页顶部背景图。
• source: "qrc:/image/BgImage.png"：图片路径，qrc:是Qt资源路径，加载项目image文件夹下的BgImage.png图片。
• Layout.fillWidth: true：布局专属属性，让图片填满布局宽度。
• Layout.preferredHeight: 200：图片固定高度200像素。

            Label{
                text: qsTr("Welcome back")
                font{
                    pointSize: 20
                    weight:Font.DemiBold
                }
                Layout.alignment: Qt.AlignHCenter
            }

• Label { }：标题标签，专门显示醒目标题文字。
• text: qsTr("Welcome back")：显示文字「欢迎回来」。
• font{ ... }：字体设置：20号大小、半加粗，更醒目。
• Layout.alignment: Qt.AlignHCenter：在布局中水平居中。

            Text {
                text: qsTr("sign in to access your account")
                color: "#777"
                font{
                    pointSize: 16
                    weight:Font.Normal
                }
                Layout.alignment: Qt.AlignHCenter
            }

• Text { }：普通文本，显示辅助说明文字。
• text: qsTr("sign in to access your account")：显示「登录以访问你的账户」。
• color: "#777"：文字灰色，弱化辅助信息。
• 字体16号、常规粗细，水平居中。

            Item {
                Layout.preferredHeight: 30
            }

• Item { }：空白占位控件 ，Qt最基础的透明容器，这里用来做间距。
• Layout.preferredHeight: 30：高度30像素，让文字和输入框之间空出距离，不拥挤。

            Custominput{
                Layout.fillWidth: true
            }

• Custominput { }：调用自定义输入框 （直接用Custominput.qml封装好的组件）。
• Layout.fillWidth: true：输入框填满布局宽度，适配界面大小。

   Action{
       shortcut:"Ctrl+q"
       onTriggered:Qt.quit()
   }
}

• Action { }：快捷键动作，绑定键盘快捷操作。
• shortcut:"Ctrl+q"：设置快捷键Ctrl+Q。
• onTriggered:Qt.quit()：按下快捷键时，执行退出程序。

三、核心知识点总结

1. 组件化开发：把复用控件（输入框）单独封装，调用时直接写组件名，减少重复代码。
2. 列布局 ：ColumnLayout自动垂直排版，不用手动计算控件位置，新手友好。
3. 核心属性 ：
   • 尺寸：width/height（固定大小）、implicitHeight（默认大小）；
   • 样式：color（颜色）、radius（圆角）、font（字体）；
   • 定位：anchors（锚点对齐/填满父元素）。
4. 窗口特效：无边框、屏幕居中、透明背景实现圆角界面。
5. 实用功能：图片加载、空白占位、快捷键退出。

四、小白学习收获

1. 能看懂基础QML代码，知道每个控件、属性的作用；
2. 学会写简单的自定义组件，理解「复用代码」的好处；
3. 掌握登录界面的搭建逻辑：窗口→背景→布局→控件→样式；
4. 学会无边框、圆角、居中这些桌面界面的实用美化技巧；
5. 熟悉QML基础语法，为后续学习复杂界面打下基础。