添加新页面后跳转到 PageView.builder 中的新页面似乎无法按预期工作 [Flutter]答案

【问题标题】：Jumping to a new page in PageView.builder after the additon of a new page doesn't seem to work as expected [Flutter]添加新页面后跳转到 PageView.builder 中的新页面似乎无法按预期工作 [Flutter]
【发布时间】：2020-04-28 12:58:21
【问题描述】：

我有一个简单的布局，它由一个包含多个页面的 PageView.builder 小部件组成。每个页面的内容都很简单，它们包含一个 Container 和一个 Text 小部件。

cards 是 String 类型的 List 并且 Pageview.builder 小部件具有 itemCount 这是基于此列表的长度。每一页中Text的值都是用这个List赋值的。

List<String> cards = [];

现在，每当我向 cards 列表添加新值时，都会使用一个变量 newPage 来存储添加该元素后列表中的最后一个索引位置。完成此操作后，将调用 setState(() {});，以便 UI 和 PageView 更新以反映列表中所做的更改。

PageView 小部件确实反映了更改，并且确实添加了一个新页面。但是，当我尝试在调用 setState 后立即跳转到新添加的页面时，就会出现问题。该错误表明 jumpToPage 尝试使用的索引值超出了 PageView 的范围

    cards.add("New card");
    newPage = cards.length - 1;
    setState(() {});
    card_PageController.jumpToPage(newPage);

所以，在试图弄清楚一些事情之后，我在 setState 之后添加了一个 Timer，以便框架有一些时间来正确更新 UI 元素。我在 Timer 函数中使用了一个 50 毫秒的小值，并在计时器结束后跳转到新页面。

    cards.add("New card");
    newPage = cards.length - 1;
    setState(() {});
    Timer(Duration(milliseconds: 50), () {
      card_PageController.jumpToPage(newPage);
    })

Timer的添加似乎解决了问题，添加后没有错误。但是，我不确定这是否是解决此问题的正确方法。

我想知道为什么会发生这种情况，因为不应该在 setState 工作之后直接调用 jumpToPage 而不使用 Timer？

另外，setState 实际上是否需要一些时间来完成更新 UI，即使它不是异步的，并且由于这个原因，引用的索引是无效的？是否可以以更好的方式解决这个问题？

【问题讨论】：

你能分享更多你的代码吗？我了解您希望对您的解释进行彻底的解释，但有时少即是多，尽管主要了解您的问题，但我认为看到您的代码范围更大且描述更少，我们会受益。

标签： flutter dart flutter-layout

【解决方案1】：

从您共享的代码中，我无法检测到问题。特别是因为我已经复制了您所说的想要实现的目标，并且它可以正常工作。看看下面的代码：

class PageCards extends StatefulWidget {
  @override
  _PageCardsState createState() => _PageCardsState();
}

class _PageCardsState extends State<PageCards> {
  PageController _pageController = PageController();
  List<String> cards = [
    'page 0',
    'page 1',
    'page 2',
  ];

  @override
  Widget build(BuildContext context) {
    return Column(
      children: <Widget>[
        Expanded(
          child: PageView.builder(
            controller: _pageController,
            itemCount: cards.length,
            itemBuilder: (context, index){
              return Center(
                child: Text(cards[index]),
              );
            }
          ),
        ),
        RaisedButton(
          child: Text('Add page'),
          onPressed: () => addCard(),
        ),
      ],
    );
  }

  void addCard(){
    setState(() {
      cards.add('page ${cards.length}');
    });
    _pageController.jumpToPage(cards.length - 1);
  }
}

【讨论】：