Text文本组件

最新推荐文章于 2025-05-19 16:34:05 发布
最新推荐文章于 2025-05-19 16:34:05 发布
阅读量567 收藏
点赞数 1
CC 4.0 BY-SA版权
分类专栏： flutter 文章标签： flutter
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/c_liufeng/article/details/121693702
博客主要介绍了Flutter中Text文本组件属性，包括style:TextStyle()文本样式属性。还提到使用RichText与TextSpan可给一段文本定义不同样式，其中RichText用于在一句话或一段文字里显示不同样式文字，TextSpan用于指定文本片段风格及手势交互。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

Text 文本组件属性：

API名称实现类、类型功能
textAlignTextAlign文本对齐方式（center居中，left左对齐，right右对齐，justfy两端对齐）
textDirectionTextDirection文本方向（ltr从左至右，rtl从右至左）
softWaredouble是否自动换行（true自动换行，false单行显示，超出屏幕部分默认截断处理）
overflowTextOverflow文字超出屏幕之后的处理方式（clip裁剪，fade渐隐，ellipsis省略号）
textScaleFactordouble字体显示倍率
maxLinesdouble文字显示最大行数
styleTextStyle字体的样式设置
示例：

在这里插入图片描述

class Body extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Column(
      children: [
        Card(
          margin: EdgeInsets.fromLTRB(10, 10, 10, 0),
          color: Colors.blue[100],
          child: Column(
            children: [
              Row(
                children: [
                  Text("textAlign", style: TextStyle(color: Colors.red, fontSize: 40)),
                ],
              ),
              Text(
                'Flutter是谷歌的移动UI框架，可以快速在iOS和Android上构建高质量的原生用户界面。 Flutter可以与现有的代码一起工作。在全世界，Flutter正在被越来越多的开发者和组织使用，并且Flutter是完全免费、开源的。', 
                textAlign: TextAlign.left,
              ),
            ],
          )
        ),
        Card(
          margin: EdgeInsets.fromLTRB(10, 10, 10, 0),
          color: Colors.blue[100],
          child: Column(
            children: [
              Row(
                children: [
                  Text("textDirection", style: TextStyle(color: Colors.red, fontSize: 40)),
                ],
              ),
              Text(
                'Flutter是谷歌的移动UI框架，可以快速在iOS和Android上构建高质量的原生用户界面。 Flutter可以与现有的代码一起工作。在全世界，Flutter正在被越来越多的开发者和组织使用，并且Flutter是完全免费、开源的。', 
                textDirection: TextDirection.rtl
              ),
            ],
          )
        ),
        Card(
          margin: EdgeInsets.fromLTRB(10, 10, 10, 0),
          color: Colors.blue[100],
          child: Column(
            children: [
              Row(
                children: [
                  Text("softWare", style: TextStyle(color: Colors.red, fontSize: 40)),
                ],
              ),
              Text(
                'Flutter是谷歌的移动UI框架，可以快速在iOS和Android上构建高质量的原生用户界面。 Flutter可以与现有的代码一起工作。在全世界，Flutter正在被越来越多的开发者和组织使用，并且Flutter是完全免费、开源的。', 
                softWrap: false,
              ),
            ],
          )
        ),
        Card(
          margin: EdgeInsets.fromLTRB(10, 10, 10, 0),
          color: Colors.blue[100],
          child: Column(
            children: [
              Row(
                children: [
                  Text("overflow", style: TextStyle(color: Colors.red, fontSize: 40)),
                ],
              ),
              Text(
                'Flutter是谷歌的移动UI框架，可以快速在iOS和Android上构建高质量的原生用户界面。 Flutter可以与现有的代码一起工作。在全世界，Flutter正在被越来越多的开发者和组织使用，并且Flutter是完全免费、开源的。', 
                overflow: TextOverflow.ellipsis,
                maxLines: 2, // 指定行数
              ),
            ],
          )
        ),
        Card(
          margin: EdgeInsets.fromLTRB(10, 10, 10, 0),
          color: Colors.blue[100],
          child: Column(
            children: [
              Row(
                children: [
                  Text("textScaleFactor", style: TextStyle(color: Colors.red, fontSize: 40)),
                ],
              ),
              Text(
                'Flutter是谷歌的移动UI框架，可以快速在iOS和Android上构建高质量的原生用户界面。 Flutter可以与现有的代码一起工作。在全世界，Flutter正在被越来越多的开发者和组织使用，并且Flutter是完全免费、开源的。', 
                textScaleFactor: 2, // 文字缩放倍数
                overflow: TextOverflow.ellipsis,
              ),
            ],
          )
        ),
        Card(
          margin: EdgeInsets.fromLTRB(10, 10, 10, 0),
          color: Colors.blue[100],
          child: Column(
            children: [
              Row(
                children: [
                  Text("style 文字样式", style: TextStyle(color: Colors.red, fontSize: 40)),
                ],
              ),
              Text(
                'Flutter是谷歌的移动UI框架，可以快速在iOS和Android上构建高质量的原生用户界面。 Flutter可以与现有的代码一起工作。在全世界，Flutter正在被越来越多的开发者和组织使用，并且Flutter是完全免费、开源的。', 
                style: TextStyle(
                  color: Colors.cyan,
                )
              ),
            ],
          )
        ),
      ],
    );
  }
}

