SliverAppBar 有一张图片作为背景，圆形头像和标题

Question

我正在尝试实现与此类似的东西，我有背景、圆形头像和标题，当向上滚动时头像消失但标题仍然存在。 我能做的是应用背景图像，并保留条形标题，但我不知道如何在 FlexibleSpaceBar 之外设置标题，也不知道如何在背景上设置 CircleAvatar 50%。

SliverAppBar.large(
          expandedHeight: 200.0,
          floating: true,
          pinned: true,
          snap: true,
          flexibleSpace: FlexibleSpaceBar(
            title: _buildProfileName(user),
            background: Stack(
              children: [
                Container(
                  decoration: const BoxDecoration(
                    image: DecorationImage(
                      colorFilter: ColorFilter.mode(
                          Colors.black54, BlendMode.darken),
                      image: AssetImage(
                          "assets/images/landing/hedge-trimmer.jpg"),
                      fit: BoxFit.cover,
                    ),
                  ),
                ),
                Positioned(
                  top:
                      175.0, // (background container size) - (circle height / 2)
                  left: MediaQuery.of(context).size.width / 2 - 50,
                  child: Center(
                    child: CircleAvatar(
                      child: CircleAvatar(
                        backgroundImage: (user.profileImageUrl!.isEmpty
                                ? const AssetImage('assets/images/Logo.png')
                                : CachedNetworkImageProvider(
                                    user.profileImageUrl!))
                            as ImageProvider<Object>?,
                        radius: 45,
                      ),
                      radius: 50,
                      backgroundColor: Colors.white,
                    ),
                  ),
                ),
              ],
            ),
          ),
        ),

这上面产生的东西接近我所追求的只是不完全

Answer 1

我想你快到了。您可以扩展 SliverAppBar 以包含下方的底部空白区域。这是示例代码：

class CustomSliverAppBar extends StatelessWidget {
  const CustomSliverAppBar({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    final expandedHeight = 500.0;
    final collapsedHeight = 60.0;
    return CustomScrollView(
      slivers: [
        SliverAppBar(
          expandedHeight: expandedHeight,
          collapsedHeight: collapsedHeight,
          floating: true,
          pinned: true,
          snap: true,
          backgroundColor: Colors.white,
          flexibleSpace: FlexibleSpaceBar(
            collapseMode: CollapseMode.pin,
            title: Text('Title',
                style: TextStyle(fontSize: 28, color: Colors.black)),
            background: Stack(
              children: [
                Align(
                  alignment: Alignment.topCenter,
                  child: Container(
                    height: expandedHeight - collapsedHeight - 80,
                    decoration: const BoxDecoration(
                      image: DecorationImage(
                        colorFilter:
                            ColorFilter.mode(Colors.black54, BlendMode.darken),
                        image: NetworkImage('https://picsum.photos/1024'),
                        fit: BoxFit.cover,
                      ),
                    ),
                  ),
                ),
                Positioned(
                  bottom: collapsedHeight + 30,
                  left: MediaQuery.of(context).size.width / 2 - 50,
                  child: Container(
                    padding: EdgeInsets.all(5),
                    decoration: ShapeDecoration(
                      color: Colors.white,
                      shape: CircleBorder(),
                    ),
                    child: CircleAvatar(
                      backgroundImage:
                          NetworkImage('https://picsum.photos/256'),
                      radius: 45,
                    ),
                  ),
                ),
              ],
            ),
          ),
        ),
        for (int i = 0; i < 10; i++)
          SliverToBoxAdapter(
            child: Container(
              height: 200,
              color: i % 2 == 0 ? Colors.grey : Colors.grey.shade300,
            ),
          )
      ],
    );
  }
}