Sliver Appbar 上的圆形头像答案

【问题标题】：Circle Profile Image on Sliver AppbarSliver Appbar 上的圆形头像
【发布时间】：2019-08-13 00:19:01
【问题描述】：

我正在尝试在我的 sliver 应用栏上包含一个圆形个人资料图像按钮，但 sliver 应用栏并没有完全正确地呈现它。这就是我得到的，我怎样才能在银色应用栏上实现圆形个人资料图像？

我的代码：

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

            ),

【问题讨论】：

使用圆形头像小部件docs.flutter.io/flutter/material/CircleAvatar-class.html
仍然无法正确渲染
在任何现代应用程序的应用程序栏上都可以找到圆形图像我相信您遇到过用户个人资料图像在应用程序栏上显示为圆形图像的应用程序

标签： flutter flutter-layout flutter-sliver

【解决方案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'),
      ),
    ),
  ],
)

【讨论】：

它仍然没有正确呈现，我用我得到的结果更新了我的问题
您是否确实尝试过我的代码？因为在更新的问题中，您在 CircleAvatar 中添加了 minRadius: 28，这使得它比需要的大一点。如果这不是问题，那么你说的渲染不正确是什么意思？
是的，您的代码将其呈现为方形图像，因此我添加了半径
尝试将圆形头像添加到 Flutter sliver 应用栏由于某种原因显示为正方形
他们似乎是 CircleAvatar backgroundImage 属性的问题，所以我小时候用 ClipOval 更新了答案，现在它可以正常工作了。