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

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,
     
  • 6
    点赞
  • 8
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值