Text文本组件

博客主要介绍了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
              )
            ),
          ]
        ),
      )
    );
  }
}
<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、付费专栏及课程。

余额充值