Question

同振颤动Dev：D 目前，我正在搜索或以某种方式将Appbar操作按钮图标替换为使用URL获得的个人资料图片。唯一的问题是，我似乎找不到使它循环的方法。有想法吗？

这是我的AppBar类

result = [(hero, movies) for hero in get_heros("Jedi")
          for movies in [get_movies(hero)] if "A New Hope" in movies]

我找到并尝试过的一些代码

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

Screenshot

类似应用栏右上角的图标，但已替换为用户个人资料图片

Answer 1

ClipRRect小部件使其子小部件成为圆圈。您可以将其用墨水瓶包裹起来，使其可用作按钮。

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

Answer 2

您还可以将其包装在容器下，使其圆形，然后将Container的子窗口小部件作为图像。这是代码：

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

这是结果图像：

如何在AppBar上制作圈子资料图片（操作按钮）

2 个答案: