Flutter學習-8 Text組件

Text的屬性有下列屬性

const Text(
  String this.data, {  //data為要顯示的文字內容，必要值，需排第一個
  Key? key,
  this.style, //設定文字樣式 style:TextStytle()
  this.strutStyle, //設定文字屬性 
  this.textAlign, //文字對齊位置 textAligh:TextAlign.left 
  this.textDirection, //textDirection:TextDirection.rtl 或 textDirection:TextDirection.lrt
  this.locale, //設置語言環境
  this.softWrap, //是否自動換行 //softWrap:true 或softWrap:false
  this.overflow, //文字超出父容器處理的方式 
  this.textScaleFactor, //字體縮放 textScaleFactor:1.5
  this.maxLines, //最多行數 mazLines:2
  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說明的文字

範例:

Text("要設定的文字"*10,  //文字資料，此文字一定要給
    style:TextStyle(   //文字樣式設定
        inherit: true, // ture 或false
        color: Colors.orange, // 文字的顏色
        backgroundColor: Colors.blue, // 背景顏色
        fontSize: 16, // 文字大小,預設為14pt
        fontWeight: FontWeight.normal, // .normal(正常) .bold(粗體)  .100-.900 (愈大愈粗)
        fontStyle: FontStyle.normal, // 字型為正常或斜體 預設為斜體 .italic(斜體) .normal(正常)
        letterSpacing: 3, // 字與字隔幾個間隔
        wordSpacing: 1, // 詞與詞之間的間隔
        textBaseline: TextBaseline.alphabetic, // 對齊文字的水平線 .alphabetic(基本) .ideographic(超過就對齊底線)
        height: 1.5, // 上下行的高度
        leadingDistribution: TextLeadingDistribution.even, //.even
        locale: Locale('zh_CN'), // 選擇使用者語言
        //foreground: Paint() ..color=Colors.cyan ..style = PaintingStyle.fill, // 文字的前景色 (與color屬性只能擇一使用)，使用paint()
        // background: Paint(), // 文字的背景色(與backgrondColor只能擇一使用)paint()
        shadows: [ //文字的陰影
          Shadow(
              color: Colors.black, //陰影的顏色，還是黑色看起來比較合適
              offset: Offset(2, 0), //陰影偏移量，前為x軸，後為y軸
              blurRadius: 4.0), //陰影模糊程度
        ],
        fontFeatures: [FontFeature.enable('smcp')],  //使用某些類型的字體特徵
        //以下為文字外框的狀飾器設定，大小基本與內包的文字大小相同
        decoration: TextDecoration.underline, // .underline 下畫線 .overline 上畫線 .LineThrough 刪除線 .none 不加線
        decorationColor: Colors.orange, // 繪製裝飾容器的線條顏色
        decorationStyle: TextDecorationStyle.wavy, // 繪製裝飾容器的線條形式 .dashed虛線 .dotted(點) .double(雙線) .solid(實線) .wavy(波浪線)
        decorationThickness: 1, // 繪製裝飾容器的線條寬度
    ),
  strutStyle: StrutStyle( // 每行的樣式設定
      fontSize: 20, //字的大小
      height: 1, //行距
      leading: 1, //與鄰行的高度
      fontWeight: FontWeight.bold, //粗體
      fontStyle: FontStyle.normal, //是否斜體
      forceStrutHeight: true,
  ),
  textAlign: TextAlign.left, //.left(對左) .right(對右) .center(對上) .justify(拉伸) .start(對齊開始) .end(對齊結束)
  textDirection:TextDirection.rtl, // right to left(ftl)由右到左
  softWrap: true, //true or false
  overflow: TextOverflow.clip, //.clip 直接剪掉 .ellipsis 以省略號表示 .fade 淡化為透明
  textScaleFactor:1.5, //與原字體設定比較 0.5 1.5....
  maxLines: 5, //1是1行,2是2行....
  textWidthBasis:TextWidthBasis.longestLine, //.parent 占據父文本的整個寬度  .longestLine 占據最長的線段
),

詳細請參考:
https://www.twblogs.net/a/5bfe23a3bd9eee7aed333862 Flutter Text 參數詳解

https://guoshuyu.cn/home/wx/Flutter-FontFeature.html  fontFeatures說明