Text组件的构造方法

构造方法一
该构造方法用于创建一个单一格式的 Text，其中第一个必传参数为文本内容

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,
  }) : assert(
         data != null,
         'A non-null String must be provided to a Text widget.',
       ),
       textSpan = null,
       super(key: key);

构造方法二
该构造方法用于创建一个富文本的 Text，其中第一个必传参数为 TextSpan，TextSpan 中可以设置 children 属性，包含多个 TextSpan，每个 TextSpan 可以设置各自的文本内容和样式

 const Text.rich(
    this.textSpan, {
    Key key,
    this.style,
    this.strutStyle,
    this.textAlign,
    this.textDirection,
    this.locale,
    this.softWrap,
    this.overflow,
    this.textScaleFactor,
    this.maxLines,
    this.semanticsLabel,
    this.textWidthBasis,
  }) : assert(
         textSpan != null,
         'A non-null TextSpan must be provided to a Text.rich widget.',
       ),
       data = null,
       super(key: key);

常用属性

style属性

/*
 * Text 基本属性 
 */
class NormalText extends StatelessWidget{
  @override
  Widget build(BuildContext context) {
  
    return Text(" 我是Text 基本属性 我是Text 基本属性我是Text 基本属性我是Text 基本属性我是Text 基本属性我是Text 基本属性我是Text 基本属性",
      textAlign: TextAlign.start, //文本对齐方式  TextAlign.left 靠左对齐 , TextAlign.right 靠右对齐,TextAlign.justify 两端对齐,TextAlign.center 居中, TextAlign.start 靠左边开始位置对齐,TextAlign.end 靠对齐容器尾部边缘
      textScaleFactor: 1.2,  // 文本的比例大小 ,比喻文本比例大小是1.5 , 显示出来就是文本的1.5倍.
      textDirection: TextDirection.rtl, // 这是指文本的方向, TextDirection.ltr 这靠左到右显示TextDirection.rtl 这是靠右到左显示
      maxLines: 1, // 最大显示行数,
      overflow: TextOverflow.ellipsis, // 当文字超出显示屏幕的时候, clip 裁剪, fede 渐显 , ellipsis 省略号
      style: TextStyle(
        fontSize:  20,  // 设置 字体的大小
        color: Colors.blue ,// 设置颜色 ,  Color.fromARGB 这可以设置颜色的rgb值, 最后一个值是指透明，1.0完全不透明
        backgroundColor: Color.fromRGBO(222,225, 40, 1.0), // 背景颜色
        fontWeight:  FontWeight.bold ,  // 字体的权重, bold 是粗字体, normal正常字体
         letterSpacing: 1.2 ,// 单词之间的距离
         wordSpacing: 1.6 ,// 字母之间的距离
          height:  1.4 ,  // 行高 , 是一个比例值
          decoration:  TextDecoration.overline ,// 文字的装饰线 
          decorationColor:  Colors.grey,   //装饰线的颜色
          decorationStyle: TextDecorationStyle.double  // 装饰线的样式
      ),
    );
  }

TextSpan

TextSpan跟Text的区别就在于TextSpan是分片，我们可以把一串字符串分为几个片段来管理，每个片段可以单独设置样式

/*
 * TextSpan  的属性 
 */
class TextSpanView extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Text.rich(TextSpan(children: [
      TextSpan(
        text: '张三',
        style: TextStyle(
            color: Colors.red, fontSize: 30.0, fontWeight: FontWeight.bold),
      ),
      TextSpan(
          text: "爱打篮球----",
          style: TextStyle(
              color: Colors.black,
              fontSize: 20.0,
              height: 1.2,
              decoration: TextDecoration.underline,
              wordSpacing: 1.6))
    ]));
  }
}

DefaultTextStyle

父节点的文本样式子节点默认会继承，如果子节点中重新设置了默认样式的某些属性，那么则以子节点设置的为准。我们也可以通过设置inherit: false 不继承父节点的默认样式。

/*
 * DefaultTextStyle
 */
class MyDefaultTextStyle extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return DefaultTextStyle(
      // 设置默认的样式, 可以通过继通过设置inherit: false 不继承父节点的默认样式
      textAlign: TextAlign.center,
      style: TextStyle(
        fontSize: 30,
        color: Colors.grey,
        letterSpacing: 1,
        wordSpacing: 3,
        fontWeight: FontWeight.bold,
      ),

      child: Column(
        children: <Widget>[
          Text(
            "text 1",
            style: TextStyle(
              /*这里我们重新指定一下颜色，那么最终的颜色就以子节点的设置为准*/
              color: Colors.deepOrange,
            ),
          ),
          Text(
            "text 2",
            style: TextStyle(
              inherit: false, //inherit设为false表示不继承父节点默认样式，默认值为true
              color: Colors.orange,
            ),
          ),
          Text("text 3") // 这是全部继承父类吃样式,颜色
        ],
      ),
    );
  }
}

效果

image.png