使用 ScrollNotification 滚动出 SliverList 子项时获取其索引

Question

我有这个应用程序，它有一个 sliverlist 和一个 sliverAppbar。我需要获取 sliverlist onscroll 中每个项目的当前滚动位置，并确定它是否已经越过 sliverAppbar 并使用项目的标题更新 sliverappbar。说从 Item1 开始，一旦它穿过 SliverAppBar，这意味着我正在查看 Item1 内容，当 Item2 穿过 SliverAppBar 时，使用标题 Item2 更新 SliverAppBar 以表示用户正在查看 Item2 内容

我正在尝试使用 NotificationListener<ScrollEndNotification> 来实现这一点，但我被困在第二个 NotificationListener 上，它应该向父级顶部发出通知 在这一行 ScrollEndNotification(metrics: , context:context).dispatch(context); 它会抛出一个错误，我应该提供一个 metrics 参数，我不知道该提供什么。

            SliverList(
              delegate: SliverChildBuilderDelegate(
                (BuildContext context, int index) {
                  ScrollEndNotification(metrics: , context:context).dispatch(context);
                  return  AutoScrollTag(
                        key: ValueKey(index),
                        controller: controller,
                        index: index,
                        child: Padding(
                     padding: const EdgeInsets.only(
                      top: 30.0, left: 20.0, right: 20.0),
                      child: Container(
                       color: Colors.red,
                     //height: 120.0
                     //height: A varying height

                        ),),},); ),

完整的代码是

           Widget build(BuildContext context) {
           return Scaffold(
           backgroundColor: Colors.grey[100],
           body: NotificationListener<ScrollEndNotification>(
                    onNotification: (notification) {
                      if (notification is ScrollEndNotification) {
                     ///Here I need to know what widget index bubbled the notification, its position 
                     ///on the screen and its index 
                     //in the list, in order to do further implementation like update the 
                      //SliverAppBar
                      print('$notification');          
                      return true;
                    },
              child: CustomScrollView(
                 controller: controller
             slivers: <Widget>[
              SliverAppBar(
            title: Text(title),
             ), 
         SliverList(
              delegate: SliverChildBuilderDelegate(
                (BuildContext context, int index) {
                  ScrollEndNotification(metrics: , context:context).dispatch(context);
                  return  AutoScrollTag(
                        key: ValueKey(index),
                        controller: controller,
                        index: index,
                        child: Padding(
                     padding: const EdgeInsets.only(
                      top: 30.0, left: 20.0, right: 20.0),
                      child: Container(
                       color: Colors.red,
                     //height: 120.0
                     //height: A varying height
                        ),),},); ),

此外，如果您对如何实现这一目标有更好的实施，请帮助我。简而言之，我需要跟踪某个项目何时从屏幕上滚出，并在 Sliverlist 中找到它的 index。请记住，item 有一个可变大小的容器，可根据其中的子项数量进行扩展。这是电子商务应用程序中常见的 UX 模式。例如，在用户向下滚动时查看菜单，并在标题穿过屏幕时更新用户正在查看的菜单。

为要点提供link，以便您了解完整的实现

Answer 1

我为各种身高的孩子实现了你想要的。
为了制作不同的孩子身高，我使用索引值调整顶部填充。
所以第n个孩子的身高变大了。

1. 获取每个索引儿童的身高并保存与顶部的距离。
2. 添加滚动监听器以获取当前滚动位置
3. 仅获取具有第 n 个孩子的距离和当前位置的隐藏子索引
4. 仅使用隐藏的子索引更改标题

import 'dart:math';

import 'package:flutter/material.dart';
import 'package:flutter/scheduler.dart';
import 'package:scroll_to_index/scroll_to_index.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
        visualDensity: VisualDensity.adaptivePlatformDensity,
      ),
      home: MyHomePage(title: 'Flutter Demo Home Page'),
    );
  }
}

class MyHomePage extends StatefulWidget {
  MyHomePage({Key key, this.title}) : super(key: key);

  final String title;

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

class _MyHomePageState extends State<MyHomePage> {
  String title = 'Viewing item 0';
  Random random = Random();

  Map<int, double> itemHeight = {};
  int currentHideIndex = 0;

  final _mainScrollController = ScrollController();
  @override
  void initState() {
    super.initState();
    _mainScrollController.addListener(_onMainScroll);
  }

  void _onMainScroll() {
    int justHiddenIndex =
        findIndexJustHidden(_mainScrollController.position.pixels);
    print('justHiddenIndex: $justHiddenIndex');
    if (currentHideIndex != justHiddenIndex) {
      setState(() {
        title = 'Viewing item ${justHiddenIndex + 1}';
      });
      currentHideIndex = justHiddenIndex;
    }
  }

  int findIndexJustHidden(currentPosition) {
    int index = -1;
    for (var item in itemHeight.entries) {
      if (currentPosition > item.value) {
        index = item.key;
      } else {
        if (index != 0) {
          return index;
        }
      }
    }
    return index;
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      backgroundColor: Colors.grey[100],
      body: CustomScrollView(
        controller: _mainScrollController,
        slivers: <Widget>[
          SliverAppBar(
            title: Text(title),
            pinned: true,
          ),
          SliverList(
            delegate: SliverChildBuilderDelegate(
              (BuildContext context, int index) {
                double randomHeight;
                if (!itemHeight.containsKey(index)) {
                  randomHeight = (random.nextInt(100) + 40) * 1.0;
                  print('index: $index, randomHeight: $randomHeight');
                  double beforeSumHeight =
                      index == 0 ? 0 : itemHeight[index - 1];
                  print({
                    'index': index,
                    'beforeSumHeight': beforeSumHeight,
                    'height': randomHeight
                  });
                  itemHeight[index] = beforeSumHeight + randomHeight;
                } else {
                  randomHeight = index == 0
                      ? itemHeight[index]
                      : itemHeight[index] - itemHeight[index - 1];
                }

                return AutoScrollTag(
                  key: ValueKey(index),
                  controller: AutoScrollController(),
                  index: index,
                  child: Container(
                    height: randomHeight,
                    decoration: BoxDecoration(
                        color: Colors.red.withOpacity(0.5),
                        border: Border(
                          bottom: BorderSide(
                            color: Color(0XFF000000).withOpacity(0.08),
                            width: 1.0,
                            style: BorderStyle.solid,
                          ),
                        )),
                    padding: EdgeInsets.only(top: 10, left: 20.0, right: 20.0),
                    child: Text('$index'),
                  ),
                );
              },
            ),
          ),
        ],
      ),
    );
  }

  Widget _buildBody() {
    return Container();
  }
}

class WidgetSize extends StatefulWidget {
  final Widget child;
  final Function onChange;

  const WidgetSize({
    Key key,
    @required this.onChange,
    @required this.child,
  }) : super(key: key);

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

class _WidgetSizeState extends State<WidgetSize> {
  @override
  Widget build(BuildContext context) {
    SchedulerBinding.instance.addPostFrameCallback(postFrameCallback);
    return Container(
      key: widgetKey,
      child: widget.child,
    );
  }

  var widgetKey = GlobalKey();
  var oldSize;

  void postFrameCallback(_) {
    var context = widgetKey.currentContext;
    if (context == null) return;

    var newSize = context.size;
    if (oldSize == newSize) return;

    oldSize = newSize;
    widget.onChange(newSize);
  }
}

Answer 2

您不需要使用ScrollEndNotification。事实上，当SliverAppBar 更新在 滚动时，我发现用户体验更灵敏，这与onscroll 处理程序最相似。如果您更改为仅使用常规ScrollNotification，则使用通知的想法会很好。在这种情况下，问题实际上非常简单，因为SliverList 子级具有固定 高度。孩子总是 150 像素高（120 像素是 30 填充的内容）。

考虑到这一点，我们实际上可以计算在通知处理程序中滚动出的子项的索引。我必须将 SliverAppBar 更改为 pinned 以在滚动期间保持栏（和滚动出的索引）可见。

请注意，如果子项的高度不固定，我们每次都需要计算每一行的高度，因此需要重构这种方法。

本质上的逻辑是：

// Get scroll position `progress` and subtract `SliverAppBar` height.
double progress = notification.metrics.pixels - 60;
// Calculate index scrolled off the screen.
index = (progress ~/ 150) - 1;

我还添加了一个有效的索引检查，这样就不会错误地显示负索引。

((index >= 0) ? index.toString() : "")

完整代码：

class _MyHomePageState extends State<MyHomePage> {
  late AutoScrollController controller =
      AutoScrollController(initialScrollOffset: 0);
  int index = 0;

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      backgroundColor: Colors.grey[100],
      body: NotificationListener<ScrollNotification>(
        onNotification: (ScrollNotification notification) {
          double progress = notification.metrics.pixels - 60;
          setState(() {
            index = (progress ~/ 150) - 1;
          });
          return true;
        },
        child: CustomScrollView(
          controller: controller,
          slivers: <Widget>[
            SliverAppBar(
              title: Text(
                  widget.title + " " + ((index >= 0) ? index.toString() : "")),
              expandedHeight: 60,
              pinned: true,
            ),
            SliverList(delegate: SliverChildBuilderDelegate(
              (BuildContext context, int localIndex) {
                return AutoScrollTag(
                  key: ValueKey(localIndex),
                  controller: controller,
                  index: localIndex,
                  child: Padding(
                    padding: const EdgeInsets.only(
                        top: 30.0, left: 20.0, right: 20.0),
                    child: Container(color: Colors.red, height: 120.0),
                  ),
                );
              },
            )),
          ],
        ),
      ),
    );
  }
}