Flutter:如何在appbar中制作圆形头像

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'),
        ),
      ];
    },
  ),
)