Qt页面小项目

Qt QML 登录界面项目 完整代码笔记（逐行详解）

一、项目整体结构

你做了一个带图片 + 表单输入框的美观登录/注册界面，包含：

1. CustomField.qml → 自定义复用输入框组件（标签+输入框）
2. main.qml → 主窗口（背景渐变 + 白色卡片 + 图片 + 表单）

---

第一部分：CustomField.qml （自定义输入框组件）

// 导入Qt基础控件库 2.0版本
import QtQuick 2.0
// 导入Qt高级控件库 2.12版本
import QtQuick.Controls 2.12

// 列布局：内部元素 垂直 依次排列
Column
{
    id:root                // 给当前组件起唯一ID：root
    property string labeName:""  // 【自定义属性】外部可传入的标签文字
                                // 例：外部写 labeName: "name"，这里就会显示
    spacing: 10           // 内部元素之间的间距：10px

    // 标签控件：显示文字
    Label
    {
        text: root.labeName  // 文字内容 = 外部传入的自定义属性 labeName
    }

    // 输入框控件：用户可输入文字
    TextField{
        width: parent.width  // 宽度 = 父组件（Column）的宽度
    }
}

这个组件的作用

把 标签 + 输入框 打包成一个可复用组件

不用每次都重复写 Label + TextField，直接用 CustomField{} 就行

---

第二部分：main.qml （主窗口界面）

// 导入Qt基础控件
import QtQuick 2.12
// 导入Qt按钮、输入框、布局等基础控件
import QtQuick.Controls 2.5

// 应用主窗口：整个程序的最外层容器
ApplicationWindow {
    id: window             // 窗口ID
    visible: true          // 窗口默认显示
    width: 640             // 窗口宽度 640px
    height: 480            // 窗口高度 480px
    title: qsTr("MiniProject") // 窗口标题（qsTr是国际化翻译函数）

    // 矩形：作为整个窗口的背景
    Rectangle{
        anchors.fill: parent   // 填满父元素（整个窗口）

        // 水平渐变背景
        gradient: Gradient
        {
            orientation:Gradient.Horizontal  // 渐变方向：水平（左→右）
            GradientStop{position:0.5;color:"#ffe5ec"}  // 渐变中点颜色
            GradientStop{position: 1;color: "#ffccd5"}  // 渐变终点颜色
        }

        // 白色卡片：表单容器（圆角、居中）
        Rectangle{
            id:formContral           // 卡片ID
            width: 800               // 卡片宽度
            height: 600              // 卡片高度
            radius:14                // 圆角：14px（让边角变圆）
            color: "white"           // 卡片背景色：白色
            anchors.centerIn: parent // 在父元素（背景）中居中显示

            // 行布局：内部元素 水平 排列（图片 ↔ 表单）
            Row{
                anchors.fill: parent // 填满白色卡片

                // 图片控件：显示左侧图片
                Image {
                    id: formimage
                    source: "qrc:/image/HIT.jpg"  // 图片资源路径
                    height: parent.height        // 图片高度 = 父元素高度
                    width: parent.width/2        // 图片宽度 = 父元素一半
                }

                // 列布局：右侧表单区域（垂直排列）
                Column{
                    width: formContral.width - formimage.width - 2*padding
                    // 宽度 = 总宽度 - 图片宽度 - 左右内边距

                    height: parent.height    // 高度 = 父元素高度
                    spacing: 15              // 表单元素之间的间距
                    padding: 15              // 整体内边距
                    topPadding: 25            // 顶部内边距
                    leftPadding: 20           // 左侧内边距

                    // 标题标签
                    Label{
                        text: "Get Started"        // 显示文字
                        font.bold: true            // 文字加粗
                        font.pointSize: 20         // 文字大小 20号
                    }

                    // =========== 使用你自定义的组件 ===========
                    CustomField{          // 姓名输入框
                        width: parent.width
                        labeName: "name"   // 给自定义组件传值：显示"name"
                    }

                    CustomField{          // 邮箱输入框
                        width: parent.width
                        labeName: "Email"
                    }

                    CustomField{          // 密码输入框
                        width: parent.width
                        labeName: "Password"
                    }
                }
            }
        }
    }
}

---

三、核心知识点笔记（必看）

1. 布局系统

• Column：垂直布局（上下排列）
• Row：水平布局（左右排列）
• anchors.fill：填满父元素
• anchors.centerIn：在父元素中居中

2. 自定义组件（重点）

• 你写的 CustomField 是可复用控件
• property string labeName:"" 是对外接口
• 外部直接用 labeName: "xxx" 就能修改标签文字

3. 渐变背景

• Gradient.Horizontal = 水平渐变
• 至少需要 2 个 GradientStop 才能形成渐变

4. 常用属性

• radius：圆角
• spacing：元素间距
• padding：内边距（内部元素与边框距离）
• font.bold：文字加粗
• font.pointSize：文字大小

---

四、代码中存在的 1 个小错误（已帮你标注）

GradientStop{position:0.5;color:"#ffe5ec"}

这里建议改成 position: 0.0（渐变起点），否则渐变会显示异常。

修复后：

gradient: Gradient
{
    orientation:Gradient.Horizontal
    GradientStop{position: 0.0; color:"#ffe5ec"}  // 起点
    GradientStop{position: 1.0; color:"#ffccd5"}  // 终点
}

---

完整总结

1. CustomField.qml = 封装了 Label + TextField 的自定义输入框
2. main.qml = 主窗口，包含：
   • 粉色水平渐变背景
   • 居中白色圆角卡片
   • 左侧图片
   • 右侧表单（标题 + 3个自定义输入框）