Flutter Text 实现下划线、波浪线、删除线、背景色、渐变文字、阴影、描边、空心字
flutter 实现 删除 文字 Text 渐变 阴影 下划线
2023-09-11 14:18:54 时间
效果图
1 下划线、 删除线
TextStyle 中有4个属性
decoration
:TextDecoration可在文字上 中 下方添加直线decorationStyle
:extDecorationStyle 可指定线条样式,如直线、虚线、波浪线、双实线、点线decorationThickness
:设置线条的宽度decorationColor
:设置线条的颜色
下方波浪线
Text(
'下划波浪线',
style: TextStyle(
fontSize: 24,
decoration: TextDecoration.underline,
decorationStyle: TextDecorationStyle.wavy,
decorationThickness: 1,
),
),
中间红色删除线
Text(
'中间删除线',
style: TextStyle(
fontSize: 24,
decoration: TextDecoration.lineThrough,
decorationStyle: TextDecorationStyle.solid,
decorationColor: Colors.red
),
),
2 文字背景色 & 渐变色文字
TextStyle 的backgroundColor可为文字添加背景色
Text(
'文字添加背景色',
style: TextStyle(
fontSize: 24,
color: Colors.white,
fontWeight: FontWeight.bold,
backgroundColor: Colors.red,
),
),
借助ShaderMask
可为文字添加渐变色效果
ShaderMask(
shaderCallback: (Rect bounds) {
return const LinearGradient(
colors: [Colors.red, Colors.blue],
).createShader(Offset.zero & bounds.size);
},
child: const Text(
'文字设置渐变色',
style: TextStyle(
fontSize: 24,
color: Colors.white,
fontWeight: FontWeight.bold,
),
),
),
3 添加阴影、立体效果、文字描边
TextStyle 的shadows可为文字添加阴影效果
3.1 文字阴影&立体效果
添加阴影可使用 Shadow
或者 BoxShadow
,需要设置阴影的模糊半径 blurRadius
Text(
'常规红色阴影',
style: TextStyle(
fontSize: 48,
color: Colors.blue,
fontWeight: FontWeight.bold,
shadows: [Shadow(color: Colors.red, blurRadius: 3)],
),
),
Shadow 可以设置偏移值 offset
使得文字阴影具有立体感
Text(
'立体红色阴影',
style: TextStyle(
fontSize: 48,
color: Colors.blue,
fontWeight: FontWeight.bold,
shadows: [
Shadow(color: Colors.red, blurRadius: 3, offset: Offset(3, 3))
],
),
),
3.2 粗略的文字描边&空心字体
若将阴影的blurRadius值设置小一点,因阴影效果不明显,可以视为为文字添加了描边效果,虽效果不理想但有些情况下可适用。
Text(
'阴影实现描边',
style: TextStyle(
fontSize: 48,
color: Colors.white,
fontWeight: FontWeight.bold,
shadows: [Shadow(color: Colors.red, blurRadius: 1)],
),
),
加上背景色做对比
Container(
color: Colors.blue,
padding: const EdgeInsets.symmetric(horizontal: 40, vertical: 10),
child: const Text(
'阴影实现描边',
style: TextStyle(
fontSize: 48,
color: Colors.blue,
fontWeight: FontWeight.bold,
shadows: [Shadow(color: Colors.white, blurRadius: 1)],
),
),
),
4 空心文字
TextStyle 的foreground
属性可自定义Text的前景画笔,修改画笔属性实现空心文字。
空心字体
Text(
'空心文字',
style: TextStyle(
fontSize: 48,
fontWeight: FontWeight.bold,
foreground: Paint()
..style = PaintingStyle.stroke
..strokeWidth = 0.1
..color = Colors.blue,
),
),
使用Stack
叠加两个Text,实现文字空心部分为其它颜色
Stack(
children: [
Text(
'空心文字',
style: TextStyle(
fontSize: 48,
color: Colors.red,
fontWeight: FontWeight.bold,
),
),
Text(
'空心文字',
style: TextStyle(
fontSize: 48,
fontWeight: FontWeight.bold,
foreground: Paint()
..style = PaintingStyle.stroke
..strokeWidth = 0.1
..color = Colors.blue,
),
),
],
),
相关文章
- Flutter: 监听App显示,隐藏
- flutter:安装使用第三方库:以dio为例(flutter 3.7.0 / dio 4.0.6)
- Flutter 深度学习 — 动画(补间动画、Hero动画、交错动画)
- Flutter进阶第8篇:实现视频播放
- Flutter学习 — 添加Material触摸水波效果
- Flutter学习 — 实现滑动关闭、删除item
- Flutter进阶第11篇: 调用原生硬件Api实现扫码 扫描条形码 扫描二维码
- Flutter进阶第2篇:Dio库实现网络请求以及动态渲染数据
- Flutter原理 flutter架构、flutter UI系统、BuildContext、Widget与Element、命中测试hitTest、flutter显示流程分析
- flutter 列表获取前一百名且移除
- flutter 自定义侧边栏showDialog
- flutter空安全问题,平时用到的数据一定要注意
- flutter在导航栏处实现对两个列表的点击事件
- flutter video_player实现监听和自动播放下一首歌曲
- Flutter LimitedBox配合Text组件实现文字显示一行,超出显示点点点...
- flutter点击按键切换图标
- Flutter之GetX入门指南 ObxWidget原理剖析
- Flutter之Redux框架入门
- Flutter 开发环境搭建Unable to ‘pub upgrade‘ flutter tool. Retrying in five seconds...
- Flutter 官方自带日期组件 和第三方 日期组件、轮播图 flutter_swiper