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
         )
     ]));
   }
}

编辑

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

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

currentIndex保留到初始页面，并且完全没有变化。

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

Answer 1

在小部件中具有可更改的状态（index）时，不得使用StatelessWidget，而应使用相应的{ {1}}。并且在修改StatefulWidget时将其包装在State中，这可以确保在状态改变时将调用您的index方法。

没有隐藏的魔法可以监视您的状态。仅当您调用setState(() { index = ... ; });中的build时，窗口小部件才会重建。

颤抖的Dots_Indicator PageView中的CurrentIndex不会更新

1 个答案: