有没有办法自动滚动到 ListView.builder 中的元素？

Question

My goal is to scroll to the correct person when I tap the marker in GoogleMaps. Each marker has already saved a reference to the respective index in the list, but i don't know how I can make the list scroll by itself. Thanks for any help :)

Answer 1

You can assign a GlobalKey to the item you want to scroll to and make use of ScrollPosition.ensureVisible .

GlobalKey

You need the global key in order to access the RenderObject of your widget.
You will need to either store this global key as a variable in your StatefulWidget (preferrably).

ScrollController

You will also need to store a scroll controller in order to scroll to the position of your list view.

---

Here is how you would do it in the State of your widget:

final itemKey = GlobalKey();
final scrollController = ScrollController();

@override
void dispose() {
  scrollController.dispose();
  super.dispose();
}

@override
Widget build(BuildContext context) {
  // Return your widget tree in here.
  // I am only showing the ListView section.
  ...
  ListView(
    ...,
    controller: scrollController,
    // You can also use a builder list view or w/e else.
    // You only need to supply the GlobalKey to exactly one item.
    children: <Widget>[
       SomeWidget(
         key: itemKey,
         ...,
       ),
    ],
  )
  ...
}

Now, you will be able to scroll to your selected item:

scrollController.position.ensureVisible(
  itemKey.currentContext.findRenderObject()!,
  alignment: 0.5, // How far into view the item should be scrolled (between 0 and 1).
  duration: const Duration(seconds: 1),
);

Answer 2

You can also use Scrollable widget to scroll to specific widget:

Scrollable.ensureVisible(
  itemKey.currentContext,
  duration: const Duration(milliseconds: 500)
);

itemKey is a GlobalKey which is assigned to key property of a widget