目录Text 字体样式总览Text 基础用法演示代码关键逻辑解析适用场景注意点Text 字体属性演示代码关键逻辑解析适用场景注意点Text 文本样式演示代码关键逻辑解析适用场景注意点Text 文本对齐演示代码关键逻辑解析适用场景注意点运行验证扩展复用方向小结Text是 QML 里最基础的文本组件不需要依赖 Controls轻量且灵活。日常 UI 开发中调整字体、样式和对齐是最常见的需求。这篇把Text在字体样式方面的核心属性一次说清并给出实际使用时的选型建议。Text 字体样式总览Text的字体相关属性主要分三类基础样式颜色、粗体、斜体、下划线、删除线字体属性字体系列、字号、字重、字母/单词间距艺术样式Text.Normal、Text.Outline、Text.Raised、Text.Sunken搞清楚这三类的分工就能覆盖大部分文本展示需求。Text 基础用法这个 demo 展示了Text最常用的基础样式纯文本、颜色、粗体、斜体、下划线、删除线。Text不像Label那样自动继承 Controls 主题所以所有样式都需要手动指定。演示代码import QtQuick import QtQuick.Layouts FadeInAnimation { ColumnLayout { anchors.fill: parent anchors.margins: 20 spacing: 15 // ... 省略标题组件 TitleSeparator ... ColumnLayout { Layout.leftMargin: 20 spacing: 12 Text { text: 普通文本 - Hello World!; font.pointSize: 12 } Text { text: 带颜色文本; font.pointSize: 12; color: #E91E63 } Text { text: 粗体文本; font.pointSize: 12; font.bold: true } Text { text: 斜体文本; font.pointSize: 12; font.italic: true } Text { text: 下划线文本; font.pointSize: 12; font.underline: true } Text { text: 删除线文本; font.pointSize: 12; font.strikeout: true } } Item { Layout.fillHeight: true } } }关键逻辑解析Text的字体修饰都挂在font分组下font.bold粗体font.italic斜体font.underline下划线font.strikeout删除线color直接控制文字颜色和Label一样。适用场景这种基础样式适合商品价格划线显示、任务完成状态、文档编辑器里的富文本预览等。比如用font.strikeout: true表示已完成的待办事项用font.underline: true表示链接或重点内容。注意点如果项目里已经用了 Controls 主题直接用Text显示文字可能会出现字体和Label不一致的情况。这时要么手动指定font.family要么改用Label。Text 字体属性除了基础修饰还经常需要改字体系列、字号、字重和间距。这个 demo 展示了font.family、font.pointSize、font.weight、font.letterSpacing和font.wordSpacing的用法。演示代码import QtQuick import QtQuick.Layouts FadeInAnimation { ColumnLayout { anchors.fill: parent anchors.margins: 20 spacing: 15 // ... 省略标题组件 TitleSeparator ... ColumnLayout { Layout.leftMargin: 20 spacing: 12 Text { text: 字体系列: Arial; font.family: Arial; font.pointSize: 12 } Text { text: 字体系列: Courier New; font.family: Courier New; font.pointSize: 12 } Text { text: 字体大小: 13pt; font.pointSize: 13 } Text { text: 字体粗细: Bold (700); font.pointSize: 12; font.weight: Font.Bold } Text { text: 字母间距: 5px; font.pointSize: 12; font.letterSpacing: 5 } Text { text: 单词间距: 10px; font.pointSize: 12; font.wordSpacing: 10 } } Item { Layout.fillHeight: true } } }关键逻辑解析font.family字体名必须填系统里存在的字体font.pointSize和font.pixelSize前者按点后者按像素二选一不要同时用font.weight可以用Font.Light、Font.Normal、Font.Bold等枚举font.letterSpacing/font.wordSpacing做标题设计时很有用适用场景自定义字体系列适合做代码编辑器、终端模拟器、品牌标题字重和间距适合做标题层级系统。比如大屏数据看板里标题用font.weight: Font.Bold加letterSpacing: 2会显得更有设计感。注意点font.family一定要填系统里实际安装的字体名。如果字体不存在QML 会回退到默认字体不会报错但效果会不对。跨平台项目要特别注意字体可用性。Text 文本样式Text自带几种艺术字样式适合做简单特效。这个 demo 展示了Text.Normal、Text.Outline、Text.Raised、Text.Sunken四种效果。演示代码import QtQuick import QtQuick.Layouts FadeInAnimation { ColumnLayout { anchors.fill: parent anchors.margins: 20 spacing: 15 // ... 省略标题组件 TitleSeparator ... Row { spacing: 15 Text { font.pointSize: 14; text: Normal; style: Text.Normal } Text { font.pointSize: 14; text: Outline; style: Text.Outline; styleColor: red } Text { font.pointSize: 14; text: Raised; style: Text.Raised; styleColor: #AAAAAA } Text { font.pointSize: 14; text: Sunken; style: Text.Sunken; styleColor: #AAAAAA } } // ... 省略说明文本 ... Item { Layout.fillHeight: true } } }关键逻辑解析Text.Normal默认Text.Outline空心描边styleColor控制描边色Text.Raised凸起阴影Text.Sunken凹陷阴影这些样式适合在不需要额外 Canvas/Shader 时快速做出标题效果。适用场景Text.Outline适合做水印、标题描边Text.Raised和Text.Sunken适合做按钮按下状态或复古风格界面。游戏 UI、仪表盘标题经常用这几种效果来增强视觉层次。注意点styleColor只在Outline、Raised、Sunken时生效。如果文字本身颜色和styleColor太接近效果会不明显。建议用对比强烈的颜色组合。Text 文本对齐对齐分水平和垂直两个方向常用于按钮文字、卡片标题等场景。这个 demo 用Repeater把三种水平对齐左/中/右和三种垂直对齐置顶/居中/底部统一展示并且给每个示例加了背景框让对齐效果一目了然。演示代码import QtQuick import QtQuick.Layouts FadeInAnimation { ColumnLayout { anchors.fill: parent anchors.margins: 20 spacing: 15 // ... 省略标题组件 TitleSeparator ... ColumnLayout { Layout.leftMargin: 20 spacing: 12 Repeater { model: [ { text: 左对齐 (默认), hAlign: Text.AlignLeft, vAlign: Text.AlignVCenter, height: 32 }, { text: 居中对齐, hAlign: Text.AlignHCenter, vAlign: Text.AlignVCenter, height: 32 }, { text: 右对齐, hAlign: Text.AlignRight, vAlign: Text.AlignVCenter, height: 32 }, { text: 垂直置顶, hAlign: Text.AlignLeft, vAlign: Text.AlignTop, height: 40 }, { text: 垂直居中, hAlign: Text.AlignLeft, vAlign: Text.AlignVCenter, height: 40 }, { text: 垂直底部, hAlign: Text.AlignLeft, vAlign: Text.AlignBottom, height: 40 }, { text: 水平垂直居中, hAlign: Text.AlignHCenter, vAlign: Text.AlignVCenter, height: 40 } ] Rectangle { width: 200 height: modelData.height color: #f5f5f5 border.color: #ddd Text { anchors.fill: parent anchors.margins: 4 text: modelData.text horizontalAlignment: modelData.hAlign verticalAlignment: modelData.vAlign font.pointSize: 11 } } } } Item { Layout.fillHeight: true } } }关键逻辑解析Repeater配合model数组把三个水平对齐示例用同一段模板生成避免重复代码每个示例用Rectangle做背景框明确显示Text的边界对齐效果更直观horizontalAlignmentAlignLeft、AlignRight、AlignHCenterverticalAlignmentAlignTop、AlignBottom、AlignVCenter垂直对齐需要Text有明确高度通常配合anchors.fill: parent或固定height适用场景按钮文字通常需要水平和垂直双居中列表项标题根据语言习惯选择左对齐或右对齐数值展示常用右对齐方便多行数字的小数点对齐。注意点如果Text没有明确宽度或高度对齐属性可能看不出效果。水平对齐需要设置width垂直对齐需要设置height。用anchors.fill: parent是最稳妥的做法。运行验证Qt Creator 打开qml_text/CMakeLists.txt按CtrlR运行在左侧导航切换 Text 基础用法、字体属性、文本样式、文本对齐扩展复用方向把常用字体样式封装成自定义StyledText组件支持 primary、secondary、caption 等语义化类型用font.weight和letterSpacing做标题层级系统比如 h1/h2/h3结合Rectangle背景做按钮文字居中模板避免每次手动写对齐用Text.Outline做可缩放的水印文字小结Text的字体、样式和对齐属性虽然简单但组合起来能覆盖绝大多数文本展示需求。基础样式做内容强调字体属性做排版精细控制艺术样式做视觉点缀对齐属性做布局适配。合理组合这四类属性就能让界面文字既清晰又有层次感。已验证环境Qt 版本Qt 6.11.1操作系统Windows 11完整代码https://gitcode.com/u011186532/qml_demo/tree/main/qml_text
