Flutter：将图标放置在居中的 CircleAvatar 旁边答案

【问题标题】：Flutter: Position Icon next to a centered CircleAvatarFlutter：将图标放置在居中的 CircleAvatar 旁边
【发布时间】：2020-10-07 13:39:26
【问题描述】：

我正在尝试在居中的圆形头像旁边的右上角放置一个编辑图标。但是，如果我在 Row Widget 中使用 Center Widget，它就不起作用：

Row(
              children: <Widget>[
                Center(
                  child:
                CircleAvatar(
                  radius: 70,
                  backgroundImage: NetworkImage(
                      ""),
                ),
                ),
                Icon(Icons.edit),
              ],
            )

如果我使用 mainaxisalignment 使行内容居中，它不会使头像居中，而是头像与图标一起居中：

Row(
              mainAxisAlignment: MainAxisAlignment.center,
              children: <Widget>[
                CircleAvatar(
                  radius: 70,
                  backgroundImage: NetworkImage(
                      "https://autix.ch/wp-content/uploads/profile-placeholder.png"),
                ),
                Icon(Icons.edit),
              ],
            ),

It should look like this:

【问题讨论】：

标签： android flutter user-interface centering

【解决方案1】：

尝试使用堆栈：

Container(
  width: 200,
  height: 200,
  child: Stack(
    children: <Widget>[
      Align(
        alignment: Alignment.topRight,
        child: Icon(Icons.access_time),
      ),
      Container(
        width: 200,
        height: 200,
        child: CircleAvatar(
          child: Text('Avatar'),
        ),
      ),
    ],
  ),
),

结果：

【讨论】：

【解决方案2】：

您可以使用容器小部件包装编辑图标并将其与 topRight 对齐，如下所示：

Container(
   height: 140,
   alignment: Alignment.topRight,
   child: Icon(Icons.edit),
),

【讨论】：

【解决方案3】：

不用容器也可以：

CircleAvatar(
  backgroundImage: NetworkImage(photoURL),
  child: Stack(
    children: [
      Align(
        alignment: Alignment.topRight,
        child: Icon(Icons.ac_unit),
      )
    ],
  ),
),

【讨论】：