Flutter常用组件-基础组件之Text

Flutter Text 组件

属性

属性	功能
textAlign	文本对齐方式(center 居中，left 左 对齐，right 右对齐，justfy 两端对齐) （注意，对齐的参考系是Text widget 本身。Text 的宽度和文本内容长度相等，那么这时指定对齐方式是没有意义的，只有 Text 宽度大于文本内容长度时指定此属性才有意义。）
textDirection	文本方向(ltr 从左至右，rtl 从右至 左)
overflow	文字超出屏幕之后的处理方式(clip 裁剪，fade 渐隐，ellipsis 省略号)
maxLines	最大行数
textScaleFactor	字体显示倍率
style	字体的样式(TextStyle)

TextStyle（样式）

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

属性	功能
color	文本颜色
decoration	文字装饰线(none 没有线，lineThrough 删 除线，overline 上划线，underline 下划线)
decorationColor	文字装饰线颜色
decorationStyle	文字装饰线风格([dashed,dotted]虚线， double 两根线，solid 一根实线，wavy 波浪 线)
wordSpacing	单词间隙(如果是负值，会让单词变得更紧凑
letterSpacing	字母间隙(如果是负值，会让字母变得更紧凑)
fontStyle	文字样式(italic 斜体，normal 正常体)
fontSize	文字大小
fontWeight	字体粗细(bold 粗体，normal 正常体)
fontFamily	使用的字体名称（例如，Roboto）。如果字体是在包中定义的，那么它将以’packages/package_name/‘为前缀（例如’packages/cool_fonts/Roboto’）
background	文本背景色
shadows	实现一些特殊效果
height	该属性用于指定行高，但它并不是一个绝对值，而是一个因子，具体的行高等于fontSize*height

TextSpan

在上面的例子中，Text 的所有文本内容只能按同一种样式，如果我们需要对一个 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: TapGestureRecognizer()
                      ..onTap = () {
                        print(content);
                        ToastUtil.showToast(content);
                      },
     ),
    ]
))

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