style:TextStyle() 文本样式属性

API名称实现类、类型功能
decorationTextDecoration文字装饰线（none没有线，lineThrough删除线，overline上划线，underline下划线）
decorationColor无文字装饰线颜色
decorationStyleTextDecorationStyle文字装饰线风格（[dashed,dotted]虚线，double两根线，solid一根实线，wavy波浪线）
wordSpacingdouble单词间隙（如果是负值，会让单词变得更紧凑）
letterSpacingdouble字母间隙（如果是负值，会让字母变得更紧凑）
fontStyleFontStyle文字样式（italic斜体，normal正常体）
fontSizedouble文字大小
colorColors、Color文字颜色
fontWeightFontWeight字体粗细（bold粗体，normal正常体）

示例：
在这里插入图片描述

在这里插入图片描述

class Body extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return SingleChildScrollView(
      child: Column(   
      children: [
        Card(
          margin: EdgeInsets.fromLTRB(10, 10, 10, 0),
          color: Colors.blue[100],
          child: Column(
            children: [
              Row(
                children: [
                  Text("decoration", style: TextStyle(color: Colors.red, fontSize: 40)),
                ],
              ),
              Text(
                'Flutter是谷歌的移动UI框架，可以快速在iOS和Android上构建高质量的原生用户界面。 Flutter可以与现有的代码一起工作。在全世界，Flutter正在被越来越多的开发者和组织使用，并且Flutter是完全免费、开源的。', 
                style: TextStyle(
                  decoration: TextDecoration.lineThrough,
                )
              ),
            ],
          )
        ),
        Card(
          margin: EdgeInsets.fromLTRB(10, 10, 10, 0),
          color: Colors.blue[100],
          child: Column(
            children: [
              Row(
                children: [
                  Text("decorationColor", style: TextStyle(color: Colors.red, fontSize: 40)),
                ],
              ),
              Text(
                'Flutter是谷歌的移动UI框架，可以快速在iOS和Android上构建高质量的原生用户界面。 Flutter可以与现有的代码一起工作。在全世界，Flutter正在被越来越多的开发者和组织使用，并且Flutter是完全免费、开源的。', 
                style: TextStyle(
                  decorationColor: Colors.deepOrange,
                  decoration: TextDecoration.lineThrough,
                )
              ),
            ],
          )
        ),
        Card(
          margin: EdgeInsets.fromLTRB(10, 10, 10, 0),
          color: Colors.blue[100],
          child: Column(
            children: [
              Row(
                children: [
                  Text("decorationStyle", style: TextStyle(color: Colors.red, fontSize: 40)),
                ],
              ),
              Text(
                'Flutter是谷歌的移动UI框架，可以快速在iOS和Android上构建高质量的原生用户界面。 Flutter可以与现有的代码一起工作。在全世界，Flutter正在被越来越多的开发者和组织使用，并且Flutter是完全免费、开源的。', 
                style: TextStyle(
                  decoration: TextDecoration.lineThrough,
                  decorationStyle: TextDecorationStyle.double,
                )
              ),
            ],
          )
        ),
        Card(
          margin: EdgeInsets.fromLTRB(10, 10, 10, 0),
          color: Colors.blue[100],
          child: Column(
            children: [
              Row(
                children: [
                  Text("wordSpacing", style: TextStyle(color: Colors.red, fontSize: 40)),
                ],
              ),
              Text(
                'Hello Flutter, I very link', 
                style: TextStyle(
                  wordSpacing: 20,
                )
              ),
            ],
          )
        ),
        Card(
          margin: EdgeInsets.fromLTRB(10, 10, 10, 0),
          color: Colors.blue[100],
          child: Column(
            children: [
              Row(
                children: [
                  Text("letterSpacing", style: TextStyle(color: Colors.red, fontSize: 40)),
                ],
              ),
              Text(
                'Hello Flutter, I very link', 
                style: TextStyle(
                  letterSpacing: 20,
                )
              ),
            ],
          )
        ),
        Card(
          margin: EdgeInsets.fromLTRB(10, 10, 10, 0),
          color: Colors.blue[100],
          child: Column(
            children: [
              Row(
                children: [
                  Text("fontStyle", style: TextStyle(color: Colors.red, fontSize: 40)),
                ],
              ),
              Text(
                'Hello Flutter, I very link', 
                style: TextStyle(
                  fontStyle: FontStyle.italic,
                )
              ),
            ],
          )
        ),
        Card(
          margin: EdgeInsets.fromLTRB(10, 10, 10, 0),
          color: Colors.blue[100],
          child: Column(
            children: [
              Row(
                children: [
                  Text("fontSize", style: TextStyle(color: Colors.red, fontSize: 40)),
                ],
              ),
              Text(
                'Hello Flutter, I very link', 
                style: TextStyle(
                  fontSize: 25.0,
                )
              ),
            ],
          )
        ),
        Card(
          margin: EdgeInsets.fromLTRB(10, 10, 10, 0),
          color: Colors.blue[100],
          child: Column(
            children: [
              Row(
                children: [
                  Text("color", style: TextStyle(color: Colors.red, fontSize: 40)),
                ],
              ),
              Text(
                'Hello Flutter, I very link', 
                style: TextStyle(
                   color: const Color(0xFF0099ff),//0x 后面开始 两位FF表示透明度16进制，之后的0099ff 代表RGB色值
                  //00%=FF（不透明） 
                  // 5%=F2 
                  // 10%=E5 
                  // 15%=D8 
                  // 20%=CC 
                  // 25%=BF 
                  // 30%=B2 
                  // 35%=A5 
                  // 40%=99 
                  // 45%=8c 
                  // 50%=7F 
                  // 55%=72 
                  // 60%=66 
                  // 65%=59 
                  // 70%=4c 
                  // 75%=3F 
                  // 80%=33 
                  // 85%=21 
                  // 90%=19 
                  // 95%=0c 
                  // 100%=00（全透明）
                  // Color.fromRGBO(55, 1, 200, 1), opacity:  透明度 0～1 
                  // Color.fromARGB(255, 55, 1, 200),a:  alpha值，0是透明的，255是完全不透明的
                  // Colors.red,
                )
              ),
            ],
          )
        ),
        Card(
          margin: EdgeInsets.fromLTRB(10, 10, 10, 0),
          color: Colors.blue[100],
          child: Column(
            children: [
              Row(
                children: [
                  Text("fontWeight", style: TextStyle(color: Colors.red, fontSize: 40)),
                ],
              ),
              Text(
                'Hello Flutter, I very link', 
                style: TextStyle(
                  fontWeight: FontWeight.w900,
                )
              ),
            ],
          )
        ),
      ],
    ),
    );
  }
}

