在Sliver Appbar上制作圆形个人资料图片

Question

我正在尝试在我的银色应用栏上包含一个圆形个人资料图片按钮，但银色应用栏没有正确地呈现它。这是我得到的内容，我该如何在银色应用栏上实现一个圆形个人资料图片？

我的代码：

    @override
  Widget build(BuildContext context) {
    return Scaffold(
       body: CustomScrollView(
          slivers: <Widget>[
            SliverAppBar(
              title: Text('Home'),
              leading: Container(),
              actions: <Widget>[
                IconButton(
                    icon: Icon(Icons.notifications),
                    onPressed: () {}),
                Padding(
                  padding: const EdgeInsets.all(8.0),
                  child: InkWell(
                    child: Container(
                      height: 30,
                      width: 30,
                      decoration: BoxDecoration(
                          borderRadius: BorderRadius.circular(25.0),
                          image: DecorationImage(image: AssetImage('assets/images/blank_profile.png'))
                      ),
                    ),
                    onTap: () => Navigator.push(context, new MaterialPageRoute(builder: (BuildContext context) => ProfilePage())),
                  ),
                ),
              ],

            ),

使用 CircleAvatar：

 @override
  Widget build(BuildContext context) {
    return Scaffold(
       body: CustomScrollView(
          slivers: <Widget>[
            SliverAppBar(
              title: Text('Home'),
              backgroundColor: Colors.deepOrange,
              leading: Container(),
              actions: <Widget>[
                IconButton(
                    icon: Icon(Icons.notifications),
                    onPressed: () {}),
                CircleAvatar(
                  backgroundImage: AssetImage('assets/images/blank_profile.png'),
                  minRadius: 28,
                ),
              ],

            ),

- theSimm

---

使用圆形头像小部件 https://docs.flutter.io/flutter/material/CircleAvatar-class.html - anmol.majhail

仍然没有正确地渲染它。 - theSimm

在任何现代应用程序的应用栏中，您会发现一个圆形图像。我相信您已经遇到过用户个人资料图像出现在应用栏上的应用程序。 - theSimm

Answer 1

为了实现此功能，您需要使用CircleAvatar。

以下是您可以使用的代码：

SliverAppBar(
  title: Text('Home'),
  leading: Container(),
  actions: <Widget>[
    IconButton(
      icon: Icon(Icons.notifications),
      onPressed: () {}),
    CircleAvatar(
      child: ClipOval(
        child: Image.asset('assets/images/blank_profile.png'),
      ),
    ),
  ],
)

- User

---

它仍然没有正确地渲染，我已更新我的问题并附上了我得到的结果。 - theSimm

你确切地尝试了我的代码吗？因为在更新的问题中，你在CircleAvatar中添加了minRadius: 28，这使得它比所需的要大一些。如果这不是问题，那么你所说的渲染不正确是什么意思？ - User

是的，您的代码将其呈现为正方形图像，因此我添加了半径。 - theSimm

尝试在Flutter Sliver AppBar中添加圆形头像，但出现了方形的问题。 - theSimm

似乎CircleAvatar的backgroundImage属性存在问题，所以我将答案更新为ClipOval作为其子元素，现在它完美地工作了。 - User