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并尝试将“图标”按钮推到图像的右下边缘时，它会被“图像”约束切断。容器的约束如何影响FloatingActionButton，即使它们是Stack内部的兄弟姐妹而不是父子小部件？以及如何解决这个问题，使图标可以漂浮在图像的边缘？

Answer 1

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

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.
    );

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

希望这能回答您的问题。

Answer 2

这就是我的做法。我完全删除了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 {},
              ),
            ),
          ),
        ],
      ),
    ],
  ),

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

2 个答案: