Flutter小課堂：Text知多少

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

---

1.簡單使用

能夠經過工具欄開啓，顯示文字基線

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對象，經常使用的幾個屬性以下

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屬性

如何引用外來字體

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要啥給啥，沒啥造啥的世界真理，造一個對象唄，反正不花錢。

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,那就搞條彩虹試試唄

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，擁有四個靜態常量，表現以下

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

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

---

2.5:裝飾線樣式: decorationStyle屬性

所對應的類型爲TextDecoration枚舉，一共五種，以下:

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的表現

• TextDirection:extDirection.rtl時textAlign的表現

---

3.2:strutStyle屬性

strutStyle對應類是StrutStyle,這個類是一個單獨的文件，感受應該挺重要
不過這個類看得不是很是懂,貌似是使用一個字體的骨架，但不用這個字體。
能夠看出不一樣字體的基線是不一樣的,若是多種字體同時出現，未免會形成差異
使用統一的strutStyle可讓基線統一的同時又能保持字體的不一樣，大概就這個意思吧

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(默認)時

• softWrap爲false時

---

3.4:textScaleFactor和maxLines屬性

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

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的基本用法

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:彩虹字

既然如此，本身動手，來寫個彩虹字吧

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:炫彩文章

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

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，期待與你的交流與切磋。