首页 > 解决方案 > 如何在 Flutter 中为图标添加删除线?

问题描述

我需要在我的icon. 我读到了关于使用填充的自定义罢工,但它正在处理文本

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),
  )

如何将其添加到此代码中?

Icon(
 Icons.list_alt,
 color: Colors.white,
)

编辑 1

我试过了 :

Container(
 padding: EdgeInsets.symmetric(horizontal: 8),
 child: Icon(
 Icons.shopping_cart,
 color: Colors.white,
 size: 200,
),
)

它不工作

标签: flutterstrikethrough

解决方案


在此处输入图像描述

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: Icon(Icons.shopping_cart, color: Colors.orangeAccent, size: 200),
          ),
        ),
      ),
    );
  }
}

class StrikeThroughWidget extends StatelessWidget {
  final Widget child;

  StrikeThroughWidget({Key key, @required this.child}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Container(
      child: child,
      padding: EdgeInsets.symmetric(horizontal: 8),
      foregroundDecoration: BoxDecoration(
        image: DecorationImage(image: AssetImage('assets/strikethrough.png'), fit: BoxFit.fitWidth),
      ),
    );
  }
}

推荐阅读