Text TextSpan

Text
Text用于显示简单样式文本，它包含一些控制文本显示样式的一些属性，一个简单的例子如下：

Text("Hello world",
  textAlign: TextAlign.left,
);

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

Text("Hello world",
  textScaleFactor: 1.5,
);

const Text(
    this.data, {
    Key key,
    this.style,
    this.strutStyle,
    this.textAlign,
    this.textDirection,
    this.locale,
    this.softWrap,
    this.overflow,
    this.textScaleFactor,
    this.maxLines,
    this.semanticsLabel,
    this.textWidthBasis,
  })

this.style
TextStyle 类型，主要是提供文本显示的颜色，字体大小，粗细等信息，下面会具体介绍
this.strutStyle
this.textAlign,
对齐方式 TextAlign: left: 左对齐 right: 右对齐 center: 居中对齐 start: 文本开始位置对齐，类似left end: 文本结束为止对齐，类似right justify: 两端对齐
this.textDirection,
设置文本从左到右还是从右到左方向。该属性决定了TextAlign.start与TextAlign.end的表现方式。
TextDirection.ltr: 文本方向从左到右，此时TextAlign.start左对齐
TextDirection.rtl: 文本方向从右到左，此时TextAlign.start右对齐
this.locale,
本地化语言设置
this.softWrap
是否换行。
this.overflow,
文本溢出时的表现形式：
TextOverflow.ellipsis：文本溢出显示省略号
TextOverflow.clip：文本溢出时直接裁剪掉超出部分，不作任何处理
TextOverflow.fade：溢出文本淡入透明
TextOverflow.visible: 不作处理
this.textScaleFactor,
基于系统字体缩小或放大倍数。
this.maxLines,
最大显示的行数
this.semanticsLabel,
语义标签，做一个标签，按注释如果存在则替换文本(测试没看出啥实际效果 - -)
this.TextWidthBasis
暂时没用到

TextStyle

 const TextStyle({
    this.inherit = true, // 是否继承父节点样式，默认为true
    this.color, // 颜色 
    this.backgroundColor, // 
    this.fontSize,   // 字号
    this.fontWeight,   // 设置字体粗细 FontWeight.normal:默认，与w400一致 FontWeight.bold:加粗，与w700一致 FontWeight.w[100-900]
    this.fontStyle,  // FontStyle.normal  FontStyle.italic斜体
    this.letterSpacing, // 字符间距  就是单个字母或者汉字之间的间隔，可以是负数
    this.wordSpacing,   // 段落间距，以空格为准
    this.textBaseline,   // 基线，两个值，字面意思是一个用来排字母的，一人用来排表意字的（类似中文）
    this.height,   // 当用来Text控件上时，行高（会乘以fontSize,所以不以设置过大）
    this.locale, // 根据地区以不同方式呈现
    this.foreground, // 文本颜色，使用该属性时，color需为null Paint()..color = Colors.red
    this.background, // 文本背景色，使用该属性时，backgroundColor需为null
    this.shadows, //  设置字体阴影Shadow(color: Colors.black, offset: Offset(1.0, 1.0), blurRadius； 5.0)
    this.fontFeatures,
    this.decoration,  // TextDecoration.none: 默认 TextDecoration.lineThrough: 删除线TextDecoration.underline: 下划线 TextDecoration.overline: 上划线
    this.decorationColor,    // 划线的颜色
    this.decorationStyle, // 这个style可能控制画实线，虚线，两条线，点, 波浪线等
    this.decorationThickness, // 控制decoration产生线的粗细
    this.debugLabel,
    String fontFamily, // 字体
    List fontFamilyFallback,
    String package,
  })

相同文字多次显示：

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

TextSpan
可以用于富文本显示，一行文本中有多种style。

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

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

3-8.png

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。

** DefaultTextStyle**
在Widget树中，文本的样式默认是可以被继承的（子类文本类组件未指定具体样式时可以使用Widget树中父级设置的默认样式），因此，如果在Widget树的某一个节点处设置一个默认的文本样式，那么该节点的子树中所有文本都会默认使用这个样式，而DefaultTextStyle正是用于设置默认文本样式的。下面我们看一个例子：

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

上面代码中，我们首先设置了一个默认的文本样式，即字体为20像素(逻辑像素)、颜色为红色。然后通过DefaultTextStyle 设置给了子树Column节点处，这样一来Column的所有子孙Text默认都会继承该样式，除非Text显示指定不继承样式，如代码中注释2。

3-9.png

Text TextSpan

你可能感兴趣的:(Text TextSpan)