Text組件的構(gòu)造方法

構(gòu)造方法一
該構(gòu)造方法用于創(chuàng)建一個(gè)單一格式的 Text脓恕，其中第一個(gè)必傳參數(shù)為文本內(nèi)容

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);

構(gòu)造方法二
該構(gòu)造方法用于創(chuàng)建一個(gè)富文本的 Text店枣，其中第一個(gè)必傳參數(shù)為 TextSpan钾怔，TextSpan 中可以設(shè)置 children 屬性，包含多個(gè) TextSpan粥脚，每個(gè) TextSpan 可以設(shè)置各自的文本內(nèi)容和樣式

 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, //文本對(duì)齊方式  TextAlign.left 靠左對(duì)齊 , TextAlign.right 靠右對(duì)齊,TextAlign.justify 兩端對(duì)齊,TextAlign.center 居中, TextAlign.start 靠左邊開始位置對(duì)齊,TextAlign.end 靠對(duì)齊容器尾部邊緣
      textScaleFactor: 1.2,  // 文本的比例大小 ,比喻文本比例大小是1.5 , 顯示出來就是文本的1.5倍.
      textDirection: TextDirection.rtl, // 這是指文本的方向, TextDirection.ltr 這靠左到右顯示TextDirection.rtl 這是靠右到左顯示
      maxLines: 1, // 最大顯示行數(shù),
      overflow: TextOverflow.ellipsis, // 當(dāng)文字超出顯示屏幕的時(shí)候, clip 裁剪, fede 漸顯 , ellipsis 省略號(hào)
      style: TextStyle(
        fontSize:  20,  // 設(shè)置 字體的大小
        color: Colors.blue ,// 設(shè)置顏色 ,  Color.fromARGB 這可以設(shè)置顏色的rgb值, 最后一個(gè)值是指透明，1.0完全不透明
        backgroundColor: Color.fromRGBO(222,225, 40, 1.0), // 背景顏色
        fontWeight:  FontWeight.bold ,  // 字體的權(quán)重, bold 是粗字體, normal正常字體
         letterSpacing: 1.2 ,// 單詞之間的距離
         wordSpacing: 1.6 ,// 字母之間的距離
          height:  1.4 ,  // 行高 , 是一個(gè)比例值
          decoration:  TextDecoration.overline ,// 文字的裝飾線 
          decorationColor:  Colors.grey,   //裝飾線的顏色
          decorationStyle: TextDecorationStyle.double  // 裝飾線的樣式
      ),
    );
  }

TextSpan

TextSpan跟Text的區(qū)別就在于TextSpan是分片较解，我們可以把一串字符串分為幾個(gè)片段來管理畜疾，每個(gè)片段可以單獨(dú)設(shè)置樣式

/*
 * 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

父節(jié)點(diǎn)的文本樣式子節(jié)點(diǎn)默認(rèn)會(huì)繼承，如果子節(jié)點(diǎn)中重新設(shè)置了默認(rèn)樣式的某些屬性印衔，那么則以子節(jié)點(diǎn)設(shè)置的為準(zhǔn)啡捶。我們也可以通過設(shè)置inherit: false 不繼承父節(jié)點(diǎn)的默認(rèn)樣式。

/*
 * DefaultTextStyle
 */
class MyDefaultTextStyle extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return DefaultTextStyle(
      // 設(shè)置默認(rèn)的樣式, 可以通過繼通過設(shè)置inherit: false 不繼承父節(jié)點(diǎn)的默認(rèn)樣式
      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(
              /*這里我們重新指定一下顏色奸焙，那么最終的顏色就以子節(jié)點(diǎn)的設(shè)置為準(zhǔn)*/
              color: Colors.deepOrange,
            ),
          ),
          Text(
            "text 2",
            style: TextStyle(
              inherit: false, //inherit設(shè)為false表示不繼承父節(jié)點(diǎn)默認(rèn)樣式瞎暑，默認(rèn)值為true
              color: Colors.orange,
            ),
          ),
          Text("text 3") // 這是全部繼承父類吃樣式,顏色
        ],
      ),
    );
  }
}

效果

image.png