1. Text 屬性介紹

Text繼承自StatelessWidget，Text 主要通過(guò)設(shè)置 文本布局 及 文本樣式 控制顯示方式。

1. 文本布局：例如文本對(duì)齊方式textAlign、文本排版方向 textDirection，文本顯示最大行數(shù)maxLines、文本截?cái)嘁?guī)則 overflow 等等

2 文本樣式： 如字體名稱fontFamily、字體大小 fontSize、文本顏色color、文本陰影 shadows等等，這些參數(shù)被統(tǒng)一封裝到了構(gòu)造函數(shù)中的參數(shù) style(TextStyle) 中

以下屬性介紹摘錄自：flutter基礎(chǔ)之組件基礎(chǔ)Text
原文作者： 陌問(wèn)MW

• 文本布局 屬性介紹

const Text(
  //String類型必傳參數(shù)，為要顯示的文本字符串
  this.data, {
  //以下為可選命名參數(shù)
  //  
  Key key,
  //TextStyle類型可選參數(shù)，用于設(shè)置文本的樣式  
  this.style,
  //StrutStyle類型可選參數(shù)，用于設(shè)置文本支撐樣式  
  this.strutStyle,
  //TextAlign類型可選參數(shù)，用于設(shè)置文本水平方向如何對(duì)齊
  this.textAlign,
  //TextDirection類型參數(shù)，用于設(shè)置文本的顯示方向(從左到右或從右到左)  
  this.textDirection,
  //Locale類型參數(shù)，用于設(shè)置多語(yǔ)言，可以根據(jù)不同的區(qū)域設(shè)置以不同的方式呈現(xiàn)相同的 Unicode 字符。
  this.locale,
  //bool類型參數(shù)，用于設(shè)置文本是否自動(dòng)換行，如果為 `true` ，自動(dòng)換行顯示，`false` 則不換行
  //在一行顯示，超出屏幕部分不顯示。默認(rèn)為 `true`   
  this.softWrap,
  //TextOverflow類型參數(shù)，用于設(shè)置文本溢出時(shí)如何顯示
  this.overflow,
  //double類型參數(shù)，用于設(shè)置文本的縮放倍數(shù)  
  this.textScaleFactor,
  //int類型參數(shù)，用于設(shè)置最大顯示行數(shù)，如果超出限制則會(huì)根據(jù) overflow 設(shè)置的溢出樣式顯示   
  this.maxLines,
  //String類型參數(shù)，于設(shè)置顯示文本的替代語(yǔ)義標(biāo)簽 
  this.semanticsLabel,
  //TextWidthBasis類型參數(shù) ，用于設(shè)置如何測(cè)量渲染文本的寬度  
  this.textWidthBasis,
})

• 文本樣式 屬性介紹

 const TextStyle({
  //是否將空值替換為父級(jí)Widget文本樣式中的值，也就是子Widget在沒(méi)有定義樣式
  //的情況下是否繼承父級(jí)Widget中的文本樣式
  this.inherit = true,
  //Color類型對(duì)象，用于設(shè)置文本字體顏色
  this.color,
  //Color類型對(duì)象，用于設(shè)置文本背景色
  this.backgroundColor,
  //double類型可選參數(shù)，字體大小
  this.fontSize,
  //FontWeight類型參數(shù)，粗體
  this.fontWeight,
  //FontStyle類型參數(shù)，設(shè)置字體樣式，如斜體等
  this.fontStyle,
  //double類型可選參數(shù)，設(shè)置字母間距(空格)
  this.letterSpacing,
  //double類型可選參數(shù)，設(shè)置單詞之間的間距
  this.wordSpacing,
  //TextBaseline類型可選參數(shù)，用于設(shè)置不同范圍文本間的對(duì)齊基線
  this.textBaseline,
  //double類型可選參數(shù)，設(shè)置文本跨度的高度。當(dāng)height為null或省略時(shí)，
  //行高將直接由字體的度量標(biāo)準(zhǔn)確定，這可能與fontSize不同。當(dāng)height
  //為非空時(shí)，文本范圍的行高將是fontSize的倍數(shù)，并且正好是fontSize * height邏輯像素高
  this.height,
  //Locale類型可選參數(shù)，多語(yǔ)言
  this.locale,
  //Paint類型可選參數(shù)，繪制文本的前景樣式，比如描邊文字等
  this.foreground,
  //Paint類型可選參數(shù)，繪制文本的背景樣式，可以設(shè)置填充，描邊，畫筆寬度等
  this.background,
  //List<ui.Shadow>類型可選參數(shù)，用于在文字下方繪制陰影
  this.shadows,
  //List<FontFeature>類型可選參數(shù)，用于設(shè)置影響顯示字體樣式的列表
  this.fontFeatures,
  //TextDecoration類型可選參數(shù)，用于設(shè)置文字附近的裝飾，例如下劃線
  this.decoration,
  //Color類型可選參數(shù)，用于設(shè)置文字裝飾的顏色
  this.decorationColor,
  //TextDecorationStyle類型參數(shù)，用于設(shè)置文字裝飾的樣式
  this.decorationStyle,
  //double類型可選參數(shù)，設(shè)置文字裝飾的筆觸的粗細(xì)誠(chéng)意字體定義的粗細(xì)
  this.decorationThickness,
  //String類型可選參數(shù)，文本風(fēng)格調(diào)式，調(diào)試版本可用
  this.debugLabel,
  //String類型可選參數(shù)，用于設(shè)置繪制文本時(shí)使用的字體名稱
  String fontFamily,
  //list<String>類型可選參數(shù)，當(dāng)在較高優(yōu)先級(jí)的字體系列中找不到字形時(shí)，字體系列的有序列表將重新出現(xiàn)
  List<String> fontFamilyFallback,
  //String類型可選參數(shù)，要使用包中定義的字體系列，必須提供package參數(shù)
  String package,
})

