Question

我正在Flutter中使用Redux（并且我才刚刚开始学习两者）。我一直试图找出如何使用PageView的PageController在PageView的页面之间进行切换。

但是，每当我尝试使用PageController.jumpToPage（）函数时，都会出现一个异常，指出：

“在完成窗口小部件树的确定时，引发以下断言：锁定窗口小部件树时调用setState（）或markNeedsBuild（）。”

当我尝试在我的reducer中调用PageController.jumpToPage（）时，它确实导航到了页面浏览量内的页面；但是会引发异常。

我还尝试过在reducer中构建一个新的PageController，并只是将PageController的initial page属性设置为所需的页面，但这似乎无济于事。

我已经没有足够的想法来解决这个问题，所以我想在这里问。任何帮助将不胜感激。

我收集了一个快速示例来说明我要做什么：

import 'package:flutter/material.dart';
import 'package:redux/redux.dart';
import 'package:flutter_redux/flutter_redux.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  final store = Store<AppState>(appReducer,
      initialState: AppState.initial(), middleware: []);

  @override
  Widget build(BuildContext context) {
    return StoreProvider(
      store: store,
      child: MaterialApp(
        title: 'PageView Example With Redux',
        home: MyPageViewContainer(),
      ),
    );
  }
}

class AppState {
  final List<Widget> pageViewList;
  final PageController pageController;

  AppState({
    this.pageViewList,
    this.pageController,
  });

  factory AppState.initial() {
    return AppState(
      pageViewList: [
        PageOne(),
        PageTwo(),
      ],
      pageController: PageController(initialPage: 0),
    );
  }

  AppState copyWith({
    List<Widget> pageViewList,
    PageController pageController,
  }) {
    return AppState(
      pageViewList: pageViewList ?? this.pageViewList,
      pageController: pageController ?? this.pageController,
    );
  }
}

AppState appReducer(AppState state, action) {   

  if (action is NavigateToPageOneAction) {
      state.pageController.jumpToPage(0);
    return state;
  }
  else if (action is NavigateToPageTwoAction) {
    state.pageController.jumpToPage(1);
    return state;
  }
  else {
    return state;
  }      
}

class NavigateToPageOneAction {}

class NavigateToPageTwoAction {}

class MyPageView extends StatelessWidget {
  final List<Widget> pageViewList;
  final PageController pageController;
  final Function onPageChanged;

  MyPageView({
    this.pageViewList,
    this.pageController,
    this.onPageChanged,
  });

  @override
  Widget build(BuildContext context) {
    return PageView(
      controller: pageController,
      children: pageViewList,
      onPageChanged: onPageChanged,
    );
  }
}

class MyPageViewContainer extends StatelessWidget {
  MyPageViewContainer({Key key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return StoreConnector<AppState, _MyPageViewModel>(
      converter: (Store<AppState> store) => _MyPageViewModel.create(store),
      builder: (BuildContext context, _MyPageViewModel vm) {
        return MyPageView(
          pageViewList: vm.pageViewList,
          pageController: vm.pageController,
        );
      },
    );
  }
}

class _MyPageViewModel {
  final List<Widget> pageViewList;
  final PageController pageController;
  final Function onPageChanged;

  _MyPageViewModel({
    this.pageViewList,
    this.pageController,
    this.onPageChanged,
  });

  factory _MyPageViewModel.create(Store<AppState> store) {
    _onPageChanged() {}

    return _MyPageViewModel(
      pageViewList: store.state.pageViewList,
      pageController: store.state.pageController,
      onPageChanged: _onPageChanged(),
    );
  }
}

class PageOne extends StatelessWidget {
  PageOne();

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text("Page One"),
      ),
      backgroundColor: Colors.black,
      body: Column(),
      drawer: MyDrawer(),
    );
  }
}

class PageTwo extends StatelessWidget {
  PageTwo();

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text("Page Two"),
      ),
      backgroundColor: Colors.blue,
      body: Column(),
      drawer: MyDrawer(),
    );
  }
}

class MyDrawer extends StatelessWidget {
  MyDrawer({Key key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return StoreConnector<AppState, _MyDrawerViewModel>(
      converter: (Store<AppState> store) => _MyDrawerViewModel.create(store),
      builder: (BuildContext context, _MyDrawerViewModel vm) {
        return Drawer(
          child: ListView(
            children: <Widget>[
              Container(
                child: ListTile(
                  title: Text(vm.pageOneText),
                  onTap: vm.pageOneOnTap,
                ),
              ),
              Container(
                child: ListTile(
                  title: Text(vm.pageTwoText),
                  onTap: vm.pageTwoOnTap,
                ),
              ),
            ],
          ),
        );
      },
    );
  }
}

class _MyDrawerViewModel {
  final String pageOneText;
  final String pageTwoText;
  final Function pageOneOnTap;
  final Function pageTwoOnTap;

  _MyDrawerViewModel({
    this.pageOneText,
    this.pageTwoText,
    this.pageOneOnTap,
    this.pageTwoOnTap,
  });

  factory _MyDrawerViewModel.create(Store<AppState> store) {
    _goToPageOne() {

     store.dispatch(NavigateToPageOneAction());
    }

   _goToPageTwo() {

     store.dispatch(NavigateToPageTwoAction());
   }

    return _MyDrawerViewModel(
      pageOneText: "Page One",
      pageTwoText: "Page Two",
      pageOneOnTap: _goToPageOne,
      pageTwoOnTap: _goToPageTwo,
    );
  }
}

Answer 1

我似乎已经想出了解决问题的方法。我在这篇文章中看到了一个答案：Flutter: setState() or markNeedsBuild() called when widget tree was locked... during orientation change

在那篇文章中，在打开抽屉时在纵向和横向模式之间进行切换时，OP遇到相同的错误。该帖子中的答案建议在更改视图模式之前调用Navigator.pop（）（关闭抽屉）。

因此，我尝试了一下，然后在使用PageController的.jumpToPage方法之前，使用Navigator.pop（）关闭了我的抽屉。这似乎可行，并且允许我使用来自抽屉的onTap事件在PageView的页面之间导航，而不会引发“在完成小部件树的确定时抛出了以下断言：setState（）或锁定小部件树时调用的markNeedsBuild（） “例外。

我认为这意味着在打开抽屉时，小部件树将处于锁定状态。

希望这对某人有帮助，因为我花了一段时间才弄清楚。

Answer 2

@Blau

有时，您构建的任何小部件外部都发生了事件。例如（1）一个递增“全局计数器”的计时器，该计数器将在许多页面/小部件中显示（2）从套接字服务器发送的消息，在接收到此消息/事件时，用户可以在任何地方（任何页面/小部件），而您不知道在何处设置状态（或者小部件实际上不存在，因为用户不在该页面上）

我构建了2个示例，演示了如何使用Redux解决此类问题：

示例1 ：（当外部事件触发时，使用多线程计时器来“设置状态”小部件）

https://github.com/lhcdims/statemanagement01

示例2 ：（当外部事件触发时，使用Redux刷新小部件）

https://github.com/lhcdims/statemanagement02

演示屏幕截图：

如何使用Redux在Flutter中使用Pagview PageController

2 个答案: