Flutter 中的 Dots_Indicator PageView 中 CurrentIndex 未更新答案

【问题标题】：CurrentIndex is not updated in the Dots_Indicator PageView in flutterFlutter 中的 Dots_Indicator PageView 中 CurrentIndex 未更新
【发布时间】：2019-03-30 10:35:52
【问题描述】：

我一直在使用 PageView，并且我的页面视图工作正常。但是有一个，因为我使用了dots_indicator 0.0.4 来代表我现在所在的位置。我对是否该怎么做感到困惑。我的指标显示正常，但问题在于如何更新index in the position element to update the active dots。

我已经尝试了所有可能的方法来更新它，但是这让我很困惑。我想要的是：

当我点击按钮时，它应该改变元素的索引
当我滚动页面时，它应该更改索引

因为我已经尝试过这两种方法，比如创建一个名为 index 的变量，并在我们点击按钮时尝试更新它的值。但它没有更新值。

我不知道当我们滚动页面时我们应该如何更改值。

当我们点击按钮转到下一页时，我有一个changePage()，但DotsIndicator() 中的索引值没有更新。

代码：

class OnboardingPage extends StatelessWidget {
    final PageController controller = new PageController();
    var index = 0;

    final List<OnboardingPageItem> pages = [
       //I do have a onboarding page widget which is coming up fine
       //so this is not our concern
    ];

    PageView getPages(){
      return PageView(
        controller: this.controller,
        children: this.pages
      );
    }

    //this is a method which controls the button hit for changing the page
    changePage(BuildContext context) {
      //tried here to update the value of the index by assigning the value to it
      //index = this.controller.page.toInt()
      if (this.controller.page >= this.pages.length - 1) {
        Navigator.pushNamed(context, '/signin');
      }
      this.controller.nextPage(duration: Duration(milliseconds: 200), curve: Curves.easeIn);
    }

    @override
    Widget build(BuildContext context) {
      return Material(
       child: Stack(children: <Widget>[
         Positioned(
           left: 24, right: 24, top: 0, bottom: 80, child: this.getPages()),
         Positioned(
           child: DotsIndicator(
             numberOfDot: 3,
             position: this.index,
             dotColor: Theme.of(context).primaryColor.withOpacity(0.5),
             dotActiveSize: new Size(12.0, 12.0),
             dotActiveColor: Theme.of(context).primaryColor
           ),
           bottom: 100.0,
           left: 150.0,
           right: 150.0
         ),
         Positioned(
          child: TMButton(
            text: "Next",
            onPressed: () {changePage(context);},
          ),
          bottom: 24,
          left: 24,
          right: 24
         )
     ]));
   }
}

编辑

我尝试使用 this.controller.hasClients 在它变为 true 时进行更新，但对我来说没有任何效果。似乎它是 DotsIndicator 的静态参数。

position: this.controller.hasClients ? this.controller.page.toInt() : this.controller.initialPage;

currentIndex 保留在初始页面，完全没有变化。

任何帮助将不胜感激。谢谢:)

【问题讨论】：

标签： flutter viewpagerindicator pageviews

【解决方案1】：

一旦您的小部件中有一个可修改的状态 (index)，您就不能使用StatelessWidget，而是使用相应的State 创建StatefulWidget。并且在修改 index 时将其包装在 setState(() { index = ... ; }); 中，这样可以确保在状态更改时调用您的 build 方法。

没有隐藏的魔法可以监控你的状态。只有当您调用 setState 或 StatefulWidget 时，您的 Widget 才会重建。

【讨论】：