Flutter 中 Text 的使用详解(一) | Flutter Widgets-一一网

这是我参与更文挑战的第23天，活动详情查看：更文挑战

前言

上篇我们聊完了图片，一款 App 的文字内容是非常核心的，从按钮提示到商品描述都离不开文字，这篇我们就开始聊聊 Flutter 中文字部分吧。

Text

Text 我们其实已经很熟悉了，之前在 AppBar 设置 title 的时候用过，这里我们就展开聊聊他的各种属性

普通的文字

用代码这样写

Text("Text - ZeroFlutter")
复制代码

展示效果如下

加点样式

不同的内容所呈现的样式有所不一样，我们需要调整字号、粗细、颜色、字体、附加样式等方式来让文字展示更加合理且体现层次感，但是不要整花里胡哨的。
加载样式之前我们先看一个 TextStyle 类，这个就是给文字设置样式的，他有多达 24 个属性可以调配，但是常用的可能也就不到10个，其他的了解即可。我们先看一眼他的源码，然后展示几个我们常用的效果吧。

下面我们就开始吧

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 查看的效果

不设置或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 – 文字装饰

这里需要使用组合属性，才可以达到我们想要的效果。

Text(
  "Text - ZeroFlutter",
  style: TextStyle(
    // 颜色蓝色
    color: Colors.blue,
    // 字号 24
    fontSize: 24,
    // 字重 粗
    fontWeight: FontWeight.bold,
    // 文字装饰
    decoration: TextDecoration.underline,
    // 装饰样式
    decorationStyle: TextDecorationStyle.wavy,
    // 装饰颜色
    decorationColor: Colors.red,
  ),
)
复制代码