Flutter 动画在所有元素下方重叠显示错误解决方法

您可以在 SideMenu 组件中使用 Stack 来放置您的动画和列表项。将 Positioned 放在 Column 之外，以便动画显示在其他所有元素下方。

SideMenu(
  background: Global.home_currentcolor,
  key: _sideMenuKey,
  menu: Stack(
    children: [
      Column(
        mainAxisAlignment: MainAxisAlignment.center,
        crossAxisAlignment: CrossAxisAlignment.start,
        children: [
          Padding(
            padding: const EdgeInsets.only(left: 16.0),
            child: Column(
              crossAxisAlignment: CrossAxisAlignment.start,
              children: [
                TextButton(
                  onPressed: () => Global().getrecently(context),
                  child: Text(
                    shijian(),
                    style: TextStyle(color: Colors.white),
                  ),
                ),
                SizedBox(height: 20.0),
              ],
            ),
          ),
          ListTile(
            leading: const Icon(Icons.cached, size: 20.0, color: Colors.white),
            title: Text(
              '查看成绩',
              style: TextStyle(color: Colors.white, fontSize: 20, fontWeight: FontWeight.bold),
            ),
            onTap: () => Navigator.of(context).push(
              MaterialPageRoute(
                builder: (context) => scorepage(),
              ),
            ),
          ),
          ListTile(
              leading: const Icon(Icons.score_outlined, size: 20.0, color: Colors.white),
              title: Text(
                'chatgpt',
                style: TextStyle(color: Colors.white, fontSize: 20, fontWeight: FontWeight.bold),
              ),
              onTap: () {
                Navigator.of(context).pop(); //关闭侧边栏

                Navigator.push(
                    context,
                    MaterialPageRoute(
                        builder: (context) => chat_gpt()));
              }),
          ListTile(
            leading: const Icon(Icons.book_online, size: 20.0, color: Colors.white),
            title: Text(
              '一键评教',
              style: TextStyle(color: Colors.white, fontSize: 20, fontWeight: FontWeight.bold),
            ),
            onTap: () {
              Navigator.of(context).pop(); //关闭侧边栏
              Global()
                  .No_perception_login()
                  .then((value) => null);
              Navigator.push(
                  context,
                  MaterialPageRoute(
                      builder: (context) => pingjiao()));
            },
          ),
          ListTile(
            leading: const Icon(Icons.book_online, size: 20.0, color: Colors.white),
            title: Text(
              '请假历史',
              style: TextStyle(color: Colors.white, fontSize: 20, fontWeight: FontWeight.bold),
            ),
            onTap: () {
              Navigator.of(context).pop(); //关闭侧边栏
              Global()
                  .No_perception_login()
                  .then((value) => null);
              Navigator.push(
                  context,
                  MaterialPageRoute(
                      builder: (context) => qingjia()));
            },
          ),
          ListTile(
            leading: const Icon(Icons.colorize, size: 20.0, color: Colors.white),
            title: Text(
              '调个色',
              style: TextStyle(color: Colors.white, fontSize: 20, fontWeight: FontWeight.bold),
            ),
            onTap: () {
              showDialog(
                  context: context,
                  builder: (context) {
                    return MaterialApp(
                        theme: ThemeData.light(),
                        darkTheme: ThemeData.dark(),
                        home: AlertDialog(
                          title: Text('选择当前页颜色'),
                          content: SingleChildScrollView(
                            child: ColorPicker(
                              pickerColor: Global.home_currentcolor,
                              onColorChanged: changeColor,
                              colorPickerWidth: 300.0,
                              pickerAreaHeightPercent: 0.7,
                              enableAlpha: false,
                              displayThumbColor: true,
                              showLabel: true,
                              paletteType: PaletteType.hsv,
                              pickerAreaBorderRadius: const BorderRadius.only(
                                topLeft: const Radius.circular(2.0),
                                topRight: const Radius.circular(2.0),
                              ),
                            ),
                          ),
                          actions: <Widget>[
                            TextButton(
                              child: const Text('确定'),
                              onPressed: () async {
                                setState(() => Global.home_currentcolor = Global.home_pickcolor);
                                getApplicationDocumentsDirectory()
                                    .then((value) {
                                  File file = File(value.path + '/color.txt');
                                  //判断文件是否存在
                                  if (file.existsSync()) {
                                    //存在则写入
                                    file.writeAsString(Global.home_currentcolor.value.toString());
                                  } else {
                                    //不存在则创建文件并写入
                                    file.createSync();
                                    file.writeAsString(Global.home_currentcolor.value.toString());
                                  }
                                });
                                Navigator.of(context).pop();
                              },
                            ),
                          ],
                        ));
                  });
            },
          ),
          ListTile(
              leading: const Icon(Icons.score_outlined, size: 20.0, color: Colors.white),
              title: Text(
                '查看学习通已批完的考试但未发布的成绩',
                style: TextStyle(color: Colors.white, fontSize: 20, fontWeight: FontWeight.bold),
              ),
              onTap: () {
                Navigator.of(context).pop(); //关闭侧边栏

                Navigator.push(
                    context,
                    MaterialPageRoute(
                        builder: (context) => chaoxinglogin()));
              }),
          ListTile(
            leading: const Icon(Icons.cached, size: 20.0, color: Colors.white),
            title: Text(
              '重新登入',
              style: TextStyle(color: Colors.white, fontSize: 20, fontWeight: FontWeight.bold),
            ),
            onTap: () {
              deleteFile();
              AchievementView(context,
                  title: '成功!',
                  subTitle: '已清除课程和成绩缓存，请退出app重新登录',
                  //onTab: _onTabAchievement,
                  icon: Icon(
                    Icons.insert_emoticon,
                    color: Colors.white,
                  ),
                  //typeAnimationContent: AnimationTypeAchievement.fadeSlideToUp,
                  //borderRadius: 5.0,
                  color: Colors.green,
                  //textStyleTitle: TextStyle(),
                  //textStyleSubTitle: TextStyle(),
                  //alignment: Alignment.topCenter,
                  duration: Duration(seconds: 3),
                  isCircle: true, listener: (status) {
                print(status);
              })
                ..show();
            },
          ),
          ListTile(
            leading: const Icon(Icons.settings, size: 20.0, color: Colors.white),
            title: Text(
              '关于&设置',
              style: TextStyle(color: Colors.white, fontSize: 20, fontWeight: FontWeight.bold),
            ),
            onTap: () {
              Navigator.push(
                context,
                MaterialPageRoute(
                    builder: (context) => about()),
              );
            },
          ),
        ],
      ),
      Positioned(
        top: 0,
        child: Container(
          //缩小0.5倍
          child: RiveAnimation.asset(
            'assets/cat.riv',
            animations: ['Sulamine'],
            controllers: [_controller3],
          ),
        ),
      ),
    ],
  ),
)

这将确保您的动画显示在 SideMenu 中的其他所有元素下方。

其他重要提示：

• 确保 RiveAnimation.asset() 方法中指定的动画名称与您的 Rive 文件中的动画名称相匹配。
• 确保您在代码中正确地实例化了 _controller3 控制器，并且它与您的动画交互。
• 如果您仍然遇到问题，请检查您的 Rive 文件以确保它已正确设置并没有任何错误。

希望这可以帮助您解决动画重叠的问题！