Flutter：如何在应用栏中制作圆形头像

Question

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

我尝试了很多选项（包括设置半径、使用 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、设置半径最小值和最大值等

感谢您的任何帮助。

Answer 1

我过去曾遇到过这个问题，并且发现将 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'),
        ),
      ];
    },
  ),
)