2. 富文本

??在iOS中，我們可以使用NSAttributedString進(jìn)行富文本設(shè)置。在Flutter中 我們可以通過(guò)Text.rich() 或 RichText()進(jìn)行富文本設(shè)置。

const Text.rich(
    InlineSpan this.textSpan, {
    Key? key,
    this.style,
    ...,
  })

RichText({
    Key? key,
    required this.text, // InlineSpan 類型
    this.textAlign = TextAlign.start,
    this.textDirection,
    ...  
  })

Text.rich 方法中的textSpan參數(shù)類型： InlineSpan
RichText構(gòu)造函數(shù)的 text參數(shù)類型： InlineSpan

兩者均為InlineSpan 類型，InlineSpan 為抽象類。

• InlineSpan及其子類介紹

abstract class InlineSpan extends DiagnosticableTree {
  const InlineSpan({
    this.style,
  });

抽象類不能直接實(shí)例化。Flutter已為我們提供了

一個(gè)抽象子類：PlaceholderSpan
兩個(gè)可實(shí)例化子類：WidgetSpan 、TextSpan

且WidgetSpan 繼承自 PlaceholderSpan

abstract class PlaceholderSpan extends InlineSpan {
  const PlaceholderSpan({
    this.alignment = ui.PlaceholderAlignment.bottom,
    this.baseline,
    TextStyle? style,
  })

class WidgetSpan extends PlaceholderSpan {  const WidgetSpan({
    required this.child,
    ui.PlaceholderAlignment alignment = ui.PlaceholderAlignment.bottom,
    TextBaseline? baseline,
    TextStyle? style,
  })

class TextSpan extends InlineSpan {
  const TextSpan({
    this.text,
    this.children,
    TextStyle? style,
    this.recognizer,
    this.semanticsLabel,
  }) 

• 示例代碼：

方式1 Text.rich()

//富文本設(shè)置 Text.rich()
class Text_RichDemo extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Text.rich(TextSpan(children: [
      TextSpan(
          text: "《定風(fēng)波》",
          style: TextStyle(
              fontSize: 25, fontWeight: FontWeight.bold, color: Colors.black)),
      TextSpan(
          text: "蘇軾", style: TextStyle(fontSize: 18, color: Colors.redAccent)),
      TextSpan(
          text: "\n莫聽(tīng)穿林打葉聲，何妨吟嘯且徐行。\n竹杖芒鞋輕勝馬，誰(shuí)怕？一蓑煙雨任平生。",
          style: TextStyle(color: Colors.blue, fontSize: 20))
    ]));
  }
}

方式 2 RichText()

//富文本設(shè)置 RichText()
class RishTextDemo2 extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return RichText(
      text: TextSpan(children: [
        TextSpan(
            text: "《定風(fēng)波》",
            style: TextStyle(
                fontSize: 25,
                fontWeight: FontWeight.bold,
                color: Colors.black)),
        TextSpan(
            text: "蘇軾",
            style: TextStyle(fontSize: 18, color: Colors.redAccent)),
        TextSpan(
            text: "\n莫聽(tīng)穿林打葉聲，何妨吟嘯且徐行。\n竹杖芒鞋輕勝馬，誰(shuí)怕？一蓑煙雨任平生。",
            style: TextStyle(color: Colors.blue, fontSize: 20))
      ]),
    );
  }
}

Simulator Screen Shot - iPhone 11 - 2021-03-13 at 17.59.50.png