Flutter-Widget-Text 控件初探

Flutter-Widget-Text控件

Text控件十分常用,需要使用到文字的時候就會用到它,看一下它擁有的屬性

1. 其構造方法如下:
const Text(
    this.data, {
    Key key,
    this.style,
    this.textAlign,
    this.textDirection,
    this.locale,
    this.softWrap,
    this.overflow,
    this.textScaleFactor,
    this.maxLines,
    this.semanticsLabel,
  })  : assert(data != null),
        textSpan = null,
        super(key: key);
2. 屬性說明
屬性 說明
data 第一個參數,不指定名稱,輸入要顯示的字符串
style 文字風格:文字風格有:
inherit : 默認爲true,如果指定爲false,那麼後面的屬性沒有顯示指定則會使用默認值:白色,字體大小爲10像素,無襯線字體。
color : 文字顏色
fontSize : 文字大小
fontWeight : 文字粗程度,有bold,w100-w900之間,
fontStyle: 文字風格,有斜體和正常
letterSpacing : 文字之間距離
wordSpacing : 單詞之間的距離,比如文字中的Hello world兩個單詞間距離
textBaseline : 基線對齊方式(沒看出太大區別)
height : 文本高度跨度,字體大小的倍數
locale : 本地化:語言,國家
foreground :前景,比如文字顏色,如果前面color屬性有設置,那麼這個屬性需要時null,所以使用這個屬性的時候,color就不要使用了
background : 背景,比如文字後背景,backgroundColor衝突,用這個的時候color就不能使用
shadows : 陰影(我沒看出啥效果- -)
decoration : 裝飾:比如下劃線
decorationStyle : 裝飾風格: 比如下劃線爲虛線
debugLabel : 調試標籤(我在flutter_web裏沒看出有啥效果)
fontFamily : 字體(flutter_web里根據FontManifest來配置)
fontFamilyFallback : 文字字體列表,如果前面的fontFamily提供了,以fontFamily爲準,如果沒有提供,則使用該列表第一個元素作爲字體,都沒提供則使用默認字體(- -fontFamily沒提供的時候,沒試出效果)
package : 包路徑,比如指明存儲字體文件的路徑,在flutter_web裏,文字字體路徑似乎可以不用這個,只需要配置FontManifest.json
textAlign 水平方向文字從哪邊開始排,比如下面右邊
textDirection 文字順序方向,比如從右到左
locale 本地化字符編碼,一般不設置
softWrap 是否換行,默認true
overflow 文字超出超出後的方式:比如常用的,在後面加…,設置了這個…的時候,默認就只有一行了(可通過設置maxLines增加行)
textScaleFactor 字體像素的倍數,比如0.5,就是在前面設置了的字體大小基礎上爲0.5倍
maxLines 最大行數
semanticsLabel 語義標籤 ,做一個標籤,按註釋如果存在則替換文本(flutter_web測試沒看出啥實際效果 - -)
3. 測試代碼:
new Text(
          r'$$ 北鼻北鼻,北鼻北鼻,北鼻北鼻,北鼻北鼻,北鼻北鼻,北鼻北鼻,北鼻北鼻 北鼻北鼻,北鼻北鼻,北鼻北鼻,北鼻北鼻,北鼻北鼻,北鼻北鼻,北鼻北鼻 北鼻北鼻,北鼻北鼻,北鼻北鼻,北鼻北鼻,北鼻北鼻,北鼻北鼻,北鼻北鼻',
          style: TextStyle(
            inherit: true,
            //文字顏色
            // color: Color.fromARGB(255, 22, 212, 22),
            //背景顏色
            // backgroundColor: Colors.greenAccent,
            //文字大小
            fontSize: 25.0,
            //文字粗細程度
            fontWeight: FontWeight.w500,
            //文字風格
            // fontStyle: FontStyle.italic,
            //文字之間距離
            letterSpacing: 5.0,
            //單詞之間的距離,比如文字中的Hello world
            wordSpacing: 30.0,
            //基線對齊方式
            textBaseline: TextBaseline.ideographic,
            //文本高度跨度,字體大小的倍數,比如以下爲5倍,設置背景後就能看出來
            height: 5.0,
            //本地化:語言,國家
            locale: /* Localizations.localeOf(context) */ Locale('fr', 'CA'),
            //前景,比如文字顏色,如果前面color屬性有設置,那麼這個屬性需要時null,所以使用這個屬性的時候,color就不要使用了
            foreground: paint,
            //背景,比如是文字後背景,backgroundColor衝突,用這個的時候color就不能使用
            background: paintBackground,
            //陰影
            shadows: listShadow,
            //裝飾:下劃線
            decoration: TextDecoration.underline,
            //裝飾風格:下劃線虛線
            decorationStyle: TextDecorationStyle.dashed,
            //調試標籤?
            debugLabel: "11111",
            //文字字體
            // fontFamily: "TXKS",
            //文字字體
            fontFamilyFallback: familyFallBackList,
            //包路徑,指明存儲字體文件的路徑,在flutter_web裏,似乎可以不用,只需要配置FontManifest.json
            // package: "assets/fonts"
          ),
          //水平方向文字從哪邊開始排,比如下面右邊
          textAlign: TextAlign.right,
          //文字順序方向,比如從右到左
          textDirection: TextDirection.ltr,
          //本地化字符編碼,一般不設置
          locale: Localizations.localeOf(context),
          //是否換行,默認true
          softWrap: true,
          //文字超出超出後的方式:比如常用的,在後面加...,設置了這個的時候,默認就只有一行了(可通過設置maxLines增加行)
          overflow: TextOverflow.ellipsis,
          //字體像素的倍數,比如0.5,就是在前面設置了的字體大小基礎上爲0.5倍
          textScaleFactor: 0.5,
          //最大行數
          maxLines: 2,
          //語義標籤 ,做一個標籤,如果存在則替換文本,flutter_web測試沒看出啥實際效果
          semanticsLabel: 'Double dollars',
        ) 
4. 效果


demo地址

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章