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
              )
            ),
          ]
        ),
      )
    );
  }
}
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

打赏作者

夜丶陌颜

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

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

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

打赏作者

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

抵扣说明:

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

余额充值