Question

我需要什么：

我想按某个索引滚动列表，我该怎么做。

我所知道的：

selectedMedications应该从n个索引开始，但是如何滚动到任何索引？

Answer 1

ScrollablePositionedList可以用于此目的。 https://github.com/google/flutter.widgets/tree/master/lib/src/scrollable_positioned_list

Pub link - https://pub.dev/packages/flutter_widgets

final ItemScrollController itemScrollController = ItemScrollController();
final ItemPositionsListener itemPositionListener = ItemPositionsListener.create();

ScrollablePositionedList.builder(
  itemCount: 500,
  itemBuilder: (context, index) => Text('Item $index'),
  itemScrollController: itemScrollController,
  itemPositionListener: itemPositionListener,
);

然后可以使用以下命令滚动到特定项目：

itemScrollController.scrollTo(
  index: 150,
  duration: Duration(seconds: 2),
  curve: Curves.easeInOutCubic);

Answer 2

不幸的是，ListView没有对scrollToIndex（）函数的内置方法。您必须开发自己的方法来测量animateTo()或jumpTo()的元素偏移量，或者可以搜索这些建议的解决方案/插件或其他类似Flutter: Scrolling to a widget in ListView的帖子

（自2017年以来，flutter/issues/12319讨论了一般的scrollToIndex问题，但目前尚无计划）

但是有另一种ListView确实支持scrollToIndex（如Slashbin所述）：

ScrollablePositionedList
- scrollable_positioned_list
- 依赖性：flutter_widgets

您可以像设置ListView一样进行设置，并且工作原理相同，不同之处在于您现在可以访问执行以下操作的ItemScrollController：

jumpTo({index, alignment})
scrollTo({index, alignment, duration, curve})

简化示例：

ItemScrollController _scrollController = ItemScrollController();

ScrollablePositionedList.builder(
  itemScrollController: _scrollController,
  itemCount: _myList.length,
  itemBuilder: (context, index) {
    return _myList[index];
  },
)

_scrollController.scrollTo(index: 150, duration: Duration(seconds: 1));

（请注意，该库是由Google开发的，而不是由Flutter核心团队开发的。）

Answer 3

找到要点，其有效要点网址为https://gist.github.com/debuggerx01/b8ef756ee02b3eb82ec3702f14ba94e6

此要点正在使用一个计算矩形大小的软件包。 https://pub.dartlang.org/packages/rect_getter

Answer 4

使用scroll_to_index lib，这里的滚动将始终按照下面的硬编码进行到第六位置

dependencies:
    scroll_to_index: ^1.0.6

代码段：

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

  final String title;

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

class _MyHomePageState extends State<MyHomePage> {
  final scrollDirection = Axis.vertical;

  AutoScrollController controller;
  List<List<int>> randomList;

  @override
  void initState() {
    super.initState();
    controller = AutoScrollController(
        viewportBoundaryGetter: () =>
            Rect.fromLTRB(0, 0, 0, MediaQuery.of(context).padding.bottom),
        axis: scrollDirection);
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(widget.title),
      ),
      body: ListView(
        scrollDirection: scrollDirection,
        controller: controller,
        children: <Widget>[
          ...List.generate(20, (index) {
            return AutoScrollTag(
              key: ValueKey(index),
              controller: controller,
              index: index,
              child: Container(
                height: 100,
                color: Colors.red,
                margin: EdgeInsets.all(10),
                child: Center(child: Text('index: $index')),
              ),
              highlightColor: Colors.black.withOpacity(0.1),
            );
          }),
        ],
      ),
      floatingActionButton: FloatingActionButton(
        onPressed: _scrollToIndex,
        tooltip: 'Increment',
        child: Icon(Icons.add),
      ),
    );
  }
  // Scroll listview to the sixth item of list, scrollling is dependent on this number
  Future _scrollToIndex() async {
    await controller.scrollToIndex(6, preferPosition: AutoScrollPosition.begin);
  }
}

输出：

Answer 5

如果您知道列表视图项的大小，例如，滚动到首选索引很简单：

var index = 15;
var widthOfItem =
176; //in dp. width needed for horizontallistView;
var heightOfItem =
200; //in dp. height need for vertical listView;
listViewScrollController.jumpTo(index * widthOfItem.toDouble());

或

listViewScrollController.animateTo(
index * widthOfItem.toDouble(),
duration: Duration(milliseconds: 500),
curve: Curves.ease);

颤振ListView滚动到索引不可用

5 个答案: