flutter - Flutter-如何在滚动到屏幕上时创建窗口小部件

Question

我创建了一个自定义窗口小部件，将页脚作为最后一项添加到接收的可滚动窗口小部件中。一切正常，但是我想更改创建页脚的时间。

就像ListView.builder在滚动到屏幕上时创建项目一样，我也希望页脚也会发生这种情况。如果此自定义窗口小部件接收到ListView.builder或GridView.builder，则可以在滚动到屏幕上时很好地创建它们的项目，但是即使没有在屏幕上也可以创建页脚。

这是自定义窗口小部件，其中收到的窗口小部件为widget.child(ScrollView)，页脚为widget.footer(Widget)。

@override
Widget build(BuildContext context) {
  return Scrollable(
    controller: widget.child.controller,
    axisDirection: widget.child.getDirection(context),
    viewportBuilder: (context, offset) {
      return ShrinkWrappingViewport(
        axisDirection: widget.child.getDirection(context),
        offset: offset,
        slivers: widget.child.buildSlivers(context)
          ..add(
              SliverList(
                  delegate: SliverChildBuilderDelegate((context, index) {
            print('footer');
            return widget.footer;
          }, childCount: 1))),
      );
    },
  );
}

这就是我的使用方式:

ScrollableWithFooter(
  child: ListView.builder(
    itemCount: 50,
    itemBuilder: (context, index) {
      print(index);
      return SizedBox(height: 400, child: Text('Item $index'));
    },
  ),
  footer: Center(child: Text('Footer')),
)

在列表50中，我看到了屏幕上的第一项，这是打印件的输出:

I/flutter (28472): 0
I/flutter (28472): 1
I/flutter (28472): 2
I/flutter (28472): footer

当我开始滚动时，其他项目在创建时便开始打印其索引:

I/flutter (28472): 2
I/flutter (28472): footer
I/flutter (28472): 3
I/flutter (28472): 4
I/flutter (28472): 5

这是正确的项目，但不适用于页脚。我希望像其他项目一样在到达列表末尾时创建页脚。如何实现呢？

请注意，在屏幕上一切正常，页脚出现在列表的末尾。只是它的创造发生在它应该发生之前。

这是我尝试过的方法，但是不起作用:

@override
Widget build(BuildContext context) {
  return Scrollable(
    controller: widget.child.controller,
    axisDirection: widget.child.getDirection(context),
    viewportBuilder: (context, offset) {
      List<Widget> slivers = widget.child.buildSlivers(context);
      return ShrinkWrappingViewport(
        axisDirection: widget.child.getDirection(context),
        offset: offset,
        slivers: [
          SliverList(
              delegate: SliverChildBuilderDelegate((context, index) {
            if (index < slivers.length) {
              return slivers[index]; // <- Here seems to be the problem
            }
            print('footer');
            return widget.footer;
          }, childCount: slivers.length + 1))
        ],
      );
    },
  );
}

我收到此错误:

The following assertion was thrown building NotificationListener<KeepAliveNotification>:
I/flutter (28472): A RenderRepaintBoundary expected a child of type RenderBox but received a child of type
I/flutter (28472): RenderSliverPadding.

Answer 1

您可以在listview的 Controller 中添加一个侦听器，它会侦听滚动，当您单击底部时，您将激活一个名为footer的标志，然后显示该页脚