Flutter 颤振：如何在appbar中制作圆形化身

你好，我正在努力使我在appbar右上角的头像成为一个完美的圆圈。它一直是椭圆形的

我尝试了许多选项（包括设置半径、使用ClipRRect、ClipOval等），但它似乎不会影响圆角的形状

代码：

返回脚手架(
appBar:appBar(
自动嵌入：false，
背景颜色：颜色，
标题：填充(
填充：仅限常量边集（顶部：10.0），
孩子：排(
儿童：[
Image.asset（'images/localhourlogo.png'，高度：50.0，），
]
),
),
行动：[
弹出菜单按钮(
图标：CircleAvatar(
背景图片：NetworkImage（googleUserUrl）
),
当选：选秀活动，
itemBuilder:（构建上下文）{
返回MenuItems.choices.map（（字符串选项）{
返回PopupMenuItem(
价值：选择，
儿童：文本（选择），
);
}).toList（）；
},
)
],

目标：使化身成为一个纯粹的圆形，而不是椭圆形

尝试：ClipRRect、ClipOval、设置最小半径和最大半径等

---

感谢您提供的所有帮助。

通常，它应该与

ClipRRect

配合使用。请确保添加

fit:BoxFit。盖子

以避免缩放

ClipRRect(
  borderRadius: BorderRadius.circular(25.0),
  child: Image.network(
    googleUserUrl,
    height: 50.0,
    width: 50.0,
    fit: BoxFit.cover,
  ),
),

---

我以前也遇到过这个问题，发现将虚拟圆形包装在一个宽度为58的容器中可以解决圆形半径比的问题，使其成为一个合适的圆形。一个像素或多或少可能符合您的喜好。请尝试一下：

Container(
  width: 58,
  child: PopupMenuButton(
    icon: CircleAvatar(
      backgroundImage: NetworkImage(
        "https://4.bp.blogspot.com/-Jx21kNqFSTU/UXemtqPhZCI/AAAAAAAAh74/BMGSzpU6F48/s1600/funny-cat-pictures-047-001.jpg"
      ),
      backgroundColor: Colors.red,
    ),
    itemBuilder: (BuildContext context) {
      return [
        PopupMenuItem<String> (
          value: '1',
          child: Text('1'),
        ),
        PopupMenuItem<String> (
          value: '2',
          child: Text('2'),
        ),
      ];
    },
  ),
)

容器(
宽度：58，
孩子：弹出菜单按钮(
图标：CircleAvatar(
背景图片：NetworkImage(
"https://4.bp.blogspot.com/-Jx21kNqFSTU/UXemtqPhZCI/AAAAAAAAh74/BMGSzpU6F48/s1600/funny-cat-pictures-047-001.jpg"
),
背景颜色：Colors.red，
),
itemBuilder:（构建上下文）{
返回[
PopupMenuItem(
值：“1”，
子项：文本（'1'），
),
PopupMenuItem(
值：“2”，
子项：文本（'2'），
),
];
},
),
)

这是我找到的解决方案，但现在我的问题是，我不能让化身比下面显示的更大

actions: <Widget>[
                  PopupMenuButton<String>(
                    icon: Container(
                      child: ClipOval(
                        child: Align(
                          heightFactor: 1,
                          widthFactor: 1,
                          child: Image.network(googleUserUrl),
                        ),
                      )
                    ),

---

带有dumazy代码：

Container(
  padding: EdgeInsets.all(5),
  width: 58,
  child: CircleAvatar(
    backgroundImage: NetworkImage(
      "https://4.bp.blogspot.com/-Jx21kNqFSTU/UXemtqPhZCI/AAAAAAAAh74/BMGSzpU6F48/s1600/funny-cat-pictures-047-001.jpg"
    )
  ),
),

actions: <Widget>[
                  PopupMenuButton<String>(
                    icon: Container(
                      child: ClipOval(
                        child: Align(
                          heightFactor: 1,
                          widthFactor: 1,
                          child: Image.network(googleUserUrl),
                        ),
                      )
                    ),

操作：[
弹出菜单按钮(
图标：容器(
孩子：斜坡(
子对象：对齐(
高度系数：1，
宽度系数：1，
子：Image.network（googleUserUrl），
),
)
),

---

---

想法？

这是我的最终解决方案，这在很大程度上要感谢乔·索雷斯。调整宽度会增加圆圈的大小。我将其设置为与“localhour”图像的高度相等，现在它看起来很棒

actions: <Widget>[
                  Container(
                    width: 60.0,
                    child: PopupMenuButton<String>(
                      icon: ClipOval(
                        child: Align(
                          heightFactor: 1,
                          widthFactor: 1,
                          child: Image.network(googleUserUrl),
                        ),
                      ),
                      onSelected: choiceAction,
                      itemBuilder: (BuildContext context) {
                        return MenuItems.choices.map((String choice) {
                          return PopupMenuItem<String> (
                            value: choice,
                            child: Text(choice),
                          );
                        }).toList();
                      },
                    ),
                  )
                ],

操作：[
容器(
宽度：60.0，
孩子：弹出菜单按钮(
图标：ClipOval(
子对象：对齐(
高度系数：1，
宽度系数：1，
子：Image.network（googleUserUrl），
),
),
当选：选秀活动，
itemBuilder:（构建上下文）{
返回MenuItems.choices.map（（字符串选项）{
返回PopupMenuItem(
价值：选择，
儿童：文本（选择），
);
}).toList（）；
},
),
)
],

---

您可以使用ClipOval小部件来实现这一点。我正在发布一个示例，其中我的图像将是圆形格式的主要图标小部件，就像在本机android中一样

AppBar(
      title: Text(title),
      leading: Padding(
        padding: const EdgeInsets.all(8.0),
        child: ClipOval(
          child: Image(image: Image.asset('assets/images/icon.webp').image,),
        ),
      ),
    );

---

你确定图像不是椭圆形的吗？你说的是CircleAvatar小部件吗？默认情况下，它是一个圆形，而不是椭圆形。或者你的图像有一个不合适的形状，或者你正在通过自己的更改来更改形状。正如你在这里看到的：图像最初是方形的，因为没有CircleAvatar小部件，它就是这样显示的。你已经测试了还有一点，是AppBar小部件对你的头像起到了这样的作用。我很确定我们可以修复它。给我几分钟时间。这仍然会导致我的图像变成椭圆形，很遗憾。你能分享一下你看到的屏幕截图吗？我在下面放了一个解决方案，显示了三个比较。我改变了我的反应。我已经交换了容器，以靠近弹出窗口MenuButton取代了CircleAvatar，现在它看起来像一个圆形。这两个小部件真的不喜欢一起工作。我接受了将其包装在容器中的建议，但保留了ClipOval小部件，它工作得很好。使用CircleAvatar仍然使其呈椭圆形。我在下面的回答中添加了这两个小部件。奇怪的是，你不得不告诉我们呃，一个老生常谈。我用你的代码尝试了我的解决方案，它成功了。如果一个答案解决了你的问题，请不要忘记将其标记为正确。显然，我只能在两天内将我的答案标记为正确。所以我的答案不正确？我不明白。我使用了你的代码，更改了答案以匹配你想要的。我认为你从两个人那里得到帮助是不公平的但是你会把自己的答案标记为正确的，甚至不要投票给帮助过你的人。抱歉。我会把你的答案标记为正确的，因为它帮助我找到了对我有用的答案。

AppBar(
      title: Text(title),
      leading: Padding(
        padding: const EdgeInsets.all(8.0),
        child: ClipOval(
          child: Image(image: Image.asset('assets/images/icon.webp').image,),
        ),
      ),
    );