Dart 如何在AppBar上制作圆形轮廓图片（操作按钮）

战友：D 目前，我正在搜索或寻找一种方法，将Appbar操作按钮图标替换为使用URL获取的个人资料图片。唯一的问题是，我似乎找不到一种方法使它循环。有什么想法吗

这是我的AppBar课程

class MyAppBar extends AppBar {
  MyAppBar({Key key, String  urlFoto})
  : super(
    key: key,
    title: Text(
      "Himatif App",
      style: TextStyle(fontFamily: 'Strasua'),
    ),
    backgroundColor: Color(0xff3a3637),
    actions: <Widget>[
      // Something here
    ]
  );
}

---

类似于Appbar上的右上角图标，但被用户配置文件pic取代。ClipRect小部件使其子小部件循环。你可以用墨水瓶把它包起来，使它像按钮一样工作

InkWell(
  onTap: () {},
  child: ClipRRect(
    borderRadius: BorderRadius.circular(60),
    child: CachedNetworkImage(
      width: 120,
      height: 120,
      fit: BoxFit.cover,
      imageUrl: "imageUrl goes here",
      placeholder: Center(
        child: CircularProgressIndicator(),
      ),
    ),
  ),
)

---

您还可以将其包装在容器下，使其成为圆形，并将容器的子部件作为您的图像。 代码如下：

appBar: AppBar(
      centerTitle: false,
      backgroundColor: Color(0xff3a3637),
      title: Text("HIMATIF APP"),
      actions: <Widget>[
        Padding(
          padding: EdgeInsets.only(right: 10.0),
          child: Container(
            width: 50,
            height: 50,
            decoration: BoxDecoration(
              shape: BoxShape.circle,
              color: Colors.white, //remove this when you add image.
            ),
            child: CachedNetworkImage(
              width: 120,
              height: 120,
              fit: BoxFit.cover,
              imageUrl: "imageUrl goes here",
            ),
          ),
        )
      ],
    ),

以下是结果图像：

---

谢谢你，伙计，你救了我的命哈哈：你还有一个问题，在我看来，如果图像不是完美的正方形，它会打破圆形。因此，我必须减小高度和宽度值。当应用程序安装在另一个分辨率不同的设备上时，它不会是一个圆圈吗？@MuhammadIslamTaufikurahman我已经解决了你的问题。从正方形溢出的图像的任何部分都将被裁剪，因为我已将fit属性设置为BoxFit.cover。尝试将非方形图像设置为您的个人资料图片，然后看看会发生什么。啊，您是对的，无论如何，有没有办法在其中实现占位符图像？@MuhammadIslamTaufikurahman是的，您可以为CachedNetworkImage提供占位符属性并指定占位符小部件。我现在就用一些例子来编辑我的代码！再次感谢你，伙计：这似乎能解决问题，但不知为什么不能。容器不会裁剪其子容器，因此如果子容器是正方形，它将显示为正方形图像。添加图像时将使用如下内容：image:new decoration image fit:BoxFit.fill，图像：新的NetworkImage图像url基本上使用图像到Boxfilt.Fill的fit属性如果这样做，它会的，但是发布此问题的人使用的是CachedNetworkImage，因此，您的解决方案将不起作用。而且，如果您将CachedNetworkImageProvider与使用装饰图像的解决方案一起使用，您将失去使用CachedNetworkImage的占位符小部件和其他功能的好处

appBar: AppBar(
      centerTitle: false,
      backgroundColor: Color(0xff3a3637),
      title: Text("HIMATIF APP"),
      actions: <Widget>[
        Padding(
          padding: EdgeInsets.only(right: 10.0),
          child: Container(
            width: 50,
            height: 50,
            decoration: BoxDecoration(
              shape: BoxShape.circle,
              color: Colors.white, //remove this when you add image.
            ),
            child: CachedNetworkImage(
              width: 120,
              height: 120,
              fit: BoxFit.cover,
              imageUrl: "imageUrl goes here",
            ),
          ),
        )
      ],
    ),