Flutter - 如何使用 SliverAppBar 和无限滚动分页？

Question

我在我的 flutter 应用程序中使用无限滚动分页插件。我还需要在我的页面中使用 SilverAppBar。这是我的代码：

\n

return Scaffold(\n  body: DefaultTabController(\n    length: 2,\n    child: NestedScrollView(\n      headerSliverBuilder: (context, value) {\n        return [\n          SliverAppBar(\n            bottom: TabBar(\n              tabs: [\n                Tab(icon: Icon(Icons.call), text: "1"),\n                Tab(icon: Icon(Icons.message), text: "2"),\n              ],\n            ),\n          ),\n        ];\n      },\n      body: TabBarView(\n        children: [\n          const MyListWidget()\n          Text(\'2\')\n        ],\n      ),\n    ),\n  ),\n);\n

\n

这是我的 MyListWidget：

\n

Widget build(BuildContext context) {\nreturn PagedSliverList<int, MyModel>(\n      pagingController: _\xd1\x81ontroller,\n      builderDelegate: PagedChildBuilderDelegate<MyModel>(\n        itemBuilder: (context, item, index) {\n          return Text(item.Title);\n        },\n      ),\n    );\n  }\n

\n

但我有错误：

\n

A RenderRepaintBoundary expected a child of type RenderBox but received a child of type RenderSliverList.\n

\n

我也尝试过：

\n

body: SliverFillRemaining(\n            child: TabBarView(\n              children: [\n                const ProfileSelections(),\n                //Container(child: Text(\'1\')),\n                Text(\'2\')\n              ],\n            ),\n          )\n

\n

但我有错误：

\n

 A RenderSliverFillRemainingWithScrollable expected a child of type RenderBox but received a child of type RenderSliverFillRemainingWithScrollable.\n

\n

我该如何修复这些错误？任何建议 - 我将不胜感激

\n

Answer 1

无需使用无限滚动分页，您只需使用 flutter 内置滚动通知即可。

滚动通知- 抽象类 ScrollNotification 使用 ViewportNotificationMixin 扩展 LayoutChangedNotification。

与滚动相关的通知。

可滚动小部件通知其祖先有关滚动相关的更改。

通知具有以下生命周期：

• ScrollStartNotification，指示小部件已开始滚动。

• 零个或多个 ScrollUpdateNotifications，表明小部件已更改其滚动位置，与零个或多个混合

• OverscrollNotifications，这表明小部件尚未更改其滚动位置，因为更改会导致其滚动位置超出其滚动范围。 ScrollUpdateNotifications 和 OverscrollNotifications 中散布着零个或多个 UserScrollNotifications，这表明用户已更改方向他们正在其中滚动。

• ScrollEndNotification，指示小部件已停止滚动。

• 一个 UserScrollNotification，其 UserScrollNotification.direction 为 ScrollDirection.idle。

这是完整的源代码和解释

import 'package:flutter/material.dart';

class InfiniteScrollPagination extends StatefulWidget {
  const InfiniteScrollPagination({Key key}) : super(key: key);

  @override
  _InfiniteScrollPaginationState createState() =>
      _InfiniteScrollPaginationState();
}

class _InfiniteScrollPaginationState extends State<InfiniteScrollPagination> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: DefaultTabController(
        length: 2,
        child: NestedScrollView(
          headerSliverBuilder: (context, value) {
            return [
              SliverAppBar(
                pinned: true,
                toolbarHeight: 0,
                bottom: TabBar(
                  tabs: [
                    Tab(icon: Icon(Icons.call), text: "1"),
                    Tab(icon: Icon(Icons.message), text: "2"),
                  ],
                ),
              ),
            ];
          },
          body: TabBarView(
            children: [MyListWidget(), Text('2')],
          ),
        ),
      ),
    );
  }
}

class MyListWidget extends StatefulWidget {
  const MyListWidget({Key key}) : super(key: key);

  @override
  State<MyListWidget> createState() => _MyListWidgetState();
}

class _MyListWidgetState extends State<MyListWidget> {
  int count = 15;

  @override
  Widget build(BuildContext context) {
    return NotificationListener<ScrollNotification>(
      onNotification: (ScrollNotification scrollInfo) {
        if (scrollInfo.metrics.pixels == scrollInfo.metrics.maxScrollExtent) {
          // here you update your data or load your data from network
          setState(() {
            count += 10;
          });
        }
        return true;
      },
      // if you used network it would good to use the stream or future builder
      child: Container(
        child: getDataList(count),
      ),
    );
  }
}

getDataList(listOfData) {
  return ListView.separated(
      itemBuilder: (context, index) {
        return ListTile(
          title: Text("index $index"),
        );
      },
      separatorBuilder: (context, index) => Divider(
        thickness: 2,
        color: Colors.grey,
      ),
      itemCount: listOfData);
}

输出：