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,
  ),
)
复制代码

• 4 种装饰

TextDecoration.none	TextDecoration.underline
TextDecoration.overline	TextDecoration.lineThrough

• 5种装饰样式

TextDecorationStyle.solid	TextDecorationStyle.double	TextDecorationStyle.wavy
TextDecorationStyle.dotted	TextDecorationStyle.dashed

• 装饰颜色

源码仓库

基于 Flutter 🔥 最新版本

• Flutter Widgets 仓库

参考连接

• Flutter-Text

关注专栏

• 此文章已收录到下面👇 的专栏，能够直接关注
• 更多文章继续阅读｜系列文章持续更新

👏 欢迎点赞➕收藏➕关注，有任何问题随时在下面👇评论，我会第一时间回复哦