将 PageView 与 Bloc 结合使用以编程方式 'swipe' 页面。阻止 bloc builder 在某些州上建设？

Question

我已经构建了一个 PageView 并希望使用 Bloc.

以编程方式控制页面滑动

我正在使用 PageController 并监听我的集团的 ShowPage 状态。然后调用 pageController.animateTo 将 PageView 动画化到所需的页面。

bloc 构建器构建 PageView。

我怀疑我遇到的问题是由 BlocBuilder 在每次状态更改时构建一个新的 PageView 从而否定 pageController.animateTo.

引起的

我的问题首先是......对于某些状态，BlockBuilder 是否可以被阻止 firing/building（所以它不会 'overwrite' 我的 pageController 改变）。要么有没有更好（正确）的方法来使用 bloc 实现 PageView？

我已经将屏幕代码复制到下面的基本肘部以供参考。

    class _TestScreenState extends State<TestScreen> {
  final PageController _pageController = PageController(initialPage: 4);
  double page = 0;

  @override
  Widget build(BuildContext context) {
    return BlocConsumer<TestCubit, TestState>(listener: (context, state) async {
      if (state is DeviceLogsInitial) {
        await _animateTo(3);
      }
      if (state is ShowPage) {
        await _animateTo(state.page);
      }
    }, builder: (context, state) {
     // _log.info('Building dialog : page ${_pageController.page}');
      return Scaffold(
        appBar: AppBar(
          title: const Text('Test'),// ${_pageController.page}'),
          actions: [
            TextButton(
                onPressed: () {
                  page = _nextPage(page);
                  BlocProvider.of<TestCubit>(context).animate(page);
                },
                child: const Text('swipe'))
          ],
        ),
        body: PageView(
          physics: const NeverScrollableScrollPhysics(),
          controller: _pageController,
          children: const [
            Page0(),
            Page1(),
            Page2(),
            Page3(),
          ],
        ),
      );
    });
  }

  double _nextPage(double page) {
    if (page > 3) {
      page = 0;
    } else {
      page = page + 1;
    }
    return page;
  }

  Future<void> _animateTo(double _page) async {
    _pageController.animateTo(
      _page,
      duration: const Duration(milliseconds: 400),
      curve: Curves.easeInOut,
    );
  }

class TestCubit extends Cubit<TestState> {
  TestCubit() : super(TestInitial());

  Future<void> animate(double page) async {
    emit(ShowPage(page));
  }
}

Answer 1

这只是使用错误的 PageController 方法在页面之间制作动画。

您应该调用的方法是 pageController.animateToPage 而不是 pageController.animateTo。

如果您不需要动画，您也可以使用 jumpToPage（而不是 jumpTo，这会导致类似的问题）。

将 PageView 与 Bloc 结合使用以编程方式 'swipe' 页面。阻止 bloc builder 在某些州上建设？

Using PageView with Bloc to programmatically 'swipe' pages. Prevent the bloc builder from building on certain states?

flutter

bloc

flutter-pageview

cubit