| 注册

首页

实战课程课程商城实验项目

AI助教个性学习练习提效认证报考

学习指南考试指南 IT证书开班计划

初级中级高级组合

名师团队博睿谷

Flutter Text 组件怎么用？核心属性有哪些？ 2025/09/03

Linux 和 Windows 选哪个？核心差异看这些 2025/09/03

防火墙 IPSec 报文怎么统计？华为华三配置有啥不同？ 2025/09/01

2025 年入行网络工程师：选思科认证还是华为认证？ 2025/08/28

网络ping不通？物理链路检查从哪入手？ 2025/08/28

OSPF 区域划分怎么操作？核心原则是什么 2025/08/28

在线精品

课程商城

华为HCIA/HCIP认证考试-活动Redhat/Oracle持证福利

1课时

华为HCIE-AI Solution认证课程 | 人工智能培训

60课时

华为HCIP-Datacom培训认证数据通信高级工程师(IA+IP)

40课时

华为云计算认证HCIE-Cloud 培训课程

80课时

学习资源

精品视频会员订阅学习指南名师团队

了解博睿

关于我们合作案例法律条款帮助中心

智培精英
专注成就卓越

专业顾问
你的职业发展助手

友情链接

Hi，小谷

首页

课程中心

实战课程课程商城实验项目

AI赋能

AI助教个性学习练习提效认证报考

学习工具

学习指南考试指南 IT证书开班计划

会员订阅

初级中级高级组合

关于我们

名师团队博睿谷

电话18503067430

在线咨询

资讯动态

学员故事

学习干货

特惠报名入口

验证码

提交

Flutter Text 组件怎么用？核心属性有哪些？

2025/09/03

在 Flutter（及 HarmonyOS ArkUI）的 UI 体系中，Text组件是文本渲染的核心载体。它不仅能实现基础文本展示，还可通过丰富的属性组合，完成字体样式、对齐方式、溢出规则等精细化控制。本文从属性说明、基础用法到进阶实战，全面解析Text组件的应用技巧。

一、Text 组件核心属性速查表

Text的视觉表现由一系列属性驱动，下表汇总了关键样式配置及其作用：

二、基础用法：最简文本渲染

要在界面中渲染一段文本，Text的基础用法十分简洁。以下代码演示了 ** 居中展示 “我是文本组件”** 的逻辑：

dart

