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

Answer 2

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

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

Answer 3

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

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

使用JoãoSoares代码：

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

有想法吗？

Answer 4

这是我的最终解决方案，这在很大程度上要感谢JoãoSoares。调整宽度会增加圆的大小。我将其设置为等于“ localhour”图像的高度，现在看起来不错。

private final String method1(){

            if(!StringUtils.isEmpty(stringvariable)){
                if(stringvariable.equals("str1") || stringvariable.equals("str2") || stringvariable.equals("str3") ){
                    Stringvariable1 = "val1";
                }
                else if(stringvariable.equals("str4") || stringvariable.equals("str5") ){
                    Stringvariable1 = "val2";
                }
                else if(stringvariable.equals("str6") || stringvariable.equals("str7") || stringvariable.equals("str8")){
                    Stringvariable1 = "val3";
                }
                else if(stringvariable.equals("str9") || stringvariable.equals("str10") || stringvariable.equals("str11")){
                    Stringvariable1 = "val4";
                }
                else if(stringvariable.equals("str12") || stringvariable.equals("str13") || stringvariable.equals("str14")){
                    Stringvariable1 = "val5";
                }
                else if(stringvariable.equals("str15")){
                    Stringvariable1 = "val6";
                }
                else if(stringvariable.equals("str16") || stringvariable.equals("str17") || stringvariable.equals("str18") || stringvariable.equals("str19")){
                    Stringvariable1 = "val7";
                }
                else if(stringvariable.equals("str20") || stringvariable.equals("str21") ||stringvariable.equals("str22")){
                    Stringvariable1 = "val8";
                }
                else if(stringvariable.equals("str23") || stringvariable.equals("str24") || stringvariable.equals("str25") || stringvariable.equals("str26")){
                    Stringvariable1 = "val9";
                }
                else if(stringvariable.equals("str27") || stringvariable.equals("str28")){
                    Stringvariable1 = "val10";
                }
                else if(stringvariable.equals("str29") || stringvariable.equals("str30")){
                    Stringvariable1 = "val11";
                }
                else if(stringvariable.equals("str31")){
                    Stringvariable1 = "val12";
                }
                else if(stringvariable.equals("str32")){
                    Stringvariable1 = "val13";
                }
                else if(stringvariable.equals("str33") || stringvariable.equals("str34") || stringvariable.equals("str35") || stringvariable.equals("str36")){
                    Stringvariable1 = "val14";
                }
                else if(stringvariable.equals("str37")){
                    Stringvariable1 = "val15";
                }
                else if(StringUtils.isEmpty(stringvariable) ){
                    Stringvariable1 = "val16";
                }
                else {
                    Stringvariable1 = "val17";
                }
            }
            else{
                Stringvariable1 = "val18";
            }

        return Stringvariable1;
    }

Answer 5

您可以使用ClipOval Widget来做到这一点。我正在发布一个示例，其中我的图像将以四舍五入的格式领先于图标小部件，就像在本机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,),
        ),
      ),
    );

Flutter：如何在Appbar中制作圆形头像

5 个答案: