Rectangle、Text 与 Label

Qt Quick 学习笔记：Rectangle、Text 与 Label

• [Qt Quick 学习笔记：Rectangle、Text 与 Label](#Qt Quick 学习笔记：Rectangle、Text 与 Label)
• • 一、本节内容概览
• [二、Rectangle 矩形](#二、Rectangle 矩形)
• • [2.1 Rectangle 是什么](#2.1 Rectangle 是什么)
  • [2.2 Rectangle 常用属性](#2.2 Rectangle 常用属性)
• [三、Rectangle 基础 Demo](#三、Rectangle 基础 Demo)
• [四、使用 Rectangle 制作圆形](#四、使用 Rectangle 制作圆形)
• • [4.1 圆形 Demo](#4.1 圆形 Demo)
• [五、Rectangle 渐变颜色](#五、Rectangle 渐变颜色)
• [六、使用 Rectangle 制作简单按钮](#六、使用 Rectangle 制作简单按钮)
• [七、Text 文本](#七、Text 文本)
• • [7.1 Text 是什么](#7.1 Text 是什么)
  • [7.2 Text 常用属性](#7.2 Text 常用属性)
• [八、Text 字体属性 Demo](#八、Text 字体属性 Demo)
• [九、Text 换行](#九、Text 换行)
• • [9.1 按单词换行](#9.1 按单词换行)
  • [9.2 在任意位置换行](#9.2 在任意位置换行)
  • [9.3 换行 Demo](#9.3 换行 Demo)
• [十、Text 省略号](#十、Text 省略号)
• • [10.1 右侧省略](#10.1 右侧省略)
  • [10.2 左侧省略](#10.2 左侧省略)
  • [10.3 中间省略](#10.3 中间省略)
  • [10.4 省略号 Demo](#10.4 省略号 Demo)
• [十一、Text 对齐方式](#十一、Text 对齐方式)
• • [11.1 水平对齐](#11.1 水平对齐)
  • [11.2 垂直对齐](#11.2 垂直对齐)
  • [11.3 居中对齐 Demo](#11.3 居中对齐 Demo)
• [十二、Text 裁剪](#十二、Text 裁剪)
• [十三、Label 标签](#十三、Label 标签)
• • [13.1 Label 是什么](#13.1 Label 是什么)
• [十四、Label 内边距](#十四、Label 内边距)
• [十五、Label 背景](#十五、Label 背景)
• • [15.1 Label 背景 Demo](#15.1 Label 背景 Demo)
• [十六、Label 文本样式](#十六、Label 文本样式)
• [十七、Label 下划线与删除线](#十七、Label 下划线与删除线)
• [十八、Label 换行与对齐 Demo](#十八、Label 换行与对齐 Demo)
• [十九、Text 与 Label 的区别](#十九、Text 与 Label 的区别)
• [二十、综合 Demo：学习信息卡片](#二十、综合 Demo：学习信息卡片)
• 二十一、练习任务
• • [练习一：修改 Rectangle](#练习一：修改 Rectangle)
  • 练习二：制作圆形头像占位框
  • 练习三：练习文本换行
  • 练习四：练习省略号
  • [练习五：制作自己的 Label](#练习五：制作自己的 Label)
  • 练习六：制作自定义矩形按钮
• 二十二、本节总结
• • Rectangle
  • Text
  • Label
• 二十三、快速记忆
• 二十四、一句话总结

Qt Quick 学习笔记：Rectangle、Text 与 Label

本节主要学习 Qt Quick 中三个常用的可视化类型：

• Rectangle：绘制矩形、圆角、边框和渐变背景；
• Text：显示普通文字或富文本；
• Label：实际开发中常用的文本标签，支持背景、内边距等功能。

---

一、本节内容概览

本文主要包含：

• Rectangle 的作用和继承关系
• 矩形颜色、边框、圆角和抗锯齿
• 使用 Rectangle 制作圆形
• 渐变颜色
• 使用矩形制作简单按钮
• Text 的颜色和字体属性
• 文本换行、裁剪和省略号
• 文本水平与垂直对齐
• Label 的基础用法
• Label 的背景、内边距和文本样式
• Rectangle、Text 和 Label 综合练习

---

二、Rectangle 矩形

2.1 Rectangle 是什么

Rectangle 是 Qt Quick 中最常用的基础可视化对象之一。

它继承自 Item，所以拥有：

x、y
width、height
anchors
opacity、visible
scale、rotation
z

等基础属性。

与 Item 不同的是，Rectangle 可以直接绘制：

• 背景颜色；
• 边框；
• 圆角；
• 渐变颜色。

最简单的矩形：

Rectangle {
    width: 200
    height: 100
    color: "lightblue"
}

---

2.2 Rectangle 常用属性

属性	作用
width	设置宽度
height	设置高度
color	设置填充颜色
radius	设置圆角半径
border.width	设置边框宽度
border.color	设置边框颜色
antialiasing	控制是否启用抗锯齿
gradient	设置渐变背景

---

三、Rectangle 基础 Demo

import QtQuick
import QtQuick.Controls

Window {
    width: 700
    height: 450
    visible: true
    title: "Rectangle 基础属性"

    Rectangle {
        width: 320
        height: 180

        color: "lightgreen"

        radius: 20

        border.width: 3
        border.color: "green"

        antialiasing: true

        anchors.centerIn: parent

        Text {
            anchors.centerIn: parent

            text: "Rectangle 矩形"
            font.pixelSize: 24
        }
    }
}

这段代码中：

color: "lightgreen"

设置背景颜色。

radius: 20

设置圆角。

border.width: 3
border.color: "green"

设置边框宽度和颜色。

antialiasing: true

开启抗锯齿，让圆角边缘显示得更加平滑。

---

四、使用 Rectangle 制作圆形

当矩形的宽度和高度相等，并且圆角半径等于宽度或高度的一半时，就可以得到圆形。

Rectangle {
    width: 160
    height: 160

    radius: width / 2

    color: "orange"
}

因为：

width = 160
height = 160
radius = 80

所以最终显示为圆形。

---

4.1 圆形 Demo

import QtQuick
import QtQuick.Controls

Window {
    width: 700
    height: 450
    visible: true
    title: "Rectangle 圆形"

    Rectangle {
        width: 180
        height: 180

        radius: width / 2

        color: "orange"

        border.width: 4
        border.color: "darkorange"

        antialiasing: true

        anchors.centerIn: parent

        Text {
            anchors.centerIn: parent

            text: "圆形"
            font.pixelSize: 26
        }
    }
}

---

五、Rectangle 渐变颜色

Rectangle 可以使用 Gradient 设置渐变背景。

Rectangle {
    width: 300
    height: 180

    gradient: Gradient {
        GradientStop {
            position: 0.0
            color: "lightblue"
        }

        GradientStop {
            position: 1.0
            color: "blue"
        }
    }
}

其中：

position: 0.0

表示渐变开始位置。

position: 1.0

表示渐变结束位置。

需要注意：

如果同时设置 color 和 gradient，通常会优先显示渐变效果。

例如：

Rectangle {
    color: "red"

    gradient: Gradient {
        GradientStop {
            position: 0.0
            color: "white"
        }

        GradientStop {
            position: 1.0
            color: "blue"
        }
    }
}

这里最终主要显示渐变效果，而不是红色背景。

---

六、使用 Rectangle 制作简单按钮

Rectangle 本身没有点击信号，但可以在内部加入 MouseArea。

结构如下：

Rectangle
├── Text
└── MouseArea

完整示例：

import QtQuick
import QtQuick.Controls

Window {
    width: 700
    height: 450
    visible: true
    title: "自定义矩形按钮"

    Rectangle {
        id: customButton

        width: 220
        height: 70

        radius: 12
        color: "lightgreen"

        border.width: 2
        border.color: "green"

        anchors.centerIn: parent

        Text {
            anchors.centerIn: parent

            text: "点击我"
            font.pixelSize: 22
        }

        MouseArea {
            anchors.fill: parent

            onPressed: {
                customButton.color = "green"
            }

            onReleased: {
                customButton.color = "lightgreen"
            }

            onClicked: {
                console.log("矩形按钮被点击")
            }
        }
    }
}

执行过程：

鼠标按下
    ↓
onPressed 执行
    ↓
按钮变成绿色

鼠标释放
    ↓
onReleased 执行
    ↓
按钮恢复浅绿色

完成点击
    ↓
onClicked 执行

---

七、Text 文本

7.1 Text 是什么

Text 用于在界面中显示文字。

最简单的写法：

Text {
    text: "Hello QML"
}

其中：

Text

是文本对象类型。

text

是对象要显示的文字内容。

---

7.2 Text 常用属性

属性	作用
text	设置显示内容
color	设置文字颜色
font.pixelSize	设置字体大小
font.bold	设置粗体
font.italic	设置斜体
font.family	设置字体
wrapMode	设置换行方式
elide	设置省略号
horizontalAlignment	设置水平对齐
verticalAlignment	设置垂直对齐
clip	裁剪超出的文字

---

八、Text 字体属性 Demo

import QtQuick
import QtQuick.Controls

Window {
    width: 700
    height: 450
    visible: true
    title: "Text 字体属性"

    Text {
        anchors.centerIn: parent

        text: "Qt Quick 文本"

        color: "darkblue"

        font.pixelSize: 32
        font.bold: true
        font.italic: true
    }
}

也可以使用属性组：

Text {
    text: "Qt Quick 文本"

    font {
        pixelSize: 32
        bold: true
        italic: true
    }
}

两种写法效果相同。

---

九、Text 换行

文本内容较长时，可以通过 wrapMode 设置换行方式。

9.1 按单词换行

wrapMode: Text.WordWrap

它会尽量根据单词和空格换行。

9.2 在任意位置换行

wrapMode: Text.WrapAnywhere

当一行显示不下时，可以在任意字符位置换行。

---

9.3 换行 Demo

import QtQuick
import QtQuick.Controls

Window {
    width: 700
    height: 450
    visible: true
    title: "Text 换行"

    Rectangle {
        width: 400
        height: 200

        color: "#eeeeee"

        border.width: 1
        border.color: "gray"

        anchors.centerIn: parent

        Text {
            anchors.fill: parent
            anchors.margins: 20

            text: "Qt Quick 是用于开发图形界面的技术，QML 可以快速编写简洁、灵活并且具有交互效果的界面。"

            font.pixelSize: 20

            wrapMode: Text.WordWrap
        }
    }
}

必须给文本提供一个确定的宽度，换行效果才容易观察。

这里使用：

anchors.fill: parent
anchors.margins: 20

让 Text 填充父矩形，并保留一定边距。

---

十、Text 省略号

当文本太长时，可以设置省略号。

10.1 右侧省略

elide: Text.ElideRight

效果类似：

这是一段非常长的文...

10.2 左侧省略

elide: Text.ElideLeft

10.3 中间省略

elide: Text.ElideMiddle

---

10.4 省略号 Demo

import QtQuick
import QtQuick.Controls

Window {
    width: 700
    height: 450
    visible: true
    title: "Text 省略号"

    Rectangle {
        width: 350
        height: 80

        color: "lightgray"

        anchors.centerIn: parent

        Text {
            anchors.fill: parent
            anchors.margins: 15

            text: "这是一段非常非常长的文本内容，用来测试文本超出范围以后显示省略号。"

            font.pixelSize: 20

            elide: Text.ElideRight

            verticalAlignment: Text.AlignVCenter
        }
    }
}

省略号一般适合单行文字。

如果设置了自动换行，省略号效果可能不会像单行文本那样明显。

---

十一、Text 对齐方式

11.1 水平对齐

horizontalAlignment: Text.AlignLeft
horizontalAlignment: Text.AlignHCenter
horizontalAlignment: Text.AlignRight

11.2 垂直对齐

verticalAlignment: Text.AlignTop
verticalAlignment: Text.AlignVCenter
verticalAlignment: Text.AlignBottom

---

11.3 居中对齐 Demo

Rectangle {
    width: 350
    height: 160
    color: "lightblue"

    Text {
        anchors.fill: parent

        text: "水平和垂直居中"

        horizontalAlignment: Text.AlignHCenter
        verticalAlignment: Text.AlignVCenter

        font.pixelSize: 22
    }
}

需要注意：

anchors.centerIn: parent

是让 Text 对象本身居中。

而：

horizontalAlignment: Text.AlignHCenter
verticalAlignment: Text.AlignVCenter

是让文字在 Text 自己的范围内居中。

---

十二、Text 裁剪

如果文字超出了 Text 对象的范围，可以设置：

clip: true

示例：

Text {
    width: 250
    height: 50

    text: "这是一段可能会超出显示范围的文字内容。"

    clip: true
}

设置后，超出范围的部分不会继续显示。

---

十三、Label 标签

13.1 Label 是什么

Label 是 Qt Quick Controls 中常用的文本控件。

使用前需要导入：

import QtQuick.Controls

创建一个 Label：

Label {
    text: "这是一个 Label"
}

课程中可以先把 Label 理解为：

功能更完整、更适合实际界面开发的文本标签。

它可以使用大量与 Text 类似的属性，例如：

text
color
font.pixelSize
font.bold
font.italic
wrapMode
elide
horizontalAlignment
verticalAlignment

同时还增加了：

padding
leftPadding
rightPadding
topPadding
bottomPadding
background

等控件属性。

---

十四、Label 内边距

padding 表示文字和控件边缘之间的距离。

Label {
    text: "带内边距的 Label"

    padding: 20
}

也可以分别设置：

leftPadding: 20
rightPadding: 20
topPadding: 10
bottomPadding: 10

---

十五、Label 背景

可以通过 background 给 Label 设置背景。

Label {
    text: "带背景的 Label"

    padding: 20

    background: Rectangle {
        color: "lightyellow"
        radius: 10

        border.width: 1
        border.color: "orange"
    }
}

这里：

background: Rectangle {
}

表示使用一个矩形作为 Label 的背景。

---

15.1 Label 背景 Demo

import QtQuick
import QtQuick.Controls

Window {
    width: 700
    height: 450
    visible: true
    title: "Label 背景"

    Label {
        anchors.centerIn: parent

        text: "Qt Quick Label"

        padding: 20

        color: "darkblue"

        font {
            pixelSize: 26
            bold: true
        }

        background: Rectangle {
            color: "lightyellow"
            radius: 12

            border.width: 2
            border.color: "orange"
        }
    }
}

---

十六、Label 文本样式

Label 可以设置不同的文字样式。

style: Text.Normal
style: Text.Outline
style: Text.Raised
style: Text.Sunken

通常还可以配合：

styleColor: "white"

例如：

Label {
    text: "轮廓文字"

    font.pixelSize: 30

    style: Text.Outline
    styleColor: "white"

    color: "blue"
}

不同系统或不同字体下，显示效果可能略有差异。

---

十七、Label 下划线与删除线

下划线：

font.underline: true

删除线：

font.strikeout: true

示例：

Label {
    text: "带下划线的文字"

    font.pixelSize: 24
    font.underline: true
}

---

十八、Label 换行与对齐 Demo

import QtQuick
import QtQuick.Controls

Window {
    width: 700
    height: 450
    visible: true
    title: "Label 换行与对齐"

    Label {
        width: 420
        height: 220

        anchors.centerIn: parent

        padding: 20

        text: "Label 可以显示较长的文字内容，还可以设置换行、内边距、水平对齐和垂直对齐。"

        wrapMode: Text.WordWrap

        horizontalAlignment: Text.AlignHCenter
        verticalAlignment: Text.AlignVCenter

        font.pixelSize: 20

        background: Rectangle {
            color: "#eeeeee"
            radius: 12

            border.width: 1
            border.color: "gray"
        }
    }
}

---

十九、Text 与 Label 的区别

对比项	Text	Label
所属模块	QtQuick	QtQuick.Controls
主要用途	显示基础文字	显示控件中的标签文字
字体设置	支持	支持
换行和省略	支持	支持
背景	需要自己嵌套 Rectangle	可以使用 background
内边距	需要通过布局处理	支持 padding
实际开发	基础文本显示	更常用于控件界面

可以简单记成：

Text：单纯显示文字

Label：带控件能力的文字标签

---

二十、综合 Demo：学习信息卡片

下面的 Demo 只使用已经学习过的：

• Rectangle
• Text
• Label
• MouseArea
• 自定义属性
• 属性绑定
• 信号处理器
• anchors

import QtQuick
import QtQuick.Controls

Window {
    id: mainWindow

    width: 800
    height: 520
    visible: true
    title: "Rectangle、Text、Label 综合练习"

    property bool selected: false

    Rectangle {
        id: studyCard

        width: 520
        height: 320

        radius: 20

        color: {
            if (mainWindow.selected) {
                return "#e8f5e9"
            }

            return "#f5f5f5"
        }

        border.width: 2

        border.color: {
            if (mainWindow.selected) {
                return "green"
            }

            return "gray"
        }

        anchors.centerIn: parent

        Label {
            id: titleLabel

            anchors.top: parent.top
            anchors.left: parent.left

            anchors.topMargin: 25
            anchors.leftMargin: 25

            text: "Qt Quick 学习卡片"

            padding: 12

            color: "darkblue"

            font {
                pixelSize: 24
                bold: true
            }

            background: Rectangle {
                color: "lightblue"
                radius: 8
            }
        }

        Text {
            anchors.top: titleLabel.bottom
            anchors.left: parent.left
            anchors.right: parent.right

            anchors.topMargin: 25
            anchors.leftMargin: 25
            anchors.rightMargin: 25

            text: "本节学习了 Rectangle 的颜色、边框和圆角，以及 Text 和 Label 的字体、换行、对齐、背景和内边距。"

            wrapMode: Text.WordWrap

            font.pixelSize: 19
            color: "#444444"
        }

        Rectangle {
            id: selectButton

            width: 180
            height: 55

            radius: 10

            color: {
                if (buttonMouseArea.pressed) {
                    return "darkgreen"
                }

                return "green"
            }

            anchors.bottom: parent.bottom
            anchors.horizontalCenter: parent.horizontalCenter
            anchors.bottomMargin: 25

            Text {
                anchors.centerIn: parent

                text: {
                    if (mainWindow.selected) {
                        return "取消选择"
                    }

                    return "选择课程"
                }

                color: "white"
                font.pixelSize: 20
            }

            MouseArea {
                id: buttonMouseArea

                anchors.fill: parent

                onClicked: {
                    if (mainWindow.selected) {
                        mainWindow.selected = false
                    } else {
                        mainWindow.selected = true
                    }

                    console.log(
                                "当前选择状态：",
                                mainWindow.selected
                                )
                }
            }
        }
    }
}

运行后：

点击"选择课程"
    ↓
selected 变成 true
    ↓
卡片背景自动变为浅绿色
    ↓
边框自动变为绿色
    ↓
按钮文字自动变成"取消选择"

这体现了 QML 的属性绑定：

属性发生变化
    ↓
依赖该属性的界面自动更新

---

二十一、练习任务

练习一：修改 Rectangle

将卡片的：

radius: 20

分别改成：

radius: 0
radius: 40
radius: width / 2

观察显示效果。

---

练习二：制作圆形头像占位框

要求：

宽度：150
高度：150
颜色：lightblue
边框：蓝色
形状：圆形

参考：

Rectangle {
    width: 150
    height: 150

    radius: width / 2
}

---

练习三：练习文本换行

创建一个固定宽度的 Text：

Text {
    width: 300
    text: "一段比较长的文字"
    wrapMode: Text.WordWrap
}

分别测试：

Text.WordWrap
Text.WrapAnywhere

---

练习四：练习省略号

创建一个宽度为 250 的 Text，设置较长内容，然后分别测试：

Text.ElideLeft
Text.ElideMiddle
Text.ElideRight

---

练习五：制作自己的 Label

要求：

• 设置一段文字；
• 字体大小为 24；
• 设置 15 像素内边距；
• 使用黄色背景；
• 设置圆角和橙色边框。

---

练习六：制作自定义矩形按钮

要求：

• 使用 Rectangle 作为背景；
• 使用 Text 显示按钮名称；
• 使用 MouseArea 处理点击；
• 按下时改变颜色；
• 释放后恢复颜色；
• 点击后通过 console.log() 输出信息。

---

二十二、本节总结

Rectangle

负责绘制矩形、背景、边框、圆角和渐变。

Text

负责显示普通文字或富文本。

Label

负责显示更适合控件界面的文本标签，
支持背景、内边距和更多控件属性。

---

二十三、快速记忆

Rectangle：
color、border、radius、gradient

Text：
text、color、font、wrapMode、elide、alignment

Label：
拥有文本显示能力，
同时支持 padding 和 background

Rectangle + Text + MouseArea：
可以制作简单的自定义按钮

---

二十四、一句话总结

Rectangle 负责绘制界面形状，Text 负责显示基础文字，Label 负责显示带背景、边距和控件样式的文本标签。