当添加新项目时,FlutterListView.builder重置滚动位置

ngynwnxp  于 2023-06-24  发布在  Flutter
关注(0)|答案(1)|浏览(146)

我正在开发一个Flutter应用程序,它使用**ListView.builder来显示容器列表。我已经实现了分页,当用户到达当前列表的末尾时,新的容器被提取并添加到列表中。但是,每次添加新容器时,滚动位置都会重置到列表的顶部,这不是所需的行为。
我已按照建议使用
AutomaticKeepAliveClientMixin,并将ListView.builder设置为true**,但问题仍然存在。下面是我的代码示例:

class ViewScreen extends StatefulWidget {
    const ViewScreen({super.key});
    @override
    State<ViewScreen> createState() => ViewScreenState();
}

class ViewScreenState extends State<ViewScreen> with AutomaticKeepAliveClientMixin {
  static final List<Widget> containers = [];
  final ScrollController _scrollController = ScrollController();
  List<Map<String,dynamic>> previousCards = [ //I have used it as a dummy database in real I will request an API that will return some data in it that is used in the container that is displayed];

  @override
  void initState() {
    super.initState();
    loadContainers();
    _scrollController.addListener(() {
      if (_scrollController.position.pixels == _scrollController.position.maxScrollExtent) {
        // User has reached the end of the list, trigger "load more" action
        loadContainers();
        _addAllPreviousCards();
      }
    });
  }

  void loadContainers() async {
    previousCards.clear();
    // call the API again to fetch more containers
    // starting from containers.length
    if(containers.length < allContainers.length) {
      for (int i = containers.length; i < containers.length + 6; i++) {
        previousCards.add(allContainers[i]);
      }
    }
  }

  void _addAllPreviousCards() async{
    for(int i = 0;i<previousCards.length;i++) {
      setState(() {
        containers.add(
          MyContainer(
            text: previousCards[i]['request'][text],
          ),
        );
      });
    }
  }

  void dispose() {
    _scrollController.dispose();
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    Widget content =Column(
        crossAxisAlignment: CrossAxisAlignment.start,
        children: [
          const SizedBox(height: 20),
          Expanded(
            flex: 1,
            child: ListView.builder(
              key: UniqueKey(),
              controller: _scrollController,
              itemCount: containers.length ,
              itemBuilder: (BuildContext context, int index) {
                  return containers[index];
              }
            )
          ),
        ],
      );
   return MaterialApp(
      debugShowCheckedModeBanner: false,
      home: Scaffold(
        body: SafeArea(
          child: Container(
            color:const Color.fromRGBO(255, 255, 255, 1),
            child: Padding(
              padding: const EdgeInsets.only(left: 10, right: 10),
              child: content
            ),
          ),
        )
      )
    );
  }
  @override
  bool get wantKeepAlive => true;
}

我在实现中是否遗漏了什么?当向**ListView.builder**添加新项目时,是否有其他方法保留滚动位置?任何帮助将不胜感激。谢谢你。

ni65a41a

ni65a41a1#

我用它来分页调用API它不会自动滚动。
Copyright © 2018 - 2019 www. jsjsjsjsjsjsjsjsjsjsjsjsjsjsjsjsjsjsjsjsjsjsjsjsjsjsjsjsjsjsjsjsjsjsjsjsjsjsjsjsjsjsjsjsjsjsjsjsjsjsjsjsjsjsjsjsjsjsjsjsjsjsjsjsjsjsjsjsjsjsjsjsjsjsjsjsjsjsjsjsjsjsjsjsjsjsjsjsjsjsjsjsjsjsjsjsjsjsjsjsjsjsjsjsjsjsjsjsjsjsjsjsjsjsjsjsjsj setState();});

相关问题