如何在滑动时在 PageView 中加载新数据

Posted 2023-04-19

【中文标题】如何在滑动时在 PageView 中加载新数据

【英文标题】：How to load new data in PageView on swipe

【发布时间】：2021-07-02 07:10:57

【问题描述】：

我从服务器获取数据并通过 listView - 小部件和网页浏览将其呈现给用户， 目标是加载假设 20 个问题，在列表视图中显示 3 个并向右滑动以加载下一个 3，依此类推..

 int addToIndex=0;

  List<QuestionViewV1> questions = []; //Here I load relevant data from getData method...

  @override
  void initState() 
    _getData(); 
  
       
                   ...child: PageView.builder(
                        controller: _pageController,
                        onPageChanged: _onPageChanged,
                        itemCount: questions.length, 
                        itemBuilder: (BuildContext context, int index) 
                          return _pageView(addToIndex);
                        ,
                      ),

这里我返回 Widget 巫婆代表页面和列表视图...

 Widget _pageView(addToIndex) 
    return Column(
      children: [
        Expanded(
          child: Padding(
            padding: const EdgeInsets.only(top: 15.0),
            child: Card(
              shape: RoundedRectangleBorder(
                  borderRadius: BorderRadius.all(Radius.circular(10))),
              elevation: 4,
              // margin: EdgeInsets.all(15.0),
              child: ListView.builder(
                itemBuilder: (BuildContext ctx, int index) 
                  return listItem(
                      ctx,
                      index,
                      "User " + questions[index+addToIndex].user.userName,
                      _timeAgo(index+addToIndex),
                       questions[index+addToIndex].id, 
                      questionTitle:
                      questions[index+addToIndex].title); 
                ,
                itemCount: 3,
              ),
            ),
          ),
        ),
      ],
    );
  

已编辑：这是 _getData()：

  _getData() async 
    ResourceFetchingAuthority _resourceFetchingAuthority =
        ResourceFetchingAuthority(
            configuration: ResourceFetchingConfiguration(

                maxReturnedResourcesForFirstPage: 12,
...     



    ResourceFetchingResult unansweredQuestionsResult =
        await _resourceFetchingAuthority.fetchResources();

    /*   List<QuestionViewV1>*/
    questions = unansweredQuestionsResult.resources.cast<QuestionViewV1>();




 _onPageChanged(int index) 
 setState(() 
     addToIndex=addToIndex+3;
);

所以在给定的示例中，我将在列表视图中每页得到 3 个问题，但每个其他页面都会有相同的问题集，我需要在滑动时加载 3 个新问题...（获取的问题数量在 getData 方法中定义.(12) )

【参考方案1】：

_getData() 应该在 _onPageChanged 中调用 或者变成这样

 PageView.builder(
        controller: _pageController,
        onPageChanged: _onPageChanged,
        itemCount: questions.length, 
        itemBuilder: (BuildContext context, int index) 
         return FutureBuilder(
            future: _getData(),
            builder: (ctx,snap)
              if(snap.hasData)
                return _pageView(3);
              else if(snap.connectionState == ConnectionState.waiting)
                 return Center(child:CircularProgressIndicator());
              
            ,
          );
      ,
     )

【讨论】：

我将 _getData() 添加到问题中。“maxReturnedResourcesForFirstPage: 12”返回 12 个问题到列表 questions = []; ，但是在每次滑动页面时，我都会从列表中获得前 3 个（相同）问题，我需要以某种方式更改该列表的索引？

当你多次调用 getData() 时，它总是返回相同的值？

是的，是的，因为它基本上用给定的数字数据（不同的问题）填充 List 让我们说 12 ，所以在 _pageView(3);我将获得包含 3 个不同问题的页面，如果我 _pageView(12) 将得到 12 个不同的问题，但想法是，页面有 3 个问题，在 pagevewer 内部并在滑动时加载 3 个新问题（目前它加载 3 个相同的问题 co's索引没有改变）对不起，如果我不清楚。

我想我需要为索引使用一些“持久”状态，所以当我滑动时，索引会继续原来的位置......

您可以获取所有问题并将它们拆分为您想要显示的页面数您有 20 个问题您只想显示每页 3 个问题所以您总共有 7 页 _pageView 获取当前页面和所有问题并计算将显示的问题范围