Flutter的SharedAxisTransition不工作

aelbi1ox  于 2023-02-20  发布在  Flutter
关注(0)|答案(1)|浏览(158)

我尝试在两个选项卡之间实现Shared Axis Transition
bottomNavigationBar被点击时,selectedIndex从0变为1,反之亦然。在这个变化过程中,转换应该是动画的。我的代码没有任何错误,但是没有动画发生。
谢谢你的建议。
谢谢。

body: PageTransitionSwitcher(
        duration: const Duration(milliseconds: 500),
        transitionBuilder: (Widget child, Animation<double> primaryAnimation,
            Animation<double> secondaryAnimation) {
          return SharedAxisTransition(
              animation: primaryAnimation,
              secondaryAnimation: secondaryAnimation,
              transitionType: SharedAxisTransitionType.horizontal,
              child: child);
        },
        child: selectedIndex == 0
            ? AnimationLimiter(
                child: AnimatedList(
                  key: _key,
                  initialItemCount: db.dailyList.length,
                  itemBuilder: (context, index, animation) {
                    return AnimationConfiguration.staggeredList(
                      position: index,
                      duration: const Duration(milliseconds: 375),
                      child: SlideAnimation(
                        verticalOffset: 50.0,
                        child: FadeInAnimation(
                          child: SizeTransition(
                            sizeFactor: animation,
                            child: Tile(
                              title: db.dailyList[index][0],
                              goalAchieved: db.dailyList[index][1],
                              onChanged: (value) =>
                                  {checkBoxChanged(value, index)},
                              deleteFunction: (context) => deleteGoal(index),
                            ),
                          ),
                        ),
                      ),
                    );
                  },
                ),
              )
            : AnimationLimiter(
                child: ListView.builder(
                  itemCount: dbAchieved.dailyAchievedList.length,
                  itemBuilder: (context, index) {
                    return AchievedTile(
                      title: dbAchieved.dailyAchievedList[index][0],
                      deleteFunction: (context) => deleteAchievedGoal(index),
                    );
                  },
                ),
              ),
      ),
      bottomNavigationBar: BottomNavigationBar(
        backgroundColor: Theme.of(context).backgroundColor,
        unselectedItemColor: Colors.black.withOpacity(0.7),
        selectedItemColor: Colors.black,
        currentIndex: selectedIndex,
        onTap: (index) => setState(() {
          selectedIndex = index;
        }),
        items: const [
          BottomNavigationBarItem(
              icon: Icon(Icons.fact_check_outlined), label: 'Carpe Diem'),
          BottomNavigationBarItem(icon: Icon(Icons.done), label: 'Achieved')
        ],
      ),
lyr7nygr

lyr7nygr1#

事实证明,我只需要为每个AnimationLimiter声明一个键,它就可以工作了。我只添加了以下内容:
一个月一个月一个月一个月一个月
然后将其添加到AnimationLimiter中
x1米2英寸x1米3英寸

相关问题