Flutter小課堂：Text知多少

張風捷特烈發表於2019-07-13
Flutter

Flutter小課堂開課了,今天的主角是Text,文字和圖片幾乎統治了我們的整個視覺世界
今天將帶你瞭解一下Flutter中Text的一些屬性及用法

Flutter小課堂：Text知多少

1.簡單使用

可以通過工具欄開啟，顯示文字基線

Flutter小課堂：Text知多少

var container=Container(
  color: Color(0x6623ffff),
  width: 200,
  height: 200*0.618,
  child: text,
);

var text=Text("toly-張風捷特烈-1994`");
複製程式碼

2.Text的style屬性

2.1:常用屬性

style對應的是TextStyle物件，常用的幾個屬性如下

Flutter小課堂：Text知多少

var style = TextStyle(
  color: Colors.red, //顏色
  backgroundColor: Colors.white,//背景色
  fontSize: 20,//字號
  fontWeight: FontWeight.bold,//字粗
  fontStyle: FontStyle.italic,//斜體
  letterSpacing: 10,//字間距
);

var text = Text("toly-張風捷特烈-1994`",style: style,);

複製程式碼

可見文字到了容器的邊上會自動換行。

2.2:字型的修改:fontFamily屬性

如何引用外來字型

Flutter小課堂：Text知多少

var style = TextStyle(
  color: Colors.red, //顏色
  backgroundColor: Colors.white,//背景色
  fontFamily:"阿里惠普體"
);

var text = Text("toly-張風捷特烈-1994`",style: style,);
複製程式碼
2.3：文字陰影:shadows屬性

一開始看到shadows是一個List<ui.Shadow>感覺這巢狀的有點深啊
Shadow又是個沒見過的類，並存在Flutter要啥給啥，沒啥造啥的世界真理，造一個物件唄，反正不花錢。

Flutter小課堂：Text知多少

var shadow = Shadow(
    color: Colors.black, //顏色
    blurRadius: 1, //虛化
    offset: Offset(2, 2)//偏移
);

var style = TextStyle(
    color: Colors.grey, //顏色
    fontSize: 100, //字號
    shadows: [shadow]);
    
var text = Text(
  "張風捷特烈",
  style: style,
);
複製程式碼
  • 多陰影

感覺有點奇怪，為什麼是個List,那就搞條彩虹試試唄

Flutter小課堂：Text知多少

const rainbow = [
  0xffff0000,
  0xffFF7F00,
  0xffFFFF00,
  0xff00FF00,
  0xff00FFFF,
  0xff0000FF,
  0xff8B00FF
];

shadows() {
  var shadows = <Shadow>[];
  for (int i = 0; i < rainbow.length; i++) {
    shadows.add(Shadow(
        color: Color(rainbow[i]),
        blurRadius: i * 2.5,
        offset: Offset(-(1 + i) * 3.0, -(1 + i) * 3.0)));
  }
  return shadows;
}

var style = TextStyle(
    color: Colors.black, //顏色
    fontSize: 100, //字號
    shadows: shadows());

var text = Text(
  "張風捷特烈",
  style: style,
);
複製程式碼
2.4:裝飾線:decoration屬性

對應的物件型別是TextDecoration，擁有四個靜態常量，表現如下

Flutter小課堂：Text知多少

var style = TextStyle(
    color: Colors.black, //顏色
    fontSize: 20, //字號
    decoration: TextDecoration.lineThrough);

var text = Text(
  "張風捷特烈",
  style: style,
);
複製程式碼
2.5:裝飾線樣式: decorationStyle屬性

所對應的型別為TextDecoration列舉，一共五種，如下:

Flutter小課堂：Text知多少

var style = TextStyle(
  color: Colors.black, //顏色
  fontSize: 20, //字號
//    shadows: shadows()
  decoration: TextDecoration.lineThrough,
  decorationColor: Color(0xffff0000),//裝飾線顏色
  decorationStyle: TextDecorationStyle.wavy,
  decorationThickness: 0.8,//裝飾線粗
);

var text = Text(
  "張風捷特烈",
  style: style,
);
複製程式碼

3.Text的其他屬性

3.1:textAlign和textDirection

textDirection對應型別,TextDirection。包括兩個列舉:ltr(左到右)和rtl(右到左)
textAlign在textDirection不同時有不同表現,如下圖:

Text(
    "張風捷特烈-toly-1994-9999999999999999",
    textAlign: TextAlign.justify,
    textDirection: TextDirection.ltr,
    style: TextStyle(
      color: Colors.black, //顏色
      fontSize: 14, //字號
    ),
  )
複製程式碼
  • TextDirection:extDirection.ltr時textAlign的表現

Flutter小課堂：Text知多少

  • TextDirection:extDirection.rtl時textAlign的表現

Flutter小課堂：Text知多少

3.2:strutStyle屬性

