Flutter學習-8-1 RichText組件

當有一長串文字時，其中包含文字格式不同，需要變化，可以使用一個一個Text慢慢組合，不過這種方法有些麻煩，因此可以透過Text.rich，透過它的TextSpan方法將文字分段，再個別設定不同類型中的文字屬性。

RichText的屬性及方法如下:(要先有text，再接 TextSpan)

注意此行的使用格式  text: TextSpan(children: [TextSpan(), TextSpan(), TextSpan(),]),

Key? key,
required this.text, //必給值 text: TextSpan(children: [TextSpan(), TextSpan(), TextSpan(),]),
this.textAlign = TextAlign.start, //文字對齊位置 textAligh:TextAlign.left
this.textDirection, //textDirection:TextDirection.rtl 或 textDirection:TextDirection.lrt
this.softWrap = true,  //是否自動換行 //softWrap:true 或softWrap:false
this.overflow = TextOverflow.clip, ////文字超出父容器處理的方式
this.textScaleFactor = 1.0, ////字體縮放 textScaleFactor:1.5
this.maxLines, ////最多行數 mazLines:2
this.locale, //設定使用的語言類別 local:Locale('zh_TW')
this.strutStyle, ////設定文字屬性
this.textWidthBasis = TextWidthBasis.parent, //占據寬度大小
this.textHeightBehavior, //占據高度大小

Text.rich屬性與方法與上述相同，僅在最外層多了一個sytle及strutStyle屬性，此style屬性與Text使用方法相同。可點(Flutter 學習8 Text)觀看詳細內容:

注意此行的使用格式 (不用接text，再接TextSpan)

TextSpan(children: [TextSpan(), TextSpan(), TextSpan(),]),

Text.rich(
  InlineSpan this.textSpan, //必給值 TextSpan(children: [TextSpan(), TextSpan(), 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,
  this.textHeightBehavior,

Text裡textStytle的屬性有下列: text:TextStytle()

const TextStyle({
  this.inherit = true,  //是否繼承父文字部件屬性 inherit:true
  this.color, //文字顏色 color:Colors.orange
  this.backgroundColor, //文字背景顏色 backgroundColor:Colors.orange
  this.fontSize, //文字大小 //fontSize:18
  this.fontWeight, //文字粗度 fontWeight:FontWeight.blod
  this.fontStyle, //字體的樣式，設定為fontStyle:FontStyle.normal
  this.letterSpacing, //字與字的間距 litterSpacing:2
  this.wordSpacing, //不同單詞的間距  wordSpacing:1
  this.textBaseline, //文字的上、中、下橫線 textBaseline:TextBaseLing.underLine
  this.height, //行與行的上下高度 height:1.5
  this.leadingDistribution, //與上面有些相似 leadingDistribution:TextleadingDistribution.even .
  this.locale, //設定使用的語言類別 local:Locale('zh_TW')
  this.foreground, //前景 //foreground: Paint() ..color=Colors.cyan ..style = PaintingStyle.fill,
  this.background, //背景
  this.shadows, //文字的陰影
  this.fontFeatures, //文字特徵 fontFeature:[FonFeatures.enable('smcp')]
  this.decoration, //裝飾文字的線設定(位置) decoration:Decoration.overline
  this.decorationColor,裝飾線的顏色 decorationColor:Colors.orange
  this.decorationStyle, //裝飾線的形式 decorationStyle:TextDecorationStyle.dotted
  this.decorationThickness, //裝飾容器的寬度 decorationThickness:1
  this.debugLabel, //debug說明的文字

範例:

RichText範例

RichText(
  text: TextSpan(
    children: <TextSpan>[
      TextSpan(
        text: "測試一的文字 ",
        style: TextStyle(
          color: Colors.blue,
          fontSize: 10,
        ),
      ),
      TextSpan(
        text: "測試二的文字",
        style: TextStyle(color: Colors.red, fontSize: 20),
      ),
      TextSpan(
        text: "測試三的文字",
        style: TextStyle(
          color: Colors.green,
          fontSize: 15,
        ),
      ),
    ],
  ),
),

Text.rich範例

Text.rich(
  TextSpan(
    text: '一開始沒有分開的文字',
    children: [
      TextSpan(
        text: "測試一的文字 ",
        style: TextStyle(color: Colors.blue, fontSize: 10,),
      ),
      TextSpan(
          text: "測試二的文字",
          style: TextStyle(color: Colors.red, fontSize: 20),),
      TextSpan(
        text: "測試三的文字",
        style: TextStyle(color: Colors.green, fontSize: 15,),
      ),
    ],
  ),
  style: TextStyle(color: Colors.orange), //可設定第一個text的文stytle
),