Flutter之Text组件

作者: 习惯了_就好 | 来源:发表于2018-11-22 16:23 被阅读33次

Flutter组件学习（四）—— 布局组件Row和Column
Flutter之Text组件
2019-10-13 Flutter学习(二)之Flutter
Flutter开发之Text组件
flutter Text组件
解决Text的overflow属性不生效的问题
【Flutter】基础组件【01】Text
flutter 展示自定义图标
flutter学习（二）结构详解
Flutter（7）：基础组件之Text

const Text(
this.data,//this.data 要显示的文本内容
    {Key key,
    this.style,
    this.textAlign,//文本对齐方式
    this.textDirection,//文本方向
    this.locale,
    this.softWrap,//是否自动换行 false文字不考虑容器大小，单行显示，超出屏幕部分将默认截断处理
    this.overflow,//文字超出屏幕之后的处理方式，TextOverflow.clip剪裁   TextOverflow.fade 渐隐  TextOverflow.ellipsis省略号
    this.textScaleFactor,//文本字体的缩放倍数，如：1.5则在默认字体上变成1.5倍大小字体，0.5则是0.5倍
    this.maxLines,//文本最多显示多少行
    this.semanticsLabel,
    }) : assert(data != null),
    textSpan = null,
    super(key: key);

const TextStyle({
    this.inherit = true, //默认为true，设置为false时候表示不显示
    this.color,//文字颜色
    this.fontSize,//文字大小 ，默认是14.0的
    this.fontWeight,//字体粗细  粗体和正常
    this.fontStyle,//文字样式，normal正常 italic 斜体
    this.letterSpacing,//字母间隙(负值可以让字母更紧凑)
    this.wordSpacing,//单词间隙(负值可以让单词更紧凑)
    this.textBaseline, //alphabetic：用于对齐字母字符底部的水平线,  ideographic：用于对齐表意字符的水平线
    this.height,  //用在Text控件上的时候，会乘以fontSize做为行高
    this.locale,//国际化
    this.foreground,//用paint来渲染text，也可以用他来改变字体颜色等
    this.background,
    this.decoration, //四种下划线、lineThrough删除线、overline上划线，默认是无
    this.decorationColor,//线的颜色
    this.decorationStyle,//文字装饰的风格  dashed虚线大间隔,dotted虚线小间隔，double在underline和lineThrough时两条线，在overline时三条线，solid在underline和solidlineThrough时一条线,在overline两条线
    this.debugLabel,
    String fontFamily,
    String package,
    }) : fontFamily = package == null ? fontFamily : 'packages/$package/$fontFamily',
    assert(inherit != null),
    assert(identical(color, null) || identical(foreground, null), _kColorForegroundWarning);

const Text.rich(
    this.textSpan,//可以给文本中的每个textSpan设置其样式
    {
    Key key,
    this.style,
    this.textAlign,
    this.textDirection,
    this.locale,
    this.softWrap,
    this.overflow,
    this.textScaleFactor,
    this.maxLines,
    this.semanticsLabel,
    }): assert(textSpan != null),
    data = null,
    super(key: key);

body: ListView(
          children: <Widget>[
            Container(
              margin: EdgeInsets.only(bottom: 10.0),
              color: Color.fromARGB(255, 241, 241, 241),
              child: Text("文本方向 TextDirection.ltr",
                  textDirection: TextDirection.ltr
              ),
            ),
            Container(
              margin: EdgeInsets.only(bottom: 10.0),
              color: Color.fromARGB(255, 241, 241, 241),
              child: Text("文本方向 TextDirection.rtl",
                  textDirection: TextDirection.rtl
              ),
            ),
            Container(
              margin: EdgeInsets.only(bottom: 10.0),
              color: Color.fromARGB(255, 241, 241, 241),
              child: Text("文本对齐方式 TextAlign.center",
                textAlign: TextAlign.center,
              ),
            ),
            Container(
              margin: EdgeInsets.only(bottom: 10.0),
              color: Color.fromARGB(255, 241, 241, 241),
              child: Text("文本对齐方式 TextAlign.left",
                textAlign: TextAlign.left,
              ),
            ),
            Container(
              margin: EdgeInsets.only(bottom: 10.0),
              color: Color.fromARGB(255, 241, 241, 241),
              child: Text("文本对齐方式 TextAlign.right",
                textAlign: TextAlign.right,
              ),
            ),
            Container(
              margin: EdgeInsets.only(bottom: 10.0),
              color: Color.fromARGB(255, 241, 241, 241),
              child: Text("文本对齐方式 TextAlign.justify 两端对齐",
                textAlign: TextAlign.justify,
              ),
            ),
            Container(
              margin: EdgeInsets.only(bottom: 10.0),
              color: Color.fromARGB(255, 241, 241, 241),
              child: Text("文本对齐方式 TextAlign.start",
                textAlign: TextAlign.start,
              ),
            ),
            Container(
              margin: EdgeInsets.only(bottom: 10.0),
              color: Color.fromARGB(255, 241, 241, 241),
              child: Text("文本对齐方式 TextAlign.end",
                textAlign: TextAlign.end,
              ),
            ),
            Container(
              margin: EdgeInsets.only(bottom: 10.0),
              color: Color.fromARGB(255, 241, 241, 241),
              child: Text(
                "softWrap: true    是否自动换行是否自动换行是否自动换行是否自动换行是否自动换行是否自动换行是否自动换行是否自动换行是否自动换行",
                softWrap: true,
              ),
            ),
            Container(
              margin: EdgeInsets.only(bottom: 10.0),
              color: Color.fromARGB(255, 241, 241, 241),
              child: Text(
                "softWrap: false    是否自动换行是否自动换行是否自动换行是否自动换行是否自动换行是否自动换行是否自动换行是否自动换行是否自动换行",
                softWrap: false,
              ),
            ),
            Container(
              margin: EdgeInsets.only(bottom: 10.0),
              color: Color.fromARGB(255, 241, 241, 241),
              child: Text(
                "TextOverflow.clip    文字超出屏幕之后的处理方式文字超出屏幕之后的处理方式文字超出屏幕之后的处理方式",
                overflow: TextOverflow.clip,
              ),
            ),
            Container(
              margin: EdgeInsets.only(bottom: 10.0),
              color: Color.fromARGB(255, 241, 241, 241),
              child: Text(
                "TextOverflow.ellipsis    文字超出屏幕之后的处理方式文字超出屏幕之后的处理方式文字超出屏幕之后的处理方式",
                overflow: TextOverflow.ellipsis,
              ),
            ),
            Container(
              margin: EdgeInsets.only(bottom: 10.0),
              color: Color.fromARGB(255, 241, 241, 241),
              child: Text(
                "TextOverflow.fade    文字超出屏幕之后的处理方式文字超出屏幕之后的处理方式文字超出屏幕之后的处理方式",
                overflow: TextOverflow.fade,
              ),
            ),
            Container(
              margin: EdgeInsets.only(bottom: 10.0),
              color: Color.fromARGB(255, 241, 241, 241),
              child: Text("textScaleFactor  字体缩放倍数",
                textScaleFactor: 2.0,
              ),
            ),
            Container(
              margin: EdgeInsets.only(bottom: 10.0),
              color: Color.fromARGB(255, 241, 241, 241),
              child: Text(
                "maxLines  文本最多显示多少行,可以和overflow: TextOverflow.ellipsis一起使用，在最后一行末尾显示省略号  文本最多显示多少行文本最多显示多少行文本最多显示多少行",
                maxLines: 2,
                overflow: TextOverflow.ellipsis,
              ),
            ),
            Container(
              margin: EdgeInsets.only(bottom: 10.0),
              color: Color.fromARGB(255, 241, 241, 241),
              child: Text("color颜色，fontSize大小",
                style: TextStyle(
                    color: Color(0xffff0000),
                    fontSize: 18.0
                ),
              ),
            ),
            Container(
              margin: EdgeInsets.only(bottom: 10.0),
              color: Color.fromARGB(255, 241, 241, 241),
              child: Text("fontWeight 字体粗细  w100 ~ w900 和粗体与正常，正常是w400,粗体是w700",
                style: TextStyle(
                    fontWeight: FontWeight.bold
                ),
              ),
            ),
            Container(
              margin: EdgeInsets.only(bottom: 10.0),
              color: Color.fromARGB(255, 241, 241, 241),
              child: Text("fontStyle 文字样式，normal正常, italic 斜体",
                style: TextStyle(
                    fontStyle: FontStyle.italic
                ),
              ),
            ),
            Container(
              margin: EdgeInsets.only(bottom: 10.0),
              color: Color.fromARGB(255, 241, 241, 241),
              child: Text(
                "对比wordSpacing单词间隙, letterSpacing字母间隙, Hello World Hello World",
                style: TextStyle(
                ),
              ),
            ),
            Container(
              margin: EdgeInsets.only(bottom: 10.0),
              color: Color.fromARGB(255, 241, 241, 241),
              child: Text(
                "对比wordSpacing单词间隙, letterSpacing字母间隙, Hello World Hello World",
                style: TextStyle(
                  wordSpacing: 10.0,
                  letterSpacing: 1.0,
                ),
              ),
            ),
            Container(
              margin: EdgeInsets.only(bottom: 10.0),
              color: Color.fromARGB(255, 241, 241, 241),
              child: Text(
                "对比wordSpacing单词间隙, letterSpacing字母间隙, Hello World Hello World",
                style: TextStyle(
                  wordSpacing: 1.0,
                  letterSpacing: 5.0,
                ),
              ),
            ),
            Container(
              margin: EdgeInsets.only(bottom: 10.0),
              color: Color.fromARGB(255, 241, 241, 241),
              child: Text(
                "textBaseline Hello World Hello World Hello World Hello World \n哦哦哦哦哦哦哦哦哦哦哦哦哦哦哦",
                style: TextStyle(
                    textBaseline: TextBaseline.alphabetic
                ),
              ),
            ),
            Container(
              margin: EdgeInsets.only(bottom: 10.0),
              color: Color.fromARGB(255, 241, 241, 241),
              child: Text(
                "textBaseline Hello World Hello World Hello World Hello World \n哦哦哦哦哦哦哦哦哦哦哦哦哦哦哦",
                style: TextStyle(
                    textBaseline: TextBaseline.ideographic
                ),
              ),
            ),
            Container(
              margin: EdgeInsets.only(bottom: 10.0),
              color: Color.fromARGB(255, 241, 241, 241),
              child: Text(
                "height会乘以fontSize做为行高",
                style: TextStyle(
                  height: 2.0,
                ),
              ),
            ),
            Container(
              margin: EdgeInsets.only(bottom: 10.0),
              color: Color.fromARGB(255, 241, 241, 241),
              child: Text(
                "height会乘以fontSize做为行高",
                style: TextStyle(
                  height: 1.0,
                ),
              ),
            ),
            Container(
              margin: EdgeInsets.only(bottom: 10.0),
              color: Color.fromARGB(255, 241, 241, 241),
              child: Text(
                "decoration四种下划线underline、lineThrough删除线、overline上划线，默认是无；decorationColor线的颜色；文字装饰的风格  dashed虚线大间隔,dotted虚线小间隔，double在underline和lineThrough时两条线，在overline时三条线，solid在underline和solidlineThrough时一条线,在overline两条线",
                style: TextStyle(
                  fontSize: 20.0,
                  decoration: TextDecoration.lineThrough,
                  decorationColor: Color(0xffff0000),
                  decorationStyle: TextDecorationStyle.solid,
                ),
              ),
            ),
            Container(
              margin: EdgeInsets.only(bottom: 10.0),
              color: Color.fromARGB(255, 241, 241, 241),
              child: Text.rich(
                TextSpan(
                    text: "Text.rich方式",
                    children: <TextSpan>[
                      TextSpan(
                          text: "改变颜色",
                          style: TextStyle(
                            color: Color(0xffff0000),
                          )
                      ),
                      TextSpan(
                          text: "改变大小",
                          style: TextStyle(
                              fontSize: 12.0
                          )
                      ),
                    ]
                ),
              ),
            ),
          ],
        ),

练习demo，链接https://gitee.com/xgljh/Flutter

Flutter组件学习（四）—— 布局组件Row和Column
序言之前几篇文章介绍了Flutter——Text文字组件，Flutter——Image图片组件，Flutter—...
Flutter之Text组件
练习demo，链接https://gitee.com/xgljh/Flutter
2019-10-13 Flutter学习(二)之Flutter
一、Flutter Text 组件二、Container 组件说明： border:Border.all()...
Flutter开发之Text组件
Text 对一个APP而言文本无处不在，Text是进行Flutter开发最常用的组件之一。 Text常用的属性有哪...
flutter Text组件
main.dart 代码：效果：
解决Text的overflow属性不生效的问题
今天学习Flutter的Text组件时，遇到了一个问题：Text的overflow: TextOverflow.e...
【Flutter】基础组件【01】Text
?【Flutter】学习养成记，【程序员必备小知识】 ? 今日小知识——【Flutter】基础组件【01】Text...
flutter 展示自定义图标
参考： Flutter Icon、ImageIcon、IconButton参数详解 Flutter控件之Text ...
flutter学习（二）结构详解
本篇主要讲解flutter的目录结构介绍、入口、自定义widget、center组件、text组件、Materia...
Flutter（7）：基础组件之Text
Flutter教学目录[https://www.jianshu.com/p/3320350b3814]持续更新中 ...