使 sliverAppBar 在扩展模式下隐藏标题答案

【问题标题】：make sliverAppBar hide title in expended mode使 sliverAppBar 在扩展模式下隐藏标题
【发布时间】：2020-02-10 00:04:34
【问题描述】：

我正在使用 SliverAppBar 测试代码并制作这个小部件，但是有一个问题我想在 SliverAppbar 被消耗时隐藏具有“2 个图标和标题“类别页面”的顶部栏，但是当我向上滚动时它必须显示和 flexibleSpace隐藏

这是我的代码

 return Scaffold(
  body: CustomScrollView(
    slivers: <Widget>[
      SliverAppBar(
        expandedHeight: 200,
        floating: false,
        pinned: true,
        snap: false,
        title: AppBar(),
        centerTitle: true,

        flexibleSpace: FlexibleSpaceBar(
          background: CenterAppBar(),
          // centerTitle: false,
          // titlePadding: EdgeInsets.all(0),
          // background: AppBar(),
        ),
      ),
      SliverList(
        delegate: SliverChildListDelegate([
          CategoryCard(),
          CategoryCard(),
          CategoryCard(),
          CategoryCard(),
          CategoryCard(),
          CategoryCard(),
          CategoryCard(),
          CategoryCard(),
          CategoryCard(),
          CategoryCard(),
                        CategoryCard(),
          CategoryCard(),
          CategoryCard(),
          CategoryCard(),
          CategoryCard(),
          CategoryCard(),
          CategoryCard(),
          CategoryCard(),
          CategoryCard(),
          CategoryCard(),
                        CategoryCard(),
          CategoryCard(),
          CategoryCard(),
          CategoryCard(),
          CategoryCard(),
          CategoryCard(),
          CategoryCard(),
          CategoryCard(),
          CategoryCard(),
          CategoryCard(),
        ]),
      )
    ],
  ),
);

【问题讨论】：

有什么解决办法吗？
您可以创建自己的 FlexibleSpaceBar stackoverflow.com/a/63407889/5541523

标签： flutter dart flutter-sliver

【解决方案1】：

您可以将 SliverAppBar 的 bottom 属性用于您希望与标题重叠的小部件。请参阅此示例。

Scaffold(
  body: CustomScrollView(
  slivers: <Widget>[
    SliverAppBar(
      automaticallyImplyLeading: false,
      expandedHeight: 80,
      floating: false,
      pinned: true,
      snap: false,
      centerTitle: true,
      bottom: PreferredSize(
        preferredSize: const Size.fromHeight(0),
        child: Container(
          color: Colors.redAccent,
          child: const Padding(
            padding: EdgeInsets.all(16.0),
            child: Center(
            child: Text('Categories'),
          ),
        ),
      ),
    ),
    flexibleSpace: FlexibleSpaceBar(
      background: Container(
        height: 80,
        color: Colors.redAccent,
        child: const Center(
          child:  Text(
            'Categories Page',
            style: TextStyle(
                color: Colors.white,
                fontWeight: FontWeight.bold,
                fontSize: 20),
           ),
         ),
       ),
       // centerTitle: false,
       // titlePadding: EdgeInsets.all(0),
       // background: AppBar(),
    ),
  ),
  SliverList(
    delegate: SliverChildListDelegate([...]),
  ),
),

【讨论】：