Flutter SliverAppBar -- 允许滚动直到 SliverAppBar 不再可见答案

【问题标题】：Flutter SliverAppBar -- Allow scrolling until SliverAppBar is no longer visibleFlutter SliverAppBar -- 允许滚动直到 SliverAppBar 不再可见
【发布时间】：2020-11-15 00:35:55
【问题描述】：

我正在尝试使用SliverAppBar 创建一个CustomScrollView。由于包含主要内容的SliverGrid 可能经常没有足够的内容来允许滚动经过“SliverAppBar”，因此现在用户界面感觉“卡住”；用户只能滚动到SliverAppBar 的一部分，但在隐藏之前永远不会滚动。

因此，我正在寻找允许滚动，直到 SliverAppBar 被隐藏。

下面是我当前的代码，

class HomePage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      backgroundColor: Colors.white,
      body: CustomScrollView(
        slivers: <Widget>[
          SliverAppBar(
            backgroundColor: Colors.green,
            expandedHeight: 500.0,
            flexibleSpace: FlexibleSpaceBar(
              background: Image.asset(
                'tree_logo.jpg',
                fit: BoxFit.cover,
              ),
            ),
          ),

          SliverGrid.count(
            crossAxisCount: 4,
            crossAxisSpacing: 20.0,
            mainAxisSpacing: 20.0,
            childAspectRatio: 4 / 3,
            children: [
              PermissibleModuleCard(
                moduleTitle: 'Master Data',
                moduleDescription:
                    'Edit berbagai master-master data (client, supplier, tenaga kerja & material) serta konstanta-kosntanta lainnya (PPN, Alamat, etc.)',
              ),
            ],
          ),
        ],
      ),
    );
  }
}

【问题讨论】：

标签： flutter flutter-layout flutter-sliver sliverappbar

【解决方案1】：

查看文档后，我找到了 center 的 CustomScrollView 属性。这让我可以将我的 SliverList 设置为中心小部件。

最终代码：

class HomePage extends StatelessWidget {
  final GlobalKey _sliverKey = GlobalKey();
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      backgroundColor: Colors.white,
      body: CustomScrollView(
        center: _sliverKey,
        slivers: <Widget>[
          SliverToBoxAdapter(
            child: Image.asset(
              'tree_logo.jpg',
              fit: BoxFit.cover,
            ),
          ),
          SliverGrid.count(
            key: _sliverKey,
            crossAxisCount: 4,
            crossAxisSpacing: 20.0,
            mainAxisSpacing: 20.0,
            childAspectRatio: 4 / 3,
            children: [
              PermissibleModuleCard(
                moduleTitle: 'Master Data',
                moduleDescription:
                    'Edit berbagai master-master data (client, supplier, tenaga kerja & material) serta konstanta-kosntanta lainnya (PPN, Alamat, etc.)',
                onTap: () {
                  Navigator.push(context, MaterialPageRoute(builder: (context) {
                    return MasterDataModulesHomePage();
                  }));
                },
              ),
            ],
          ),
        ],
      ),
    );
  }
}

【讨论】：