Flutter Text 实现下划线、波浪线、删除线、背景色、渐变文字、阴影、描边、空心字

xhu_ww

已于 2024-05-06 20:47:28 修改

阅读量1.3w

点赞数 7

分类专栏： Flutter 文章标签： flutter Text 文字阴影空心文字文本删除线

于 2022-09-22 10:57:23 首次发布

本文链接：https://blog.csdn.net/ww897532167/article/details/126974291

版权

本文详细介绍了如何使用Flutter的TextStyle属性来实现文字的下划线、删除线、背景色、渐变文字、阴影、描边和空心字效果。通过调整TextDecoration、TextDecorationStyle、shadows等属性，可以创建出具有波浪线、删除线、立体效果、描边和空心文字的艺术文字。同时，文章展示了添加背景色和渐变色文字的方法，帮助开发者丰富UI设计。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

效果图

在这里插入图片描述

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,