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

Question

我有一个客户列表视图，用户可以在其中选中/取消选中每个客户以将他们标记为“收藏夹”。但是，每次点击 ListItem 时，ListView 都会跳回到屏幕顶部。

我如何防止这种情况发生？我只希望 Checkbox 刷新，而不是整个屏幕，并防止屏幕每次都跳到顶部。

@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. 确保您在 StatefulWidget 中执行此操作。

2. ScrollController在状态类（不是小部件类）中创建一个as 字段：

  _controller = ScrollController(keepScrollOffset: true);

这样，控制器将保留在状态中，并且不会在重建时重新创建。

3. 将其传递给构建器作为

  controller: _controller,

4. 请记住在状态销毁时处理控制器：

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

5. 正如 Benno 提到的，确保小部件树上一直没有在重建时重新创建带有键的小部件： How to Prevent Flutter app fromscroll to top after Calling setState?