这是我参与更文挑战的第24天，活动详情查看： 更文挑战
前言
上篇我们聊了 Text 的一些常用属性并展示了一些特殊的效果样式，这边我们聊一些不常用的属性和字体设置还有使用技巧。
Text 2
设置字体
为什么要把设置字体放到这篇呢？因为有以下几个原因：
- 不常用一般不设置
- 需要配置 yaml
拷贝字体文件
这里我们单独放到一个
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 | 不设置字体 |
| :---: | :---: | :---: |
|
|
|
|
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.center | TextAlign.start | TextAlign.end |
|---|---|---|
| TextAlign.justify | TextAlign.left | TextAlign.right |
看了上面的表格是不是一脸疑问？start和left 啥区别？justify 和 start 啥区别？
justify 和 start 的区别
可以看看下面的对比图，对于 justify 会对非强制换行符所在行进行整体行间距拉伸，以填充整个行
start和left 的区别
这里我们就需要引入一个 textDirection （文字方向）属性了来对比看看了，他有以下两个值：
TextDirection.ltr从左到右（通常默认）TextDirection.rtl从右到左 | 对比区别 | TextDirection.ltr | TextDirection.rtl | | --- | --- | --- | | start ||
| | left |
|
|
通过上面的对比可以看出：
- start
会根据方向变换对齐方式，end 也是一样 - left
不会根据方向转变对齐方式，right 也是一样 - left 虽然整体不会变化，但是换行处还是有区别的
换行与溢出显示样式
通常我们是希望文字换行进行全部展示的，但是有时比如列表页面，就希望只展示固定行数的文字，这时该怎么设置呢？
上面我们看到了文字默认是换行的，怎么能不换行呢？
设置 softWrap
Text(
"Text - ZeroFlutter Text - ZeroFlutter Text - ZeroFlutter",
style: TextStyle(
// 颜色蓝色
color: Colors.blue,
// 字号 24
fontSize: 24,
),
// 设置不换行
softWrap: false,
)
| softWrap: true | softWrap: false |
|---|---|
设置溢出样式
上面我们看到如果设置了不换行，超过部分不会被渲染出来，下面来看看怎么调整溢出样式。
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,
),
)
为了显示效果效果我们调整成如下效果
然后我们分别来看看四种参数的效果
- **TextOverflow.ellipsis **（三个点的样式经常使用）
- TextOverflow.fade （渐隐渐现）
- **TextOverflow.clip **（剪裁）
- **TextOverflow.visible **（显示）
**
如果我们放到 Row 布局中，超过了会怎样显示呢？
Row(
children: [
FlutterLogo(size: 48),
Text(
"Text - ZeroFlutter Text - ZeroFlutter Text - ZeroFlutter",
style: TextStyle(
// 颜色蓝色
color: Colors.black,
// 字号 24
fontSize: 24,
),
// 设置溢出样式
overflow: TextOverflow.ellipsis,
)
],
)
我们就得的了上面的结果，你会发现我们没有设置不换行，他也会溢出了，因为 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,
),
)
总结
到这里 Text 常用和不常用的属性调配效果我们就聊完了，在项目当中需要考虑的不单单是实现样式本省，还要考虑样式的复用性和可变性，比如夜间模式怎么实现很好的切换等，下一篇我们聊聊富文本 RichText。
源码仓库
基于 Flutter 🔥 最新版本
参考链接
关注专栏
- 此文章已收录到下面👇 的专栏，可以直接关注
- 更多文章继续阅读｜系列文章持续更新
👏 欢迎点赞➕收藏➕关注，有任何问题随时在下面👇评论，我会第一时间回复哦
