如何在具有圆形边界的容器内居中图标小部件

Posted 2023-02-23

【中文标题】如何在具有圆形边界的容器内居中图标小部件

【英文标题】：How to center an icon widget inside a Container with circular boundary

【发布时间】：2020-12-18 18:24:48

【问题描述】：

我面临一个最终其他人已经有了解决方案的问题。

我想 Flutter Container 圆形框形状，大小 >=1 的边框和作为子项的 Icon 完全居中在容器的中间。

然而，Flutter 做了各种奇怪的事情，搞砸了图标的中心位置。 Aligment.center 和 Center 小部件都没有帮助。

我尝试使用 Stack 和 position 但我认为这不是这样做的方法，因为必须有一种直接的方法来使容器中的图标完全居中并强制 Flutter 不更改图标的大小或添加填充或移动孩子。

这是一个代码片段

if (widget.selected) 
      return Container(
        width: widget.size,
        height: widget.size,
        constraints: BoxConstraints.tightFor(width: widget.size, height: widget.size),
        decoration: BoxDecoration(
          shape: BoxShape.circle,
          border: Border.all(color: Colors.blue, width: 5),
          color: Colors.yellow,
        ),
        alignment: Alignment.center,
        child: Icon(Icons.check_circle, size: widget.size-5, color: Colors.lightGreen),
      );
    
    else
      return Container(
        width: widget.size,
        height: widget.size,
        constraints: BoxConstraints.tightFor(width: widget.size, height: widget.size),
        decoration: BoxDecoration(
          shape: BoxShape.circle,
          border: Border.all(color: Colors.blue, width: 5),
          color: Colors.transparent,
        ),
      );

我还检查了小部件树，发现发生了一些我不想在那里发生的事情。

【问题讨论】：

您是否尝试使用 Center 小部件敲击 Icon 小部件？

我也试过了，是的，没有效果。

我知道 Flutter 在大小为 5 的小部件树下添加了填充，因为边框大小为 5。但这并不能解释为什么图标不居中。其他图标和字体也会出现这种情况，所以也不是特定图标字体的问题。

【参考方案1】：

使用Stack 代替Column 并将Icon 和Container 分开。

        Stack(
            children: [
              Align(
                alignment: Alignment.center,
                child: Container(
                  height: 100,
                  width: 100,
                  decoration: BoxDecoration(
                    shape: BoxShape.circle,
                    border: Border.all(color: Colors.blue, width: 5),
                    color: Colors.yellow,
                  ),
                ),
              ),
              Align(
                  alignment: Alignment.center,
                  child: Icon(Icons.check_circle,
                      size: 190, color: Colors.lightGreen)),
            ],
          ),

【讨论】：

我认为问题在于图标大小以及Flutter如何处理RichText中的图标，并将fontSize设置为iconSize。现在，如果 fontSize > innerSize = 100 - 2*5 = 90，则 RichText 小部件未对齐。这是错误还是功能？您的代码有效不是因为没有框约束，而是因为 iconSize = 90 = 100-2*borderWidth.

我已经编辑了答案。请检查新代码。

如果你将整个 Stack 包裹在一个具有固定高度和宽度的 Container 中，请确保 Container 区域更大或至少与 Icon 相同。