Flutter - view - Text

概述

继承关系：

Object > Diagnosticable > DiagnosticableTree > Widget > StatelessWidget > Text

一系列具有单一样式的文本。

“文本”小组件显示单个样式的文本字符串。
字符串可能会跨越多行，也可能全部显示在同一行上，具体取决于布局约束。

构造

创建一个文本组件的构造方法

Text(String data, { Key key, 
                    TextStyle style, 
                    TextAlign textAlign, 
                    TextDirection textDirection, 
                    Locale locale, bool softWrap, 
                    TextOverflow overflow, 
                    double textScaleFactor, 
                    int maxLines, 
                    String semanticsLabel })

创建一个具有文本构件TextSpan的构造方法

Text.rich(TextSpan textSpan, { Key key, 
                               TextStyle style, 
                               TextAlign textAlign, 
                               TextDirection textDirection,
                                Locale locale, 
                               bool softWrap, 
                               TextOverflow overflow, 
                               double textScaleFactor, 
                               int maxLines, 
                               String semanticsLabel })

代码示例：

Text(
  'Hello, $_counter! How are you?',
  textAlign: TextAlign.center,
  overflow: TextOverflow.ellipsis,
  style: TextStyle(fontWeight: FontWeight.bold),
)

const Text.rich(
  TextSpan(
    text: 'Hello', // default text style
    children: <TextSpan>[
      TextSpan(text: ' beautiful ', style: TextStyle(fontStyle: FontStyle.italic)),
      TextSpan(text: 'world', style: TextStyle(fontWeight: FontWeight.bold)),
    ],
  ),
)

效果图：

text text.rich

属性

final data → String
表示text显示的文本

final locale → Locale  
用于选择字体时相同的Unicode字符可以有不同的呈现，根据不同的语言环境。
语言环境属性，使用情况较少

final maxLines → int
文本行的可选最大数目跨越，如果有必要包装。如果文本超出线的给定数量，它将根据被截断
最大的行数，超出部分将截断，
默认值：是DefaultTextStyle.maxLines中的值

final overflow → TextOverflow
如何视觉溢出的处理方式，默认值是clip。处理方式有：

    clip → const TextOverflow
    文本溢出部分直接截断 

    ellipsis → const TextOverflow
    省略号表示文本溢出

    fade → const TextOverflow
    淡出表示文本溢出。

final softWrap → bool
无论是文本应在软换行符突破
如果为假，在文本中的字形将被定位好像有无限的水平空间。ui类似overflow = TextOverflow.clip

final textAlign → TextAlign
文字居中方向（类似gravity）
值：center、end、left、right、start、与Android的意义无变化

final textDirection → TextDirection
该文本的方向性。
此属性的值决定了textAlign = TextAlign.stat/end的方向

final textScaleFactor → double
字体的像素的每个逻辑像素的数目。
例如，如果文本的比例因子为1.5，文本会比指定的字体大小大50％。

final style → TextStyle
如果非空，风格使用这个文本
style参数是可选的。默认值：DefaultTextStyle
若是给值则给定样式与DefaultTextStyle合并

final textSpan → TextSpan
要显示的文本作为TextSpan

属性中TextStyle 和 TextSpan 复杂一点，单拿出来说

TextStyle

构造方法

TextStyle({bool inherit: true, 
            Color color, 
            double fontSize, 
            FontWeight fontWeight, 
            FontStyle fontStyle, 
            double letterSpacing, 
            double wordSpacing, 
            TextBaseline textBaseline, 
            double height, 
            Locale locale, 
            Paint foreground, 
            Paint background, 
            List<Shadow> shadows,
            TextDecoration decoration, 
            Color decorationColor, 
            TextDecorationStyle decorationStyle, 
            String debugLabel, 
            String fontFamily, 
            String package })

设置文本样式

代码示例：

const Text.rich(
  TextSpan(
    text: "这是普通文本 \n", // default text style
    children: <TextSpan>[
      TextSpan(text: "这是斜体样式效果\n", style: TextStyle(fontStyle: FontStyle.italic)),
      TextSpan(text: "这是加粗样式效果\n", style: TextStyle(fontWeight: FontWeight.bold,color: Color.fromARGB(255, 255, 150, 150))),
      TextSpan(text: "字体颜色\n",style: TextStyle(color: Color.fromARGB(255, 255, 150, 150),fontSize: 24.0)),
      TextSpan(text: "字体大小\n",style: TextStyle(fontSize: 24.0)),
      TextSpan(text: "行高行高行高行高行高行高行高行高行高行高行高行高行高行高行高行高行高行高行高行高\n",style: TextStyle(height: 1.5)),
      TextSpan(text: "中划线\n",style: TextStyle(decoration: TextDecoration.lineThrough,
        decorationColor: Colors.red,decorationStyle: TextDecorationStyle.dashed)),//中划线，虚线
      TextSpan(text: "上划线\n",style: TextStyle(decoration: TextDecoration.overline,
          decorationColor: Colors.red,decorationStyle: TextDecorationStyle.dotted)),//上划线，点虚线
      TextSpan(text: "下划线\n",style: TextStyle(decoration: TextDecoration.underline,
          decorationColor: Colors.red,decorationStyle: TextDecorationStyle.double)),//上划线，双直线
    ],
  ),
    textAlign:TextAlign.center,//text.rich设置的居中
),

其中下划线的展示方式还有：直线、波浪线，可以更换decorationStyle的值查看

效果图：

TextSpan。

继承关系：
Object > Diagnosticable > DiagnosticableTree > TextSpan

构造方法

TextSpan({TextStyle style, 
          String text, 
          List<TextSpan> children, 
          GestureRecognizer recognizer })

代码示例：

参考textStyle

RichText

能够更丰富的展示不同样式的文本（个人理解是综合了text 和 text.rich）

构造

RichText({Key key, 
          @required TextSpan text, 
          TextAlign textAlign: TextAlign.start, 
          TextDirection textDirection, 
          bool softWrap: true, 
          TextOverflow overflow: TextOverflow.clip, 
          double textScaleFactor: 1.0, 
          int maxLines, 
          Locale locale })

代码示例：

RichText(
    text: TextSpan(
    text: 'Hello ',
    style: DefaultTextStyle.of(context).style,
    children: <TextSpan>[
      TextSpan(text: 'bold', style: TextStyle(fontWeight: FontWeight.bold)),
      TextSpan(text: ' world!'),
    ],
  ),
),

DefaultTextStyle

构造

DefaultTextStyle({Key key, 
                  @required TextStyle style, 
                  TextAlign textAlign, 
                  bool softWrap: true, 
                  TextOverflow overflow: TextOverflow.clip, 
                  int maxLines, 
                  @required Widget child })

TextPainter

这描绘了一个对象TextSpan树成画布

目前还不理解不了，暂时先链接到官方文档上

参考地址：
https://docs.flutter.io/flutter/widgets/Text-class.html