0

创建了一个 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),
                    ),
                  ),

这是我的设备输出 - 在此处输入图像描述

4

2 回答 2

0

实际上,当使用CircleAvatar()作为父级时,它会将子小部件覆盖到一定的大小,并且当子级的大小超过一定数量(约 70%)时,它无法按预期包裹子级并开始将子级移动到右下角。并且还有IconButton()一个大约 6 或 8 的预设填充,您可以通过像这样自己定义填充属性将其设置为 0 padding: EdgeInsets.all(0.0),。因此,除了@Benedikt J Schlegel 的回答之外,我还建议您再尝试 2 次:

  1. IconButton()padding 设置为 0,并且永远不要将超过父级 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: (){}
                  ),
                ),
              ),
            ),
    
  2. 用户 aContainer()作为 的父级IconButton()

      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: (){}
          ),
        ),
      ),
    
于 2020-06-10T17:42:50.737 回答
0

要堆叠 2 个小部件,实际上有一个更简单的解决方案。只需使用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: () {}),
        ],
      )

前 使用堆栈

于 2020-06-10T17:08:16.087 回答