Flutter：图标小部件的背景颜色为白色

Question

我有一个图标小部件

 GestureDetector(
  onTap: () => Get.back(),
  // color: Colors.white,
  child: Icon(
    Icons.cancel_rounded,
    color: Colors.red,
    size: 50,
  ),
)

我试图给白色的背景颜色。 这样它就有一个清除按钮。 我找不到任何东西，只能用容器包裹它。

Container(
    height: 50,
    width: 50,
    decoration: BoxDecoration(
        color: Colors.white,
        borderRadius:
            BorderRadius.all(Radius.circular(40))),
    child: GestureDetector(
      onTap: () => Get.back(),
      // color: Colors.white,
      child: Icon(
        Icons.cancel_rounded,
        color: Colors.red,
        size: 50,
      ),
    ),
  ),

问题是这将有一个超过图标小部件大小的边缘。 如果我减小容器的大小，图标小部件就会从容器中弹出。 Icon 小部件如何在没有任何超大容器的情况下具有背景颜色？

Answer 1

由于Icons.cancel_rounded有一个透明边框，它占据了一些地方（难以计算），所以你面临着上面的问题。 为了解决这个问题（不导入没有透明边框的自定义图标），我们必须小心控制背景范围。

我们应该做的是将背景圆角矩形的长度和高度限制为不小于内部x长度的数字，并且不大于图标不透明部分的直径。

对于给定的 50 图标大小，背景圆角矩形的合理长度和高度为 40。

下面是演示。

  @override
  Widget build(BuildContext context) {
    return new Scaffold(
        appBar: new AppBar(
          title: new Text('Photos'),
          backgroundColor: Colors.deepPurpleAccent,
        ),
        floatingActionButton: new FloatingActionButton(
          onPressed: on_Clicked,
          child: new Icon(Icons.add),
        ),
        backgroundColor: Colors.blue,
        body: Center(
          child: Container(
            height: 50,
            width: 50,
            child: Stack(children: [
              Positioned.fill(
                  child: Align(
                child: Container(
                  height: 40,
                  width: 40,
                  decoration: new BoxDecoration(
                      color: Colors.white,
                      shape: BoxShape.rectangle,
                      borderRadius: BorderRadius.all(Radius.circular(20))),
                ),
                alignment: Alignment.center,
              )),
              Positioned.fill(
                child: Icon(
                  Icons.cancel_rounded,
                  color: Colors.red,
                  size: 50,
                ),
              )
            ]),
          ),
        ));
  }

最后，我建议您使用没有透明边框的图标，这会导致我们在上面遇到的不便。