颤振通过RectGetter获取滚动位置,例如顶部或底部

时间:2019-08-16 07:59:29

标签: flutter

使用RectGetter小部件,我们可以检测到ListView中可见的项目,例如:

List<int> getVisible() {
  var rect = RectGetter.getRectFromKey(listViewKey);
  var _items = <int>[];
  _keys.forEach((index, key) {
    var itemRect = RectGetter.getRectFromKey(key);
    if (itemRect != null && !(itemRect.top > rect.bottom || itemRect.bottom < rect.top)) _items.add(index);
  });

  return _items;
}

在此代码中,我想检测ListView在列表顶部或列表底部的滚动位置,也许您猜到可以使用ScrollController解决此问题,但是我检查了一下并确定有点问题,我无法解决

现在如何使用RectGetter获取滚动位置,例如顶部或底部?

import 'package:flutter/material.dart';
import 'package:rect_getter/rect_getter.dart';

void main() => runApp(new MyApp());

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

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

  final String title;

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

class _MyHomePageState extends State<MyHomePage> {
  var _keys = {};

  @override
  Widget build(BuildContext context) {
    /// Make the entire ListView have the ability to get rect.
    var listViewKey = RectGetter.createGlobalKey();

    var listView = RectGetter(
      key: listViewKey,
      child: ListView.builder(
        itemCount: 1000,
        itemBuilder: (BuildContext context, int index) {
          /// Make every item have the ability to get rect,
          /// and save keys for RectGetter and its index into _keys.
          _keys[index] = RectGetter.createGlobalKey();
          return RectGetter(
            key: _keys[index],
            child: Container(
              color: Colors.primaries[index % Colors.primaries.length],
              child: SizedBox(
                width: 100.0,

                /// random height
                height: 50.0 + ((27 * index) % 15) * 3.14,
                child: Center(
                  child: Text('$index'),
                ),
              ),
            ),
          );
        },
      ),
    );

    List<int> getVisible() {
      /// First, get the rect of ListView, and then traver the _keys
      /// get rect of each item by keys in _keys, and if this rect in the range of ListView's rect,
      /// add the index into result list.
      var rect = RectGetter.getRectFromKey(listViewKey);
      var _items = <int>[];
      _keys.forEach((index, key) {
        var itemRect = RectGetter.getRectFromKey(key);
        if (itemRect != null && !(itemRect.top > rect.bottom || itemRect.bottom < rect.top)) _items.add(index);
      });

      /// so all visible item's index are in this _items.
      return _items;
    }

    return new Scaffold(
      appBar: new AppBar(
        title: new Text(widget.title),
      ),
      body: NotificationListener<ScrollUpdateNotification>(
        onNotification: (notification) {
          /// print all visible item's index when scroll updated.
          print(getVisible());
          return true;
        },
        child: listView,
      ),
    );
  }
}

0 个答案:

没有答案