嵌套的SliverPersistentHeaders滚动到父SliverPersistentHeader后面

时间:2019-08-06 09:27:42

标签: flutter flutter-sliver

因此,我想先创建一个页面,其中包含一些内容,然后是两个带有两个不同列表的选项卡。选项卡栏的行为应类似于PersistentHeader(粘贴在顶部)。 TabBarView中的这些列表之一也包含SliverPersistentHeader,但是这些列表不会堆积在TabBar PersistentHeader上,而是向后滚动。一个人如何实现这种行为?

以下是显示当前行为的gif:

https://imgur.com/a/OEa49K4

这是我到目前为止尝试过的:

@override
Widget build(BuildContext context) {
  return NestedScrollView(
                    controller: _scrollViewController,
                    headerSliverBuilder: 
                (BuildContext context, bool boxIsScrolled) {
                      return <Widget>[
                        SliverList(
                          delegate: SliverChildListDelegate([
                            _buildTopImage(),
                            Padding(
                              padding: EdgeInsets.symmetric(
                        horizontal: defaultPagePadding),
                              child: _buildTopText(),
                            ),
                          ]),
                        ),
                        SliverAppBar(
                          pinned: true,
                          floating: true,
                          expandedHeight: 0,
                          backgroundColor: Colors.white,
                          bottom: TabBar(
                            labelColor: Theme.of(context).primaryColor,
                            unselectedLabelColor: Colors.grey,
                            tabs: <Widget>[
                              Tab(
                                text: "Tab 1",
                              ),
                              Tab(
                                text: "Tab 2",
                              )
                            ],
                            controller: _tabController,
                          ),
                        )
                      ];
                    },
                    body: TabBarView(
                      children: <Widget>[
                        _buildList1(),
                        _buildList2(),
                      ],
                      controller: _tabController,
                    ),
                  ),
}

Widget _buildList2() {
  return CustomScrollView(slivers: <Widget>[
          SliverAppBar(
            pinned: true,
            title: Text('Test'),
          ),
          SliverAppBar(
            pinned: true,
            title: Text('Test'),
          ),
          SliverAppBar(
            pinned: true,
            title: Text('Test'),
          ),
]);
}

我是Flutter的新手,所以我非常感谢你们的任何帮助!

0 个答案:

没有答案