如何在 Flutter 中为 Text Widget 添加自定义删除线

Posted 2023-05-07

【中文标题】如何在 Flutter 中为 Text Widget 添加自定义删除线

【英文标题】：How to add custom Strikethrough to Text Widget in Flutter

【发布时间】：2019-10-02 02:57:23

【问题描述】：

我正在寻找一种将自定义删除线添加到如下文本小部件的方法

我查看了文本样式 API，但找不到任何自定义删除线图形的选项。

style: TextStyle(decoration: TextDecoration.lineThrough),

【问题讨论】：

为什么TextDecoration.lineThrough 没用？需要图片吗？

【参考方案1】：

作为一种选择

import 'package:flutter/material.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget 
  @override
  Widget build(BuildContext context) 
    return MaterialApp(
      home: Scaffold(
        body: Center(
          child: StrikeThroughWidget(
            child: Text('Apple Juice', style: TextStyle(fontSize: 30)),
          ),
        ),
      ),
    );
  


class StrikeThroughWidget extends StatelessWidget 
  final Widget _child;

  StrikeThroughWidget(Key key, @required Widget child)
      : this._child = child,
        super(key: key);

  @override
  Widget build(BuildContext context) 
    return Container(
      child: _child,
      padding: EdgeInsets.symmetric(horizontal: 8), // this line is optional to make strikethrough effect outside a text
      decoration: BoxDecoration(
        image: DecorationImage(image: AssetImage('graphics/strikethrough.png'), fit: BoxFit.fitWidth),
      ),
    );
  

结果

和删除线图像

【讨论】：

谢谢，尤金！非常详细的答案，感谢您的帮助。你知道我们如何为删除线设置动画，就像人类如何删除待办事项一样。也许是从左到右的非淡入淡出动画？

这肯定会对你有所帮助：gist.github.com/maksimr/7ad40fbe3f16329dd0bb548976150f8a我才来这个帖子很晚！

【参考方案2】：

您可以像下面这样实现这一点

   Container(
        padding: EdgeInsets.all(20.0),
        child: Stack(
          children: <Widget>[
            Text(
              "Lorem Ipsum has been the industry's standard dummy text ever since the 1500s",
              style: TextStyle(
                fontSize: 20,
              ),
            ),
            Container(
              child: Text(
                "Lorem Ipsum has been the industry's standard dummy text ever since the 1500s",
                style: TextStyle(
                  color: Colors.transparent,
                  decorationColor: Colors.red,
                  decorationStyle: TextDecorationStyle.solid,
                  decoration:
                  TextDecoration.lineThrough,
                  fontSize: 20,
                ),
              ),
            )
          ],
        ))