给一段文本定义不同的样式 RichText 与TextSpan

  • RichText：如果想在一句话或者一段文字里面显示不同样式的文字,可以使用RichText
  • TextSpan：用于指定文本片段的风格及手势交互
示例：

在这里插入图片描述

class Body extends StatelessWidget {

  @override
  Widget build(BuildContext context) {
    return Container(
      child: RichText(
        text: TextSpan(
          children: [
            TextSpan(
              text: 'Hello wold',
              
              style: TextStyle(
                fontSize: 40.0,
                color: Colors.deepOrange,
                decoration: TextDecoration.lineThrough
              )
            ),
            TextSpan(
              text: '张三',
              style: TextStyle(
                fontSize: 30.0,
                color: Colors.deepPurpleAccent
              )
            ),
          ]
        ),
      )
    );
  }
}
3.5、文本显示（Text/Span）
lujianfeiccie2009的专栏
04-08 372
创建文本、添加子组件、自定义文本样式
【Unity-UGUI控件全面解析】| Text文本组件详解
努力前行，总会成为自己心中的那道光
04-29 2万+
Text文本，是为了向用户展示非交互式的文本信息。用于在工程中显示文字的地方(常用)，简单来说只要能看到字的情况下，一般都是用的这个组件。 在Hierarchy视图，选择 UI→Text 新建Text文本：
Text组件
LC900730的博客
09-15 473
Text项目可以显示纯文本clip属性clip属性用于设置文本是否被裁剪。如果该值设置为true，那么当文本与Text项目的边界矩形不符合时候会被裁剪。文本换行通过设置Text的wrapMode属性可以实现文本的自动换行。只有在明确设置了Text的width属性换行才会起作用。可用的换行模式 Text.NoWrap(默认)：不进行换行 Text.WordWrap：单词边界进行换行 Text.Wor
微信小程序text组件全解析与实战指南
最新发布
爱的叹息的专栏
05-19 1204
微信小程序的 <text> 组件是用于展示文本的基础组件，支持富文本内容、动态数据绑定和点击事件。它不会自动换行，适合用于标题、段落、按钮文字等场景。主要属性包括 selectable（是否可选中文本）、space（控制空格渲染方式）、decode（是否解码 HTML 实体字符）和 bindtap（点击事件）。通过 decode 属性可以安全地展示 HTML 转义字符，space 属性可以精确控制空格显示效果，而 selectable 则增强了用户的交互体验。开发时需注意 <text&gt
Text 组件
一个程序员的成长之路。。。
09-25 640
一、主要参数说明 textAlign: 文本对齐方式（center 居中，left 左对齐，right 右对齐，justfy 两端对齐） textDirection: 文本方向（ltr 从左至右，rtl 从右至左） overflow: 文字超出屏幕之后的处理方式（clip裁剪，fade 渐隐，ellipsis 省略号） textScaleFactor: 字体显示倍率 maxLines: 文...
HarmonyOS鸿蒙学习基础篇 - Text文本组件
2303_76218115的博客
01-24 5315
该组件从API Version 7开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。是可以显示一段文本的组件。该组件从API Version 7开始支持，从API version 9开始，该接口支持在ArkTS卡片中使用。
【Unity】Text文本组件的一些操作
weixin_57813136的博客
08-23 2753
设置文本内容：通过直接在Unity编辑器中的Text组件上输入文本，或者在代码中使用属性来设置文本内容。设置字体和字号：在Unity编辑器中，可以通过选择预设的字体或导入自定义字体，并且可以设置字号。设置颜色：在Unity编辑器中，可以通过选择文本组件并在Inspector面板中设置颜色，或在代码中使用属性来设置文本颜色。对齐方式：在Inspector面板中，可以选择对齐方式（左对齐、居中对齐、右对齐）来控制文本在Text组件中的对齐方式。文本效果：Unity的Text组件支持一些基本的文本效果，如加粗、倾
Unity 之 UGUI Text文本组件详解
热门推荐
陈言必行 -- Unity游戏开发领域优质博主
09-10 3万+
文本控件向用户显示非交互式文本。此控件可用于为其他 GUI 控件提供标题或标签，或显示说明或其他文本。
【Unity3D-UGUI系列】（二）Text文本组件详解
优快云博客专家，Unity3D高级软件工程师，《Unity 3D从入门到实战》作者。
08-27 1万+
推荐阅读 优快云主页 GitHub开源地址 Unity3D插件分享 简书地址 我的个人博客 QQ群：1040082875   大家好，我是佛系工程师☆恬静的小魔龙☆，不定时更新Unity开发技巧，觉得有用记得一键三连哦。 很早就想分享这个系列的文章，但是总是没有机会，最近就将这个系列整理一下，大家一起学习交流。 一、前言 首先，介绍一个UGUI，NGUI是UGUI的前身，Unity开发团队将NGUI的开发团队收到自己开发团队下，并且由此开发了UGUI。 UGUI系统是从Unity 4.6版本后才开.
基本文本组件（一）
xiaoyi239的专栏
09-01 436
第14章探讨了Swing组件集合的JSpinner所提供的动态输入选择控件。在本章中，我们将会了解Swing基本文本组件的基本功能。更为高级的文本组件将会下一章中进行探讨。 Swing组件集合包含五个文本组件。他们共享一个共同的父类，JTextComponent，其中定义了所有的文本组件的更同行为。 JTextComponent的直接子类是JTextField，JTextArea以及JEditor...
基础组件-label
m0_62236091的博客
05-14 255
支持如下样式： 名称 类型 默认值 必填 描述 color <color> 手机：#e5000000 智慧屏：#e5ffffff 智能穿戴：#ffffffff 否 设置文本的颜色。 font-size <length>
基础组件：Text文本组件
Cyx080811的博客
10-21 231
当overflow设置为TextOverflow.MARQUEE时，文本在一行内滚动显示，设置maxLines及copyOption属性均不生效。当overflow设置为TextOverflow.None、TextOverflow.Clip、TextOverflow.Ellipsis时，需配合maxLines使用，单独设置不生效。从API version 12开始，当overflow设置为TextOverflow.MARQUEE时，支持ImageSpan组件，文本和图片在一行内滚动显示。
React Native组件篇（一） — Text组件
2401_83817971的博客
03-29 963
技术是没有终点的，也是学不完的，最重要的是活着、不秃。零基础入门的时候看书还是看视频，我觉得成年人，何必做选择题呢，两个都要。喜欢看书就看书，喜欢看视频就看视频。最重要的是在自学的过程中，一定不要眼高手低，要实战，把学到的技术投入到项目当中，解决问题，之后进一步锤炼自己的技术。技术学到手后，就要开始准备面试了，找工作的时候一定要好好准备简历，毕竟简历是找工作的敲门砖，还有就是要多做面试题，复习巩固。有需要面试题资料的朋友点击这里即可获取！！！。最后。
【微信小程序】text 组件详解 ✍️
lph159的博客
12-02 1740
在微信小程序中，`text` 组件是用于展示文本内容的基础组件之一。它支持文本的显示、样式定制以及与其他组件的组合使用。无论是在页面上显示提示信息、标题、正文内容，还是构建富文本效果，`text` 组件都是开发过程中不可或缺的元素。本文将详细介绍 `text` 组件的常用属性、使用方法以及实际应用场景，帮助你更好地掌握其使用。
HarmonyOS（鸿蒙）——Text（文本）组件介绍
Java框架、并发编程、分布式、微服务、Redis、HarmonyOS、中间件等技术
08-21 5300
本文已收录于专栏 [❤️《鸿蒙开发》❤️](https://blog.youkuaiyun.com/qq_41125219/category_11227374.html) 欢迎各位关注、三连博主的文章及专栏，每周定期更新1-5篇基础文章，共勉！ 一、简介 Text是用来显示字符串的组件，在界面上显示为一块文本区域。Text作为一个基本组件，有很多扩展，常见的有按钮组件Button，文本编辑组件TextField。 Text组件继承自Componet。 华为官方学习地址： https://develope..
Flutter 文本组件(Text)
曾阿牛的博客
03-01 293
文本组件(Text)负责显示文本和定义显示样式，常用属性见下表： Text组件属性及描述 属性名称 类型 默认值 说明 data String 数据为要显示的文本 maxLines int 0 文本显示的最大行数 style TextStyle null 文本样式，可定义文本的字体大小、颜色、粗细等 t...
unity Text文本组件
03-15
<think>好的，用户想了解Unity中Text文本组件的使用方法、属性和示例。我需要根据提供的引用内容来整理答案。首先，我要确认用户的问题范围，他们可能刚接触Unity的UI系统，需要基础指导。 根据引用1和引用2，Text组件的基本属性包括text、fontSize、color等。引用1中的代码示例展示了如何在脚本中使用换行符和富文本标签，比如颜色变化。引用2提到了动态更新文本内容的方法，这应该是一个重要的使用场景。 接下来，用户可能需要知道如何引用Text组件。引用2和引用5都展示了在脚本中声明public Text变量，并通过GetComponent或拖拽赋值。这需要详细说明，特别是对新手来说，组件引用是关键步骤。 富文本功能是Text组件的一个亮点，引用1中的示例使用了<color>标签和换行符，这说明需要强调富文本的支持情况，以及如何在代码中应用。同时，引用2中的Start方法设置了文本内容，这可以作为一个基本示例。 动态更新文本的部分，引用4和引用5的Slider示例展示了如何通过事件监听来更新Text，比如滑动条的值变化时显示数值。这部分可以作为动态交互的例子，说明Text组件与其他UI组件的联动。 另外，需要注意Text组件的性能优化，比如文本过长时的处理，但引用中没有提到相关内容，可能需要避免猜测，只基于现有资料。如果有遗漏的重要属性，比如对齐方式、字体样式，但引用中未涉及，所以暂时不提及。 最后，整理结构要清晰，分点讲解属性、使用方法和示例。确保每个部分都有对应的引用支持，比如代码示例来自引用1和引用2，动态更新参考引用4和5。同时，生成的相关问题要围绕用户可能进一步想了解的内容，比如性能优化、多语言支持等，但需根据现有引用合理提出，比如优化方法可能涉及文本渲染效率，而多语言支持可能需要动态文本更新，这在示例中已有基础。</think>### Unity Text文本组件使用详解 #### 一、核心属性说明 1. **text**：文本内容，支持富文本标签（如`<color=red>文字</color>`）和转义字符`\n`[^1] 2. **font**：字体资源引用（需导入.ttf/.otf字体文件） 3. **fontSize**：字号大小（受Screen Space Canvas缩放影响） 4. **color**：文本颜色（支持RGBA值设置透明度）[^2] 5. **alignment**：文本对齐方式（水平/垂直方向9种组合） 6. **horizontalOverflow**/verticalOverflow：文本溢出处理方式 #### 二、基础使用示例 ```csharp using UnityEngine; using UnityEngine.UI; public class TextDemo : MonoBehaviour { public Text myText; // 拖拽赋值 void Start() { // 设置富文本内容（带颜色与换行） myText.text = "<color=#FF0000>紧急！</color>\n剩余时间：<b>30</b>秒"; // 修改字体属性 myText.fontSize = 24; myText.color = new Color(0.2f, 0.8f, 0.4f, 1f); } } ``` #### 三、动态更新实践 结合Slider实现数值显示（引用[4][5]的改进版）： ```csharp public class ValueDisplay : MonoBehaviour { public Slider progressSlider; public Text valueText; void Start() { progressSlider.onValueChanged.AddListener(UpdateProgress); } void UpdateProgress(float value) { valueText.text = $"加载进度：{value:P0}"; // 颜色渐变效果 valueText.color = Color.Lerp(Color.red, Color.green, value); } } ``` #### 四、富文本特性应用 支持标签类型： - `<b>`粗体 - `<i>`斜体 - `<size=30>字号</size>` - `<color=#RRGGBBAA>颜色</color>` - `<material=1>材质效果</material>` #### 五、性能优化建议 1. 避免每帧更新文本内容（可设置更新频率阈值） 2. 静态文字建议提前生成位图字体 3. 批量文本使用TextMeshPro替代方案
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

夜丶陌颜

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值