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

问题描述

我正在尝试将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 _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: (_,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)),]),);

}

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

解决方法

这就是我所做的。

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

如果您当前使用的是FutureBuilder，我认为您必须改为使用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
        }
      }
    }
  }