Flutter ListView 在每次 setState() 调用时跳转到顶部

Question

I have a ListView of customers where the user is able to check/uncheck each customer to mark them as a 'favourite'. However, each time a ListItem is tapped, the ListView jumps back to the top of the screen.

How do I prevent this from happening? I only want the Checkbox to refresh, not the entire screen, and to prevent the screen from jumping to the top each time.

@override
Widget build(BuildContext context) {
  customers = getAllCustomers();

  return Scaffold(
     appBar: _getAppBar(),
     body: customers != null
          ? FutureBuilder(
              future: getFavouriteCustomers(), // contains IDs of favourite customers
              builder: (context, snapshot) {
                if (snapshot.connectionState == ConnectionState.done) {
                  if (snapshot.hasData) {
                    List<String> favouriteCustomersList = snapshot.data;

                    return ListView.builder(
                        itemCount: customers?.length ?? 0,
                        itemBuilder: (BuildContext context, int index) {
                          customer c = customers?.elementAt(index);

                          if (favouriteCustomersList.contains(c.id)) {
                            c.isSelected = true;
                          }

                          return ListTile(
                            title: Text(c.name),
                            trailing: Checkbox(
                                value: c.isFavourite,
                                onChanged: (newValue) {}),
                            onTap: () {
                              if (c.isSelected) {
                                setState(() {
                                  c.setFavourite(false);
                                });
                              } else {
                                setState(() {
                                  c.setFavourite(true);
                                }
                              }
                            },
                          );
                        });
                  }
                } else {
                  return CircularProgressIndicator();
                }
              })
          : Center(
              child: CircularProgressIndicator(),
            );
);

}

Answer 1

1. Ensure you are doing this in a StatefulWidget.

2. Create a ScrollController as field in the state class (not the widget class):

  _controller = ScrollController(keepScrollOffset: true);

This way the controller will be preserved in the state and not recreated on rebuilds.

3. Pass it to the builder as

  controller: _controller,

4. Remember to dispose the controller when the state is destroyed:

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

5. As Benno mentioned, ensure that all the way up the widget tree there are no widgets with keys being recreated on rebuilds: How to prevent Flutter app from scrolling to top after calling setState?

Answer 2

Not sure if you already found the answer, but I generally solve the problem by splitting your build methods by using two StatefulWidgets. What was going on here was, every time the setState() is called, the whole widget is rebuilt because the state was getting changed for your whole State class. That means the build method was getting called forcing scaffold to be recreated along with all the widget tree in it. Since the widget was rebuilt, it will assume it's original position which was offset 0. I would suggest to create another stateful widget for returning ListTile object. This will break the build method and action performed on each ListTile is performed within it's own build method. This won't force your Scaffold to be recreated.

I don't have your full code so can't suggest complete working solution but something like below may help.

class SomeStatefulWidget extends StatefulWidget {

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

class SomeStatefulWidgetState extends State<SomeStatefulWidget> {
@override
Widget build(BuildContext context) {
  customers = getAllCustomers();

  return Scaffold(
     appBar: _getAppBar(),
     body: customers != null
          ? FutureBuilder(
              future: getFavouriteCustomers(), // contains IDs of favourite customers
              builder: (context, snapshot) {
                if (snapshot.connectionState == ConnectionState.done) {
                  if (snapshot.hasData) {
                    List<String> favouriteCustomersList = snapshot.data;

                    return ListView.builder(
                        itemCount: customers?.length ?? 0,
                        itemBuilder: (BuildContext context, int index) {
                          customer c = customers?.elementAt(index);

                          if (favouriteCustomersList.contains(c.id)) {
                            c.isSelected = true;
                          }

                          return MyListTile(c);

                        });
                  }
                } else {
                  return CircularProgressIndicator();
                }
              })
          : Center(
              child: CircularProgressIndicator(),
            );
);
}


class MyListTile extends StatefulWidget {

  customer c;

  @override
  _MyListTileState createState(this.c) => _MyListTileState();

}

class _MyListTileState extends State<MyListTile> {

  @override
  Widget build(BuildContext context) {

    var c = widget.c;

    return ListTile(
      title: Text(c.name),
      trailing: Checkbox(
          value: c.isFavourite,
          onChanged: (newValue) {}),
      onTap: () {
        if (c.isSelected) {
          setState(() {
            c.setFavourite(false);
          });
        } else {
          setState(() {
            c.setFavourite(true);
          }
        }
      },
    );
  }
}

By splitting the widget in to two, setState() will now only build the MyListTile object by calling build method of MyListTileState class. You effectively wrapped ListTile in to your own stateful class named MyListTile .

I hope this works for you. As said, I don't have your full code hence made some wrapper classes to make this example clear. Also, I haven't compiled this code and typed everything here so there may be some compile time error. But this explains the concept, reason of jumping to top and solution.

Answer 3

Instead of using setState() to update the UI, you can try wrapping the listTile inside a StreamBuilder and provide it with a stream which sends data every time the checkbox is tapped. Once StreamBuilder receives data from the stream, it will update just the cell, and not the whole list, and eventually you will be able to avoid the top-scrolling of list.