这是我参与更文挑战的第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 🔥 最新版本
参考链接
关注专栏
- 此文章已收录到下面👇 的专栏,可以直接关注
- 更多文章继续阅读|系列文章持续更新
👏 欢迎点赞➕收藏➕关注,有任何问题随时在下面👇评论,我会第一时间回复哦