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

xhu_ww

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

阅读量1.1w

点赞数 6

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

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

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

版权

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

摘要由CSDN通过智能技术生成

效果图

在这里插入图片描述

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,