在flutter中的Dots_Indicator PageView中不更新CurrentIndex

Question

我一直在使用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
         )
     ]));
   }
}

EDITS

我已经尝试使用this.controller.hasClients更新为何时更改为true，但没有任何效果。好像它是DotsIndicator的静态参数。

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

currentIndex保留在初始页面，并且根本没有变化。

任何帮助，将不胜感激。谢谢 ：）

Answer 1

只要您的小部件中有可修改状态（index），就不能使用StatelessWidget，而是使用相应的StatefulWidget创建State。当修改index将其包裹在setState(() { index = ... ; });中时，这可以确保在状态发生变化时将调用build方法。

没有隐藏的魔法会监视你的状态。如果你调用setState的StatefulWidget，你的Widget将只会重建。