Question

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

}

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

Answer 1

这就是我所做的。

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

如果您当前使用的是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
        }
      }
    }
  }

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

1 个答案: