为什么 CircleAvator 的位置在 IconButton 下不能完全对齐？

Question

创建了一个 IconButton 并以响应方式定位它。然后用 CircleAvator 小部件包裹它。 我原以为 circleavator 会被放置在 IconButton 下并且也会响应，但 CircleAvator 不会在按钮下对齐甚至不会响应。 这是我的代码-

Positioned(
                    left: (_width / 2.4) - (_height / 3.5 * 0.30),
                    top: (_height * 0.5) / 2.35,
                    child: CircleAvatar(
                      backgroundColor: colorBlack,
                      radius: 50.0,

                      child: IconButton(
                          icon: Icon(Icons.check_circle),
                          iconSize: _height / 3.5 * 0.5,
                          color: loading ? Colors.teal : Colors.red,
                          onPressed: doConversion),
                    ),
                  ),

这是我的设备输出 - enter image description here

Answer 1

要堆叠 2 个 Widget 实际上有一个更简单的解决方案。只需使用 Stack 小部件。您可以使用 alignment 在 Stack 中定位元素。

 Stack(
        alignment: Alignment.center,
        children: <Widget>[
          CircleAvatar(
            backgroundColor: Colors.black,
            radius: 50.0,
          ),
          IconButton(
              icon: Icon(Icons.check_circle),
              iconSize: 100,
              color: Colors.red,
              onPressed: () {}),
        ],
      )

Answer 2

实际上，当将 CircleAvatar() 用作 parent 时，它会将 child 小部件覆盖到一定大小，并且 child 的大小超过一定数量（大约 70%）它无法按预期包装 child 并开始将 child 移到右下角。而且 IconButton() 有一个预设的 padding 大约 6 或 8，你可以通过像这样 padding: EdgeInsets.all(0.0), 自己定义 padding 属性来将它设置为 0。因此，除了@Benedikt J Schlegel 的回答之外，我还建议您再拍摄 2 张照片：

将 IconButton() 填充设置为 0，并且绝不会将 child 的大小传递给 parent:

的 170% 以上

        Positioned(
            left: (_width / 2.4) - (_height / 3.5 * 0.30),
            top: (_height * 0.5) / 2.35,
          child: CircleAvatar(
            backgroundColor: Colors.black,
            radius: 100.0,

            child: Padding(
              padding: const EdgeInsets.all(8.0),
              child: IconButton(
                  icon: Icon(Icons.check_circle),
                  padding: EdgeInsets.all(0.0),
                  iconSize: 170,
                  color: Colors.red,
                  onPressed: (){}
              ),
            ),
          ),
        ),

用户 a Container() 作为 IconButton() 的 parent:

  Positioned(
    left: (_width / 2.4) - (_height / 3.5 * 0.30),
    top: (_height * 0.5) / 2.35,
    child: Container(

      decoration: BoxDecoration(
        color: Colors.black,
        shape: BoxShape.circle,
      ),

      child: IconButton(
          icon: Icon(Icons.check_circle),
          padding: EdgeInsets.all(0.0),
          iconSize: 100,
          color: Colors.red,
          onPressed: (){}
      ),
    ),
  ),

为什么 CircleAvator 的位置在 IconButton 下不能完全对齐？

Why CircleAvator's position can't align exactly under The IconButton?

flutter

flutter-positioned

iconbutton