@Entry @Component struct Index { build() { Column() { Text('我是文本组件') } // 容器垂直居中 .justifyContent(FlexAlign.Center) // 容器占满父组件宽度、高度 .width('100%') .height('100%') } } 

核心逻辑：

Column作为布局容器，通过justifyContent(FlexAlign.Center)让子组件（Text）垂直居中；
Text直接接收字符串参数，完成 “无样式” 文本的基础渲染；
外层width('100%')和height('100%')确保容器占满父组件空间，让文本视觉上居中。

三、进阶实战：定制化文本样式

通过组合Text的多属性，可实现精细的视觉定制。以下代码演示了字体样式、行高、修饰线、溢出规则、垂直对齐的综合应用：

dart

@Entry @Component struct Index { build() { Column() { // 第一段文本：复杂样式+溢出控制 Text('为开发框架（简称：ArkUI），是一套构建HarmonyOS应用 界面的框架，构建页的最小单位就是 组件。') .fontSize(20) // 字体大小20 .fontColor(Color.Red) // 文本颜色红色 .fontStyle(FontStyle.Italic) // 斜体样式 .fontWeight(FontWeight.Bolder) // 更粗的字重 .lineHeight(30) // 行高30，提升可读性 .decoration({ // 文本修饰线（下划线） type: TextDecorationType.Underline, style: TextDecorationStyle.DOTTED, // 点线样式 color: Color.Red // 修饰线颜色 }) .maxLines(2) // 最多显示2行 .textOverflow({ overflow: TextOverflow.Ellipsis }) // 超长省略 // 第二段文本：容器内垂直对齐 Text('我是文本组件二') .width(200) // 容器宽度200 .backgroundColor(Color.Pink) // 背景色（便于观察布局） .height(100) // 容器高度100 .align(Alignment.Bottom) // 文本在容器内垂直底部对齐 } .justifyContent(FlexAlign.Center) // 列容器垂直居中 .width('100%') .height('100%') } } 

关键配置解析：

1. 字体与基础样式

fontSize(20)+fontColor(Color.Red)：放大字体并设为红色，强化视觉焦点；
fontStyle(FontStyle.Italic)+fontWeight(FontWeight.Bolder)：通过 “斜体 + 粗体” 组合，让文本风格更具辨识度。

2. 行高与修饰线

lineHeight(30)：增大行间距，避免文本拥挤，提升长文本可读性；
decoration：配置 “红色点线下划线”，为文本添加装饰性标识（常用于链接、强调文本）。

3. 溢出与行数控制

maxLines(2)+textOverflow({ overflow: TextOverflow.Ellipsis })：限制文本最多显示 2 行，超长部分以 “…” 结尾，保证布局整洁（常见于列表标题、卡片摘要等场景）。

4. 垂直对齐与容器

width(200)+height(100)+backgroundColor(Color.Pink)：限定文本容器尺寸并添加背景，便于观察布局；
align(Alignment.Bottom)：让文本在容器内垂直底部对齐，体现align属性对文本垂直位置的控制能力。

四、总结

Text是 Flutter 中最基础的文本渲染组件，兼具 “易用性” 与 “扩展性”：

基础场景：仅需传入字符串，即可快速实现文本展示；
进阶场景：通过fontSize、decoration等属性，能定制字体、行高、修饰线等细节；
特殊场景：结合maxLines与textOverflow，可优雅处理 “超长文本溢出” 问题。

若需更复杂的富文本（如不同样式混排），可进一步探索RichText组件；但对于绝大多数 “单一样式文本” 场景，Text组件已能高效满足需求。

开设课程开班时间在线报名

OCP

2025.04.26

在线报名

HCIP-AI Solution

2025.04.26

在线报名

HCIE-openEuler

2025.05.03

在线报名

RHCA-CL260

2025.05.04

在线报名

HCIP-Cloud

2025.05.10

在线报名

PGCM直通车

2025.05.10

在线报名

HCIA-Datacom(晚班)

2025.05.19

在线报名

HCIA-Sec

2025.06.07

在线报名

RHCA-RH442

2025.06.07

在线报名

PMP

2025.06.10

在线报名

HCIA-Datacom

2025.06.14

在线报名

HCIE-AI Solution

2025.06.14

在线报名

HCIE-Datacom

2025.06.14

在线报名

HCIP-Datacom(晚班)

2025.06.16

在线报名

OCM

2025.06.21

在线报名

HCIE-Cloud

2025.06.21

在线报名

HCIP-Sec

2025.06.21

在线报名

HCIE-Bigdata

2025.06.28

在线报名

RHCE

2025.06.28

在线报名

HCIE-Datacom考前辅导

2025.07.05

在线报名

HCIP-Datacom深圳

2025.07.19

在线报名

CISP

2025.07.19

在线报名

HCIA-Datacom(晚班)

2025.07.21

在线报名

RHCA-RH436

2025.07.26

在线报名

OCP

2025.07.26

在线报名

HCIE-Sec

2025.08.09

在线报名

HCIA-AI Solution

2025.08.16

在线报名

HCIP-Datacom(晚班)

2025.08.25

在线报名

RHCA-RH358

2025.09.06

在线报名

PMP

2025.09.16

在线报名

HCIE-Datacom

2025.09.06

在线报名

HCIA-AI Solution

2025.09.27

在线报名

HCIA-Datacom

2025.09.27

在线报名

PGCM直通车

2025.10.11

在线报名

RHCA-DO374

2025.10.11

在线报名

HCIA-Sec

2025.10.11

在线报名

RHCE

2025.10.18

在线报名

HCIP-Datacom

2025.11.08

在线报名

HCIP-Sec

2025.11.08

在线报名

RHCA-CL260

2025.11.15

在线报名

OCP

2025.11.15

在线报名

HCIE-Sec

2025.12.13

在线报名

HCIE-Datacom

2026.01.10

在线报名

在线精品

课程商城

华为HCIA/HCIP认证考试-活动Redhat/Oracle持证福利

1课时

华为HCIE-AI Solution认证课程 | 人工智能培训

60课时

华为HCIP-Datacom培训认证数据通信高级工程师(IA+IP)

40课时

华为云计算认证HCIE-Cloud 培训课程

80课时

在线报名

报名已确认!

我们已收到您的信息
相关老师将尽快与您联系

友情链接

IT培训| 培训学校| 企业招聘| 大学生就业|