strutStyle對應類是StrutStyle,這個類是一個單獨的檔案，感覺應該挺重要
不過這個類看得不是非常懂,貌似是使用一個字型的骨架，但不用這個字型。
可以看出不同字型的基線是不同的,如果多種字型同時出現，未免會造成差別
使用統一的strutStyle可以讓基線統一的同時又能保持字型的不同，大概就這個意思吧

Flutter小課堂：Text知多少

var text =Text(
  "張風捷特烈-toly-1994-9999999999999999",
  strutStyle: StrutStyle(
    fontFamily: '阿里惠普體',
    fontSize: 24,
    forceStrutHeight: true,
  ),
  style: TextStyle(
    color: Colors.black, //顏色
    fontSize: 24, //字號
    fontFamily: "阿里惠普體"
  ),
);
複製程式碼
3.3:softWrap和overflow屬性

對應TextOverflow列舉物件，一共四枚，情況如下:
softWrap決定是否會自動換行

 Text(
    "張風捷特烈-toly-1994-99999999999999999999",
    overflow: TextOverflow.clip,
    softWrap: false,
    style: TextStyle(
      color: Colors.black, //顏色
      fontSize: 24, //字號
    ),
  )
複製程式碼
  • softWrap為true(預設)時

Flutter小課堂：Text知多少

  • softWrap為false時

Flutter小課堂：Text知多少

3.4:textScaleFactor和maxLines屬性

maxLines 不用多說，顯示的最大行數,textScaleFactor可以實現文字的縮放

Flutter小課堂：Text知多少

var text =Text(
  "張風捷特烈-toly-1994-9999999999999999",
  textScaleFactor: 0.5,
  maxLines: 2,//最多2行
  style: TextStyle(
      color: Colors.black, //顏色
      fontSize: 12, //字號

  ),
);

複製程式碼

好了，Text基本上就是這樣，別忙走，還有的TextSpan呢

4.TextSpan

首先它不是一個Widget,其次它可以作為Text.rich()的入參
TextSpan的強大之處在於你可以在一行文字中使用很多樣式，甚至新增別的控制元件

4.1:TextSpan原始碼中的示例

看原始碼時，原始碼中給了一個小例子蠻好的,這裡講一下
可以看出，一行文字中可以有多種樣式，這就是TextSpan的基本用法

Flutter小課堂：Text知多少

var span=TextSpan(
  text: 'Hello', // default text style
  children: <TextSpan>[
    TextSpan(text: ' beautiful ', style: TextStyle(fontStyle: FontStyle.italic)),
    TextSpan(text: 'world', style: TextStyle(fontWeight: FontWeight.bold)),
  ],
);
return Text.rich(
  span,
);
複製程式碼
4.2:彩虹字

既然如此，自己動手，來寫個彩虹字吧

Flutter小課堂：Text知多少

const rainbowMap = {
  0xffff0000:"紅色",
  0xffFF7F00:"橙色",
  0xffFFFF00:"黃色",
  0xff00FF00:"綠色",
  0xff00FFFF:"青色",
  0xff0000FF:"藍色",
  0xff8B00FF:"紫色",
};

var spans= <TextSpan>[];
    rainbowMap.forEach((k,v){
      spans.add(TextSpan(
              text: v+"   ",
              style: TextStyle(fontSize: 20.0, color: Color(k))),);
    });
var show = Text.rich(TextSpan(
      text: '七彩字：\n',
      style: TextStyle(fontSize: 16.0, color: Colors.black),
      children: spans));
複製程式碼
4.3:炫彩文章

既然如此，那就再玩玩唄，將一片文章變得多彩。這裡匆匆的文章就不貼了

Flutter小課堂：Text知多少

colorfulText(String str,{double fontSize=14}) {
  var spans= <TextSpan>[];
  for(var i=0;i<str.length;i++){
      spans.add(TextSpan(
          text: str[i],
          style: TextStyle(fontSize: fontSize, color: randomRGB())),);
  }

  return Text.rich(TextSpan(
      children: spans));
}

///簡單隨機色
/// 
Color randomRGB() {
  Random random = Random();
  int r = 30 + random.nextInt(200);
  int g = 30 + random.nextInt(200);
  int b = 30 + random.nextInt(200);
  return Color.fromARGB(255, r, g, b);
}


var show = colorfulText(cc,fontSize: 20);
複製程式碼

如果你想，做成開始那張圖，文字隨機大小也可以，反正TextSpan就是這麼強大。
本文到此接近尾聲了，如果想快速嚐鮮Flutter，《Flutter七日》會是你的必備佳品;如果想細細探究它,那就跟隨我的腳步，完成一次Flutter之旅。
另外本人有一個Flutter微信交流群，歡迎小夥伴加入，共同探討Flutter的問題，本人微訊號:zdl1994328，期待與你的交流與切磋。

相關文章