Question

如何在 IconButton 中添加轮廓/描边边框？我尝试使用堆栈，但这并没有按预期提供输出。

这是我的代码

SliverAppBar(
            leading: Stack(
              alignment: Alignment.center,
              children: [
                Icon(
                  Icons.arrow_back,
                  color: Colors.black,
                  size: 36,
                ),
                IconButton(
                  icon: new Icon(
                    Icons.arrow_back,
                    size: 24,
                  ),
                  onPressed: () => Navigator.of(context).pop(),
                ),
              ],
            ),
            //
            // another code
            //
          ),

上面代码的输出

我想在 IconButton 中创建一个轮廓/描边，如输出右侧的文本。

具有可自定义“轮廓/描边边框颜色”和填充颜色的图标示例

我试图找到解决方案，但找不到。是否可以通过仅使用代码添加轮廓/描边边框来自定义 IconButton？

Answer 1

很遗憾，目前flutter不支持此功能。 Icon 唯一可用的装饰选项是 fill 颜色。

Flutter 图标使用 .ttf 字体，在 unicode codePoint 中为每个符号定义了 Icon Font Family，这与通常使用 web 的 SVG 不同，并且由于大多数浏览器本身就支持 svgs，因此我们可以设置一个轮廓值来实现上面显示的结果。

然而，您可以使用 CustomPainter 和 CustomPaint 小部件实现上面显示的结果，但这需要手动绘制图标的形状，然后将 PaintStyle 属性设置为 {{ 1}}。

CustomPaint Docs

Answer 2

正如@Rohan Thacker所说。目前，flutter 不支持为 icon 添加轮廓/笔触边框的功能。因此，在这种情况下，自定义 icons 的最佳解决方案是使用具有 SVG 格式的图像并使用 flutter_svg 插件能够使用 SVG 图像资产作为 IconButton。

从上面的例子来看，我完成了这样的代码（使用 flutter_svg 插件）：

import 'package:flutter_svg/flutter_svg.dart';

//
// another code
// 

SliverAppBar(
               leading: Center(
                 child: IconButton(
                   icon: SvgPicture.asset(
                          "assets/icons/ back-arrow-bold.svg",
                          width: 30,
                          // the image height will automatically adjust the width...
                          // to the original image scale. Simply declare the size...
                          // in between the length or width, choose one.
                         ),
                   onPressed: () => Navigator.of (context) .pop (),
                 ),
               ),
               //
               // another code
               // 
             ),

Flutter：如何在 IconButton 中添加轮廓/笔触边框？

2 个答案: