目录四种交互/富文本方案Text 可点击文本演示代码关键逻辑解析适用场景注意点Text 链接交互演示代码关键逻辑解析适用场景注意点Text 富文本HTML演示代码关键逻辑解析适用场景注意点Text Markdown 文本演示代码关键逻辑解析适用场景注意点对比表格运行验证扩展复用方向小结文本在界面里不只是用来读还可以点击、跳转、甚至承载格式化内容。这篇讲Text的四个进阶用法可点击文本、链接交互、HTML 富文本和 Markdown 文本。它们能让你的界面少套一层Button或WebView。四种交互/富文本方案需求方案复杂度文本点击反馈TextMouseArea低点击打开外链textFormat: Text.RichTextonLinkActivated低简单 HTML 富文本textFormat: Text.RichText中轻量 MarkdowntextFormat: Text.MarkdownText中这四种方案都基于Text本身不需要额外引入 WebView启动速度和内存占用都比嵌套浏览器小很多。Text 可点击文本Text本身不处理鼠标事件需要套一个MouseArea。这个 demo 展示了点击切换颜色、按下缩放、按钮样式、边框按钮四种常见交互效果。演示代码import QtQuick import QtQuick.Layouts FadeInAnimation { ColumnLayout { anchors.fill: parent anchors.margins: 20 spacing: 15 // ... 省略标题组件 TitleSeparator ... ColumnLayout { Layout.leftMargin: 20 spacing: 12 Text { id: clickText1 text: 点击我切换颜色 font.pointSize: 13 color: toggled ? #E91E63 : #1976D2 property bool toggled: false MouseArea { anchors.fill: parent onClicked: clickText1.toggled !clickText1.toggled } } Text { id: clickText2 text: 按下缩放效果 font.pointSize: 13 color: pressed ? #E91E63 : #333 property bool pressed: false MouseArea { anchors.fill: parent onPressed: { clickText2.pressed true clickText2.scale 0.9 } onReleased: { clickText2.pressed false clickText2.scale 1.0 } } Behavior on scale { NumberAnimation { duration: 100 } } } Rectangle { width: 120 height: 36 radius: 4 color: buttonArea.pressed ? #1565C0 : #1976D2 Text { anchors.centerIn: parent text: 按钮样式 color: white font.pointSize: 12 } MouseArea { id: buttonArea anchors.fill: parent } Behavior on color { ColorAnimation { duration: 100 } } } Rectangle { id: borderBtn width: 120 height: 32 radius: 16 border.color: borderArea.pressed ? #E91E63 : #1976D2 border.width: 2 color: borderArea.pressed ? #fce4ec : white Text { anchors.centerIn: parent text: 边框按钮 color: borderBtn.border.color font.pointSize: 12 } MouseArea { id: borderArea anchors.fill: parent } } } Item { Layout.fillHeight: true } } }关键逻辑解析MouseArea必须anchors.fill: parent才能覆盖整个文本区域用自定义布尔属性记录状态再用它驱动color或scaleBehavior on scale/Behavior on color让变化有过渡动画做按钮样式时通常用Rectangle包Text再套MouseArea适用场景可点击文本适合做筛选标签、展开/收起按钮、文字型操作入口。相比Button它更轻量样式完全由你控制适合做扁平化设计的界面。注意点MouseArea会拦截事件如果文本放在ScrollView或ListView里要注意手势冲突。另外可点击文本最好给用户一些视觉反馈比如颜色变化或缩放否则用户不知道能点。Text 链接交互用textFormat: Text.RichText支持 HTML 标签点击链接时触发linkActivated。这个 demo 展示了两个可点击的外部链接。演示代码import QtQuick import QtQuick.Layouts FadeInAnimation { ColumnLayout { anchors.fill: parent anchors.margins: 20 spacing: 15 // ... 省略标题组件 TitleSeparator ... ColumnLayout { Layout.leftMargin: 20 spacing: 12 Text { text: 点击访问 a hrefhttps://qt.ioQt 官网/a textFormat: Text.RichText font.pointSize: 12 linkColor: #1976D2 onLinkActivated: (link) { Qt.openUrlExternally(link) } } Text { text: 点击打开 a hrefhttps://doc.qt.io/qt-6/qml-qtquick-text.htmlText 文档/a textFormat: Text.RichText font.pointSize: 12 linkColor: #1976D2 onLinkActivated: (link) { Qt.openUrlExternally(link) } } } Item { Layout.fillHeight: true } } }关键逻辑解析textFormat: Text.RichText让Text按 HTML 解析linkColor控制超链接颜色onLinkActivated接收点击的 URL再用Qt.openUrlExternally打开浏览器适用场景链接交互适合用户协议、隐私政策、帮助文档、关于页面里的外部链接。不需要单独放Button一段文字里就能嵌入可点击的链接。注意点onLinkActivated收到的是字符串 URL不要直接执行。建议做白名单校验或限制为https://开头避免恶意链接。另外Qt.openUrlExternally在部分平台可能需要额外权限。Text 富文本HTMLText.RichText支持常用 HTML 标签适合显示带格式的静态内容。这个 demo 展示了粗体、斜体、下划线、删除线、颜色、字号、标题和段落。演示代码import QtQuick import QtQuick.Layouts FadeInAnimation { ColumnLayout { anchors.fill: parent anchors.margins: 20 spacing: 15 // ... 省略标题组件 TitleSeparator ... Text { text: b粗体/b i斜体/i u下划线/u s删除线/s textFormat: Text.RichText font.pointSize: 12 } Text { text: font colorred红色/font font colorgreen绿色/font font colorblue蓝色/font textFormat: Text.RichText font.pointSize: 12 } Text { text: font size5大号/font font size2小号/font textFormat: Text.RichText font.pointSize: 12 } Text { text: h4标题/h4p段落文本/p textFormat: Text.RichText font.pointSize: 10 } // ... 省略说明文本 ... Item { Layout.fillHeight: true } } }关键逻辑解析常用标签包括b、i、u、s、font、h1-h6、p、br、a、img。不需要引入 WebView比TextEdit轻量很多。适用场景HTML 富文本适合提示说明、格式化内容、简单的图文混排。比如一个弹窗里的操作提示用b标出重点比放多个Text组件更紧凑。注意点Text.RichText支持的 HTML 子集有限复杂布局不要用。如果需要 CSS、表格、脚本应该改用WebEngineView。另外图片标签img只支持本地路径或资源路径加载网络图片需要额外处理。Text Markdown 文本Qt 6 的Text支持 Markdown适合显示简单的格式化说明。这个 demo 展示了粗体、斜体、删除线、无序列表和有序列表。演示代码import QtQuick import QtQuick.Layouts FadeInAnimation { ColumnLayout { anchors.fill: parent anchors.margins: 20 spacing: 15 // ... 省略标题组件 TitleSeparator ... ColumnLayout { Layout.leftMargin: 20 spacing: 12 Text { text: **粗体** *斜体* ~~删除线~~ textFormat: Text.MarkdownText font.pointSize: 12 } Text { width: 200 text: - 列表项1\n- 列表项2\n- 列表项3 textFormat: Text.MarkdownText font.pointSize: 11 wrapMode: Text.WordWrap } Text { width: 200 text: 1. 有序项1\n2. 有序项2\n3. 有序项3 textFormat: Text.MarkdownText font.pointSize: 11 wrapMode: Text.WordWrap } } // ... 省略说明文本 ... Item { Layout.fillHeight: true } } }关键逻辑解析textFormat: Text.MarkdownText启用 Markdown 解析支持 CommonMark 和 GitHub 扩展多行内容用\n分隔配合wrapMode使用适用场景Markdown 适合更新日志、版本说明、用户反馈内容、从服务端拉取的富文本。因为 Markdown 源码比 HTML 更简洁后端同学也更容易维护。注意点Qt 的 Markdown 解析器支持范围有限表格、任务列表等高级特性可能渲染不出来。上线前要把目标语法在 demo 里跑一遍确认效果。另外多行 Markdown 文本一定要记得设置wrapMode否则长列表会溢出容器。对比表格需求方案适用场景文本可点击TextMouseArea自定义按钮、标签筛选点击打开外链textFormat: Text.RichTextonLinkActivated用户协议、帮助文档简单富文本Text.RichText提示说明、格式化内容轻量 MarkdownText.MarkdownText更新日志、简介运行验证Qt Creator 打开qml_text/CMakeLists.txt按CtrlR运行在左侧导航切换可点击文本、链接交互、富文本 HTML、Markdown扩展复用方向把可点击文本封装成ClickableText组件支持 normal / hover / pressed 三种状态色用Text.RichText做带图文的帮助页用Text.MarkdownText显示从服务器拉取的 Markdown 说明给链接文本增加复制到剪贴板的功能除了打开浏览器还能复制 URL小结Text组件在交互和富文本方面的能力经常被低估。配合MouseArea可以做轻量按钮配合RichText可以做链接和简单 HTML配合MarkdownText可以展示后端维护的说明内容。这些方案的共同优势是轻量、启动快、不依赖 WebView。只要需求不复杂优先考虑用Text解决而不是直接引入更重的组件。已验证环境Qt 版本Qt 6.11.1操作系统Windows 11完整代码https://gitcode.com/u011186532/qml_demo/tree/main/qml_text