Flutter：如何在 appbar 中制作圆形头像答案

【问题标题】：Flutter: How to make circular avatar in appbarFlutter：如何在 appbar 中制作圆形头像
【发布时间】：2020-04-26 00:30:33
【问题描述】：

美好的一天，我正在努力使我在应用栏右上角的头像成为一个完美的圆圈。它一直呈椭圆形。

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

代码：

return Scaffold(
  appBar: AppBar(
    automaticallyImplyLeading: false,
      backgroundColor: COLORS_BG,
      title: Padding(
        padding: const EdgeInsets.only(top: 10.0),
        child: Row(
          children: <Widget>[
            Image.asset('images/localhourlogo.png', height: 50.0,),
          ]
        ),
      ),
      actions: <Widget>[
        PopupMenuButton<String>(
          icon: CircleAvatar(
            backgroundImage: NetworkImage(googleUserUrl)
          ),
          onSelected: choiceAction,
          itemBuilder: (BuildContext context) {
            return MenuItems.choices.map((String choice) {
              return PopupMenuItem<String> (
                value: choice,
                child: Text(choice),
              );
            }).toList();
          },
        )
      ],

目标：使头像成为纯圆形，而不是椭圆形。

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

感谢您的任何帮助。

【问题讨论】：

你确定图片不是椭圆的吗？
您说的是 CircleAvatar 小部件吗？默认情况下，它是圆形，而不是椭圆形。您的图像的形状不合适，或者您正在使用自己的更改来更改形状。正如你在这里看到的：dartpad.dartlang.org/cba1149f189df8eed9e29953acb4f4fd
图像最初是正方形的，因为它是没有 CircleAvatar 的样子
我已经进行了更多测试，它是 AppBar Widget 对您的头像执行此操作。我很确定我们可以修复它。给我几分钟。

标签： flutter dart

【解决方案1】：

您可以使用 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,),
        ),
      ),
    );

【讨论】：

【解决方案2】：

这是我的最终解决方案，这在很大程度上要感谢 João Soares。调整宽度会增加圆圈的大小。我让它等于“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();
                      },
                    ),
                  )
                ],

【讨论】：

奇怪的是，您必须使用 ClipOval。我用你的代码尝试了我的解决方案，它奏效了。如果某个答案解决了您的问题，请不要忘记将其标记为正确。
显然只能在 2 天内将我的标记为正确。
所以我的回答不正确？我不明白。我使用了您的代码，更改了答案以匹配您想要的。我认为你从两个人那里得到帮助是不公平的，但是你会把自己的答案标记为正确，甚至不给帮助你的人投票。
道歉。我会将您的答案标记为正确，因为它帮助我找到了适合我的答案。

【解决方案3】：

我过去遇到过这个问题，并发现将 AvatarCircle 包装在一个宽度为 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'),
        ),
      ];
    },
  ),
)

【讨论】：

遗憾的是，这仍然导致我的图像变成椭圆形。
你能分享一下你看到的截图吗？
我在下面放了一个解决方案，显示了三个比较
我改变了我的回答。我已将 Container 换成 PopupMenuButton 周围而不是 CircleAvatar 周围，现在它看起来像一个圆圈。这两个小部件真的不喜欢一起工作。
我接受了将其包装在容器中的建议，但保留 ClipOval 小部件并且它运行良好。使用 CircleAvatar 仍然使它呈椭圆形。我在下面的答案中添加了。

【解决方案4】：

这是我找到的解决方案，但现在我的问题是我无法使头像比下面显示的更大。

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

使用 João Soares 代码：

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),
                        ),
                      )
                    ),

想法？

【讨论】：

【解决方案5】：

通常它应该与ClipRRect 一起使用。确保添加 fit: BoxFit.cover 以避免缩放。

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

【讨论】：