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

Question

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

因此，我希望away只允许滚动，直到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.)',
              ),
            ],
          ),
        ],
      ),
    );
  }
}

Answer 1

在查看文档之后，我找到了CustomScrollView的center属性。这允许我将我的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();
                  }));
                },
              ),
            ],
          ),
        ],
      ),
    );
  }
}