Flutter中使用PageTransitionSwitcher时如何保持每个页面的状态？答案

【问题标题】：How to keep the state of each page when using PageTransitionSwitcher in flutter?Flutter中使用PageTransitionSwitcher时如何保持每个页面的状态？
【发布时间】：2020-09-06 13:40:45
【问题描述】：

我正在尝试将animation 库添加到我的项目中，但我遇到了问题。之前的代码是这样的

  Widget _buildScaffold(BuildContext context) {
return Scaffold(
  body: PageView.builder(itemBuilder: (context,index)=>_pageList[index]),
  extendBody: true,
  bottomNavigationBar: Opacity(
    opacity: 0.98,
    child: BottomNavigationBar(
        type: BottomNavigationBarType.fixed,
        selectedItemColor: Theme.of(context).accentColor,
        currentIndex: index,
        onTap: (index) {
          setState(() {
            this.index = index;
          });
          // _pageController.jumpToPage(index);
        },
        items: _bottomList),
  ),
);

} 当我把PageView.builder改成PageTransitionSwitcher时，按照例子，child的值为_pageList[index]，动画可用，切换页面时状态丢失。当我尝试使用PageView作为孩子时，可以设置状态KeepAlive被保留，但动画消失（因为它被判断为同一个widget）

  Widget _buildScaffold(BuildContext context) {
return Scaffold(
  body: PageTransitionSwitcher(
    transitionBuilder: (
      Widget child,
      Animation<double> primaryAnimation,
      Animation<double> secondaryAnimation,
    ) {
      return FadeThroughTransition(
        animation: primaryAnimation,
        secondaryAnimation: secondaryAnimation,
        child: child,
      );
    },
    child: PageView.builder(itemBuilder: (_,index)=>_pageList[index]),
  ),
  extendBody: true,
  bottomNavigationBar: Opacity(
    opacity: 0.98,
    child: BottomNavigationBar(
        type: BottomNavigationBarType.fixed,
        selectedItemColor: Theme.of(context).accentColor,
        currentIndex: index,
        onTap: (index) {
          setState(() {
            this.index = index;
          });
          // _pageController.jumpToPage(index);
        },
        items: [
          BottomNavigationBarItem(
              icon: Icon(Icons.home), title: Text(I18n.of(context).home)),
          BottomNavigationBarItem(
              icon: Icon(
                CustomIcons.leaderboard,
              ),
              title: Text(I18n.of(context).rank)),
          BottomNavigationBarItem(
              icon: Icon(Icons.favorite),
              title: Text(I18n.of(context).quick_view)),
          BottomNavigationBarItem(
              icon: Icon(Icons.search),
              title: Text(I18n.of(context).search)),
          BottomNavigationBarItem(
              icon: Icon(Icons.settings),
              title: Text(I18n.of(context).setting)),
        ]),
  ),
);

}

那么，有没有办法同时保留动画和页面状态？

【问题讨论】：

标签： flutter flutter-animation

【解决方案1】：

这就是我所做的。

在您的有状态小部件中，如果您在页面中显示项目列表，您可以在要保留的列表前面添加静态变量，以便在切换页面时不会重新获取它。

如果您当前使用的是 FutureBuilder，我认为您必须改为使用它，因为您需要一个静态列表来引用。

  static List<YourObject> yourList = new List();


  @override
  void initState() {
    super.initState();
    //some async task to fetch data and populate yourList
    fetchData();
  }



  @override
  Widget build(BuildContext context) {
    if(yourList.length == 0){
      return CircularProgressIndicator();
    }else{
      return ListView.builder(){
        itemCount: yourList.length,
        itemBuilder: (BuildContext context, int index){
          ...yourcodehere
        }
      }
    }
  }

【讨论】：

【解决方案2】：

解决方案非常简单。
将以下内容添加到我的 ListView 对我有帮助。

键：PageStorageKey('customKeyName'),

在随机找到一篇关于GlobalKey()的文章后找到了解决方案，它可以用来保持/恢复一个小部件的状态。

【讨论】：