Как обновить дочерний виджет (индикатор загрузки) текущим значением PageController?

Question

Я хотел бы анимировать LinearProgressIndicator, только если текущее значение PageController (или PageView) совпадает с его индексом в Row.

Как вы можете видеть на скриншотеУ меня есть PageView с рядом LinearProgressIndicator с.PageView управляется своим собственным PageController, и страницы переключаются, когда AnimationController достигает своего конца.

Я хотел бы достичьэффект, подобный этой идее , то есть только LoadingIndicator для текущей страницы должен быть анимирован.

Код

Ниже вы можете найти код верхнего виджета, т.е. PageView с нижним рядом LoadingIndicator с.

import 'package:flutter/material.dart';

class PageViewWithLoadingIndicators extends StatefulWidget {
  final List<String> imageUrls;
  final List<Widget> images;
  final Duration totalDuration;
  final Duration transitionDuration;
  final Curve animationCurve;

  const PageViewWithLoadingIndicators(
      {Key key,
      this.imageUrls,
      this.images,
      this.totalDuration = const Duration(seconds: 10),
      this.transitionDuration = const Duration(milliseconds: 700),
      this.animationCurve = Curves.easeInOut})
      : super(key: key);

  @override
  PageViewWithLoadingIndicatorsState createState() => PageViewWithLoadingIndicatorsState();
}

class PageViewWithLoadingIndicatorsState extends State<PageViewWithLoadingIndicators>
    with SingleTickerProviderStateMixin {
  Animation<double> loadingBarAnimation;
  AnimationController controller;
  PageController pageController;
  int count;
  int index;

  @override
  void initState() {
    super.initState();
    assert(widget.imageUrls.isNotEmpty || widget.images.isNotEmpty);

    count = widget.imageUrls.length;
    index = 0;
    controller = AnimationController(duration: widget.totalDuration ~/ count, vsync: this);
    pageController = PageController(initialPage: 0);

    loadingBarAnimation = Tween<double>(begin: 0.0, end: 1.0).animate(controller)
      ..addStatusListener((status) {
        if (status == AnimationStatus.completed) {
          controller.reset();
          setState(() {
            index++;
          });
          if (index == count) {
            setState(() {
              index = 0;
            });
          }
          pageController.animateToPage(index,
              curve: widget.animationCurve, duration: widget.transitionDuration);
        } else if (status == AnimationStatus.dismissed) {
          controller.forward();
        }
      });

    controller.forward();
  }

  @override
  void dispose() {
    controller.dispose();
    pageController.dispose();
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    return Stack(
      children: <Widget>[
        Container(
          child: PageView(
            children: widget.images != null
                ? widget.images
                : widget.imageUrls
                    .map<Widget>((f) => Image.network(
                          f,
                          fit: BoxFit.cover,
                        ))
                    .toList(),
            physics: NeverScrollableScrollPhysics(),
            controller: pageController,
          ),
        ),
        Positioned(
          bottom: 0,
          left: 0,
          right: 0,
          child: PageLoader(animation: loadingBarAnimation, count: count),
        )
      ],
    );
  }
}

class PageLoader extends AnimatedWidget {
  final int count;

  PageLoader({Key key, @required this.count, Animation<double> animation})
      : super(key: key, listenable: animation);

  @override
  Widget build(BuildContext context) {
    final Animation<double> animation = listenable;

    return Row(
        children: List.generate(
      count,
      (index) => SmallLoadingBar(animation, index),
    ));
  }
}

class SmallLoadingBar extends StatelessWidget {
  final int index;
  final Animation<double> value;

  SmallLoadingBar(this.value, this.index);

  @override
  Widget build(BuildContext context) {
    return Expanded(
      child: Container(
          margin: EdgeInsets.only(top: 10, bottom: 10, left: 5, right: 5),
          height: 5,
          width: double.infinity,
          decoration: BoxDecoration(color: Colors.white24),
          child: LinearProgressIndicator(
              backgroundColor: Colors.transparent,
              valueColor: AlwaysStoppedAnimation<Color>(Colors.white70),
              value: value.value)),
    );
  }
}

Вы можете использовать это просто:

  final List<String> images = [
    'https://i.imgur.com/F8PBP7P.jpg',
    'https://i.imgur.com/DtWaRhg.jpg',
    'https://i.imgur.com/GsRLPXM.jpg',
    'https://i.imgur.com/BMnhHaH.jpg',
    'https://i.imgur.com/qXvgwpw.jpg',
  ];

PageViewWithLoadingIndicators(imageUrls: images)

Каков наилучший подход здесь?Используя InheritedWidget или Stream для проверки индекса текущей страницы внутри контейнера LoadingIndicator?

Answer 1

Я хотел бы анимировать LinearProgressIndicator, только если текущее значение PageController (или PageView) совпадает с его индексом в строке.

Это просто сделать с вашим текущим кодом,Все, что вам нужно сделать, это передать индекс, который вы обновляете, в приемнике анимации.Прежде всего вы можете немного упростить код слушателя анимации:

setState(() {
    index++;
    if (index == count) {
       index = 0;
    }
});

Затем передать значение индекса через иерархию виджетов в LinearProgressIndicator, где вы будете его использовать:

// in PageViewWithLoadingIndicatorsState's build() method
child: PageLoader(animation: loadingBarAnimation, count: count, current: index),

ВSmallLoadingBar, вы можете использовать переданное значение для анимации только текущего индикатора загрузки:

class SmallLoadingBar extends StatelessWidget {
  final int index;
  final Animation<double> value;
  final int current;

  SmallLoadingBar(this.value, this.index, this.current);

  @override
  Widget build(BuildContext context) {
    return Expanded(
      child: Container(
          margin: EdgeInsets.only(top: 10, bottom: 10, left: 5, right: 5),
          height: 5,
          width: double.infinity,
          decoration: BoxDecoration(color: Colors.white24),
          child: LinearProgressIndicator(
              backgroundColor: Colors.transparent,
              valueColor: AlwaysStoppedAnimation<Color>(Colors.white70),
              value: _calculateState(index, current))),
    );
  }

  double _calculateState(int index, int current) {
    // this is the page at which we are so it needs to be animated
    if (index == current) {
      return value.value;
    } else if (index < current) {
      // this is behind the current indicator so was already animated
      return 1;
    } else {
      // this is after the current indicator so it wasn't yet animated
      return 0;
    }
  }
}

Конечно, чтобы действительно выполнить эту работу, вам нужно связать передаваемую вами анимацию с индикаторами с реальным изображением.время загрузки.Как это сделать, зависит от того, как вы планируете справиться с загрузкой изображений.