flutter学习笔录 基础 widget----Text

1.属性

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

1.TextAlign: 文本的对齐方式；可以选择左对齐、右对齐还是居中。注意，对齐的参考系是Text widget本身。本例中虽然是指定了居中对齐，但因为Text文本内容宽度不足一行，Text的宽度和文本内容长度相等，那么这时指定对齐方式是没有意义的，只有Text宽度大于文本内容长度时指定此属性才有意义

2.maxLines 最多行数

3.textScaleFactor 相对当前字体的缩放因子相对于style的fontSize

4.overflow 文字的溢出方式
  --clip：超出部分裁减掉，默认值
  --fade：在尾部蒙上一层阴影
  --ellipsis：在尾部显示...

5.softWrap 文本是否应该在换行符处断行

6.textDirection 文本显示的方向

7.locale 用于在相同Unicode字符可以根据区域设置不同时选择字体

8.semanticsLabel 该文本的另一种语义标签

9.style  样式
  -- color：字体颜色
  -- fontSize：字体大小
  -- fontWeight:字体的粗细
  -- fontStyle：正常还是斜体
  -- letterSpacing：每个字符之间的间距，可设置负数，负数使字体之间更紧凑
  -- wordSpacing：单个空格的宽度，如果你两个字符之间间隔5个空格，则这两个字符之间的距离就是5 * wordSpacing。可设置负数，负数使字体之间更紧凑
  -- textBaseline：文本对齐方式 TextBaseline枚举值
  -- height：文本高度的倍数，height * 文本高度 = Text的高度，文本垂直绘制起点向下偏移
  -- locale：本地化，指定当前文本采用什么语言
  -- foreground:字体的前景色，覆盖在字体上面
  -- background：字体的背景色
  -- shadows：文字阴影（相当于文字的影子）
  -- decoration：绘制下划线、上划线、删除线
  -- decorationColor：线的颜色
  -- decorationStyle：线的样式，实线、两条线，点线，短线条间隔、波浪线
  -- fontFamily：字体库
  -- package：当使用的字体库是其它包中内容时，指定字体库所在的包名称

2. 例子

Text("Hello world "*6,  //字符串重复六次
  textAlign: TextAlign.center,
)；

Text("Hello world! I'm Jack. "*4,
  maxLines: 1,
  overflow: TextOverflow.ellipsis,
);

Text("Hello world",
  style: TextStyle(
    color: Colors.blue,
    fontSize: 18.0,
    height: 1.2,  
    fontFamily: "Courier",
    background: Colors.yellow,
    decoration:TextDecoration.underline,
    decorationStyle: TextDecorationStyle.dashed
  ),
);

3. TextRich和TextSpan

如果我们需要对一个Text内容的不同部分按照不同的样式显示，这时就可以使用TextSpan

const TextSpan({
  TextStyle style, 
  Sting text,
  List<TextSpan> children,
  GestureRecognizer recognizer,
});

其中style 和 text属性代表该文本片段的样式和内容。 children是一个TextSpan的数组，也就是说TextSpan可以包括其他TextSpan。而recognizer用于对该文本片段上用于手势进行识别处理。

Text.rich(TextSpan(
    children: [
     TextSpan(
       text: "Home: "
     ),
     TextSpan(
       text: "https://flutterchina.club",
       style: TextStyle(
         color: Colors.blue
       ),  
       recognizer: _tapRecognizer
     ),
    ]
))

上面代码中，我们通过TextSpan实现了一个基础文本片段和一个链接片段，然后通过Text.rich 方法将TextSpan 添加到Text中，之所以可以这样做，是因为Text其实就是RichText的一个包装，而RichText是可以显示多种样式(富文本)的widget

3. DefaultTextStyle 

在widget树中，文本的样式默认是可以被继承的，因此，如果在widget树的某一个节点处设置一个默认的文本样式，那么该节点的子树中所有文本都会默认使用这个样式，而DefaultTextStyle正是用于设置默认文本样式的

DefaultTextStyle(
  //1.设置文本默认样式  
  style: TextStyle(
    color:Colors.red,
    fontSize: 20.0,
  ),
  textAlign: TextAlign.start,
  child: Column(
    crossAxisAlignment: CrossAxisAlignment.start,
    children: <Widget>[
      Text("hello world"),
      Text("I am Jack"),
      Text("I am Jack",
        style: TextStyle(
          inherit: false, //2.不继承默认样式
          color: Colors.grey
        ),
      ),
    ],
  ),
);