图标小部件被图像小部件截断

Question

我正在尝试实现一个“更改我的个人资料图片”图标，就像它在 Whatsapp 的个人资料页面中的显示方式一样，其中一个可点击的相机图标悬停在图片的右下角。

这是我在有状态小部件中使用的代码：

Row(
                children: <Widget>[
                  Stack(
                    children: <Widget>[
                      Container(
                        width: 120,
                        child: Image(
                          image: AssetImage('affogato.png'),
                        ),
                      ),
                      Positioned(
                        top: 70,
                        left: 90,
                        child: FloatingActionButton(
                          child: Icon(Icons.camera_alt),
                          onPressed: () {},
                        ),
                      ),
                    ],
                  ),
                ],
              ),

奇怪的是，Icon 似乎接受了 Image 容器的约束。因此，当我将宽度设置为 120 并尝试将图标按钮推到图像的右下边缘时，它会被图像约束切断。 Container 的约束如何影响 FloatingActionButton，即使它们是 Stack 中的兄弟姐妹而不是父子小部件？我该如何解决这个问题，以便图标可以浮在图像边缘？

Answer 1

这就是我的做法。我完全删除了Positioned 小部件并改用Padding。它似乎解决了这个问题。我还将图像包裹在 CircleAvatar 中以完成 Whatsapp 样式。

Row(
    children: <Widget>[
      Stack(
        children: <Widget>[
          Padding(
            padding: const EdgeInsets.only(left: 8.0),
            child: CircleAvatar(
              radius: 70,
              backgroundColor: Colors.greenAccent,
              child: Container(
                height: 150,
                width: 150,
                child: ClipOval(
                  child: Image(
                    image: AssetImage('lib/rainy.png'),
                  ),
                ),
              ),
            ),
          ),
          Padding(
            padding: EdgeInsets.only(left: 105, top: 80),
            child: Container(
              width: 50,
              height: 50,
              child: FloatingActionButton(
                backgroundColor: Colors.green,
                child: Icon(Icons.camera_alt),
                onPressed: () async {},
              ),
            ),
          ),
        ],
      ),
    ],
  ),

Answer 2

您可能可以利用Positioned 小部件的height 属性并调整其他尺寸（左、下、右、上），以便按钮不会在右下边缘被切断并正确显示。下面的工作示例代码：

return Scaffold(
      body: Center(
        child: Row(
          children: <Widget>[
            Stack(
                children: <Widget>[
                  Container(
                    width: 120,
                    child: Image(
                      image: AssetImage('assets/Icon-512.png'),
                    ),
                  ),
                  Positioned(
                    bottom: 0,
                    right: 0,
                    left: 78,
                    height: 35,
                    child: FloatingActionButton(
                      child: Icon(Icons.camera_alt),
                      onPressed: () {},
                    ),
                  ),
                ],
              ),
          ],
        ),
      )

      // This trailing comma makes auto-formatting nicer for build methods.
    );

您可能需要根据需要调整尺寸，但这样不会切断按钮。

希望这能回答你的问题。