Flutter 中 Text 的使用详解(二) | Flutter Widgets

1,081 阅读4分钟

这是我参与更文挑战的第24天,活动详情查看: 更文挑战

前言

上篇我们聊了 Text 的一些常用属性并展示了一些特殊的效果样式,这边我们聊一些不常用的属性和字体设置还有使用技巧。

Text 2

设置字体

为什么要把设置字体放到这篇呢?因为有以下几个原因:

  • 不常用一般不设置
  • 需要配置 yaml

拷贝字体文件

image.png

这里我们单独放到一个 fonts 目录下,分类清晰且更新方便

yaml 配置

//pubspec.yaml
  fonts:
    - family: Caveat
      fonts:
        - asset: assets/fonts/Caveat-Regular.ttf
        - asset: assets/fonts/Caveat-Bold.ttf
          weight: 700

设置字体

Text(
  "Text - ZeroFlutter",
  style: TextStyle(
    // 颜色蓝色
    color: Colors.blue,
    // 字号 24
    fontSize: 24,
    // 设置字体
    fontFamily: 'Caveat',
    // 设置字重
    fontWeight: FontWeight.w700,
  ),
)
  • 展示效果 | 不设置字重 | 字重 700 | 不设置字体 | | :---: | :---: | :---: | | image.png | image.png | image.png |

textAlign - 对齐方式

这里为了效果我们添加更多的文字来突出效果,代码如下

Text(
  "Text - ZeroFlutter Text - ZeroFlutter  Text - ZeroFlutter  Text - ZeroFlutter  ",
  textAlign: TextAlign.center,
  // textAlign: TextAlign.start,
  // textAlign: TextAlign.end,
  // textAlign: TextAlign.left,
  // textAlign: TextAlign.right,
  // textAlign: TextAlign.justify,
  // textDirection: TextDirection.rtl,
)
TextAlign.centerTextAlign.startTextAlign.end
image.pngimage.pngimage.png
TextAlign.justifyTextAlign.leftTextAlign.right
image.pngimage.pngimage.png

看了上面的表格是不是一脸疑问?startleft 啥区别?justifystart 啥区别?

justifystart 的区别

可以看看下面的对比图,对于 justify 会对非强制换行符所在行进行整体行间距拉伸,以填充整个行
01.gif

startleft 的区别

这里我们就需要引入一个 textDirection (文字方向)属性了来对比看看了,他有以下两个值:

  • TextDirection.ltr 从左到右(通常默认)
  • TextDirection.rtl 从右到左 | 对比区别 | TextDirection.ltr | TextDirection.rtl | | --- | --- | --- | | start | image.png | image.png | | left | image.png | image.png |

通过上面的对比可以看出:

  • start 根据方向变换对齐方式,end 也是一样
  • left 不会根据方向转变对齐方式,right 也是一样
  • left 虽然整体不会变化,但是换行处还是有区别的

换行与溢出显示样式

通常我们是希望文字换行进行全部展示的,但是有时比如列表页面,就希望只展示固定行数的文字,这时该怎么设置呢?
上面我们看到了文字默认是换行的,怎么能不换行呢?

设置 softWrap

Text(
  "Text - ZeroFlutter Text - ZeroFlutter Text - ZeroFlutter",
  style: TextStyle(
    // 颜色蓝色
    color: Colors.blue,
    // 字号 24
    fontSize: 24,
  ),
  // 设置不换行
  softWrap: false,
)
softWrap: truesoftWrap: false
image.pngimage.png

设置溢出样式

上面我们看到如果设置了不换行,超过部分不会被渲染出来,下面来看看怎么调整溢出样式。

Container(
  // 蓝色背景
  color: Colors.blue,
  height: 120,
  width: double.infinity,
  alignment: Alignment.center,
  child: Text(
    "Text - ZeroFlutter Text - ZeroFlutter Text - ZeroFlutter",
    style: TextStyle(
      // 颜色白色
      color: Colors.white,
      // 字号 24
      fontSize: 24,
    ),
    // 设置不换行
    softWrap: false,
    // 设置溢出样式
    // overflow: TextOverflow.ellipsis,
    // overflow: TextOverflow.clip,
    // overflow: TextOverflow.fade,
    // overflow: TextOverflow.visible,
  ),
)

为了显示效果效果我们调整成如下效果
image.png
然后我们分别来看看四种参数的效果

  • **TextOverflow.ellipsis **(三个点的样式经常使用)

image.png

  • TextOverflow.fade (渐隐渐现)

image.png

  • **TextOverflow.clip **(剪裁)

image.png

  • **TextOverflow.visible **(显示)

image.png**

如果我们放到 Row 布局中,超过了会怎样显示呢?

Row(
  children: [
    FlutterLogo(size: 48),
    Text(
      "Text - ZeroFlutter Text - ZeroFlutter Text - ZeroFlutter",
      style: TextStyle(
        // 颜色蓝色
        color: Colors.black,
        // 字号 24
        fontSize: 24,
      ),
      // 设置溢出样式
      overflow: TextOverflow.ellipsis,
    )
  ],
)

image.png
我们就得的了上面的结果,你会发现我们没有设置不换行,他也会溢出了,因为 Row 是横向布局,Text 也是横向布局的且大小都是不固定的。这种如果看过之前的文章,就会立马想到加一个 Expanded 即可。

Row(
  children: [
    FlutterLogo(size: 48),
    // 添加 Expanded
    Expanded(
      child: Text(
        "Text - ZeroFlutter Text - ZeroFlutter Text - ZeroFlutter",
        style: TextStyle(
          // 颜色蓝色
          color: Colors.black,
          // 字号 24
          fontSize: 24,
        ),
        // 设置溢出样式
        overflow: TextOverflow.ellipsis,
      ),
    )
  ],
)

maxLines - 设置最大行

上面默认是 1 行就展示溢出样式了,如果我们想设置多行,怎么办呢?看代码

Expanded(
  child: Text(
    "Text - ZeroFlutter Text - ZeroFlutter Text - ZeroFlutter",
    style: TextStyle(
      // 颜色蓝色
      color: Colors.black,
      // 字号 24
      fontSize: 24,
    ),
    // 设置溢出样式
    overflow: TextOverflow.ellipsis,
    // 设置超过 2 行才溢出
    maxLines: 2,
  ),
)

image.png

总结

到这里 Text 常用和不常用的属性调配效果我们就聊完了,在项目当中需要考虑的不单单是实现样式本省,还要考虑样式的复用性和可变性,比如夜间模式怎么实现很好的切换等,下一篇我们聊聊富文本 RichText。

源码仓库

基于 Flutter 🔥 最新版本

参考链接

关注专栏

  • 此文章已收录到下面👇 的专栏,可以直接关注
  • 更多文章继续阅读|系列文章持续更新

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