Блог

Я работал над просмотром страницы, и мой просмотр страницы работает нормально. Но он есть, поскольку я использовал 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 Остается на начальной странице и вообще не изменяется.

Будем признательны за любую помощь. Спасибо 🙂

как только у вас появится изменяемое состояние ( index ) в вашем виджете, вы должны не использовать StatelessWidget , а создать StatefulWidget с соответствующим State . И при изменении index переноса его в setState(() { index = ... ; }); это гарантирует, что ваш build метод будет отозван при изменении состояния.

Нет никакой скрытой магии, которая отслеживала бы ваше состояние. Ваш виджет будет перестроен, только если вы вызовете setState из StatefulWidget .