Flutter 中 Text 的使用詳解(一) | Flutter Widgets

這是我參與更文挑戰的第23天，活動詳情查看：更文挑戰html

前言

上篇咱們聊完了圖片，一款 App 的文字內容是很是核心的，從按鈕提示到商品描述都離不開文字，這篇咱們就開始聊聊 Flutter 中文字部分吧。git

Text

Text 咱們其實已經很熟悉了，以前在 AppBar 設置 title 的時候用過，這裏咱們就展開聊聊他的各類屬性github

普通的文字

用代碼這樣寫

Text("Text - ZeroFlutter")
複製代碼

展現效果以下

加點樣式

不一樣的內容所呈現的樣式有所不同，咱們須要調整字號、粗細、顏色、字體、附加樣式等方式來讓文字展現更加合理且體現層次感，可是不要整花裏胡哨的。
加載樣式以前咱們先看一個 TextStyle 類，這個就是給文字設置樣式的，他有多達 24 個屬性能夠調配，可是經常使用的可能也就不到10個，其餘的瞭解便可。咱們先看一眼他的源碼，而後展現幾個咱們經常使用的效果吧。

下面咱們就開始吧api

color - 先設置個顏色

Text(
  "Text - ZeroFlutter",
  style: TextStyle(
    // 顏色藍色
    color: Colors.blue,
  ),
)
複製代碼

fontSize - 字號

Text(
  "Text - ZeroFlutter",
  style: TextStyle(
    // 顏色藍色
    color: Colors.blue,
    // 字號 24
    fontSize: 24,
  ),
)
複製代碼

fontWeight - 字重

Text(
  "Text - ZeroFlutter",
  style: TextStyle(
    // 顏色藍色
    color: Colors.blue,
    // 字號 24
    fontSize: 24,
    // 字重 粗
    fontWeight: FontWeight.bold,
  ),
)
複製代碼

字重爲 [w100 ~ w900] ，能夠看以下源碼

backgroundColor - 背景色

Text(
  "Text - ZeroFlutter",
  style: TextStyle(
    // 顏色藍色
    color: Colors.blue,
    // 字號 24
    fontSize: 24,
    // 字重 粗
    fontWeight: FontWeight.bold,
    // 背景 橘色
    backgroundColor: Colors.orange,
  ),
)
複製代碼

height - 行高

Text(
  "Text - ZeroFlutter",
  style: TextStyle(
    // 顏色藍色
    color: Colors.blue,
    // 字號 24
    fontSize: 16,
    // 字重 粗
    fontWeight: FontWeight.bold,
    // 背景 橘色
    backgroundColor: Colors.orange,
    // 行高，這裏是 fontSize * height
    height: 3,
  ),
)
複製代碼

這裏使用 Widget Inspector 查看的效果markdown

不設置或null 則是文字高度
設置了則是fontSize * height 的高度

字間距

Text(
  "Text - ZeroFlutter 咱們聊聊 Text",
  style: TextStyle(
    // 顏色藍色
    color: Colors.blue,
    // 每一個文字之間的間距
    letterSpacing: 4,
    // 每一個單詞之間的間距
    wordSpacing: 10,
  ),
)
複製代碼

默認	letterSpacing: 4	wordSpacing: 10

默認距離	每一個文字之間的距離	每一個單詞之間，主要是解析空格來增長距離

fontStyle - 字樣式

Text(
  "Text - ZeroFlutter",
  style: TextStyle(
    // 顏色藍色
    color: Colors.blue,
    // 字號 24
    fontSize: 24,
    // 字重 粗
    fontWeight: FontWeight.bold,
    // 文字樣式
    // fontStyle: FontStyle.normal,
    fontStyle: FontStyle.italic,
  ),
)
複製代碼

FontStyle.normal	FontStyle.italic（傾斜）

decoration - 文字裝飾

這裏須要使用組合屬性，才能夠達到咱們想要的效果。oop

Text(
  "Text - ZeroFlutter",
  style: TextStyle(
    // 顏色藍色
    color: Colors.blue,
    // 字號 24
    fontSize: 24,
    // 字重 粗
    fontWeight: FontWeight.bold,
    // 文字裝飾
    decoration: TextDecoration.underline,
    // 裝飾樣式
    decorationStyle: TextDecorationStyle.wavy,
    // 裝飾顏色
    decorationColor: Colors.red,
  ),
)
複製代碼

4 種裝飾

TextDecoration.none	TextDecoration.underline

TextDecoration.overline	TextDecoration.lineThrough

5種裝飾樣式

TextDecorationStyle.solid	TextDecorationStyle.double	TextDecorationStyle.wavy

TextDecorationStyle.dotted	TextDecorationStyle.dashed

裝飾顏色

源碼倉庫

基於 Flutter 🔥 最新版本post

Flutter Widgets 倉庫

參考連接

Flutter-Text

關注專欄

此文章已收錄到下面👇 的專欄，能夠直接關注
更多文章繼續閱讀｜系列文章持續更新

👏 歡迎點贊➕收藏➕關注，有任何問題隨時在下面👇評論，我會第一時間回覆哦字體