Flutter 颤振：使自定义底部栏在出现时向上滑动

我正在尝试设计一个音乐播放列表页面。到目前为止，我能够创建一个歌曲卡列表视图。当我点击任何歌曲时，会出现一个自定义的底部栏，音频开始播放。然而，我只是用布尔值保存一个状态，并根据它显示底部的条。相反，我希望它看起来像是向上滑动并到达该位置。比方说0.5秒后

我有一个自定义的导航栏类

class NavBar extends StatefulWidget

我在构建中使用这个类类似于：

return Column(
  children: [
    SizedBox(
      height: constraints.maxHeight * 0.5,
      hild: SlidingBanners(),
    ),
    Expanded(
      child: Lists(),
    ),
    NavBar()
  ],
);

---

如何制作这样的动画？

一个解决方案是使用

SnackBar

小部件。因为它是自动设置动画的，所以您不必担心手动设置底部栏的动画。您可以将音频播放器（底部栏）小部件插入到

SizedBox

的

child

底部栏通过以下方式显示：

ScaffoldMessenger.of（上下文）.showSnackBar（snackBar）

通过向下拖动或

ScaffoldMessenger.of（context.hideCurrentSnackBar（）

也许还有很多其他的解决办法，但是阅读你的问题，我希望这就是你想要的

return Center(
      child: ElevatedButton(
        onPressed: () {
          final snackBar = SnackBar(
            duration: Duration(days: 365),
            content: SizedBox(
              height: 100,
              //insert your audio player widget here
              child: Column(
                children: [
                  Text("YOUR AUDIOPLAYER WIDGET HERE"),
                  Text("Audio Controls Here"),
                  ElevatedButton(
                    onPressed: () {
                      ScaffoldMessenger.of(context).hideCurrentSnackBar();
                    },
                    child: Text("Audio Player Minimize"),
                  ),
                ],
              ),
            ),
          );
          ScaffoldMessenger.of(context).showSnackBar(snackBar);
        },
        child: Text('Open Audio Player'),
      ),
    );

使用SizeTransition小部件

“SizeTransition充当一个ClipRect，可以设置其宽度或宽度的动画
它的高度，取决于轴的值
轴上的子对象由axisAlignment指定。“

有状态小部件initState（）中的init动画控制器

确保您的有状态小部件使用SingleTickerProviderStateMixin

class _NavBarState extends State<NavBar>
with SingleTickerProviderStateMixin {
late AnimationController _animationController;

如果希望父控件控制动画，可以将_animationController从其父控件传递到NavBar小部件的构造函数中

或者，您可以使用AnimatedContainer小部件，并将其高度设置为0或100，具体取决于是否应显示导航。对于一些无法压缩到0高度的小部件来说，这是一个问题，但我不建议任何容器包含除文本以外的任何内容，这绝对不是理想的。您不应该在构建本身中调用.showSnackBar，因为在重建时它将显示多次。snackbar用于信息的简短弹出显示，而不是整个工具栏widget@BradenBagby谢谢你的反馈。但是在官方文档中，它是在
build（）
中调用的。我确实同意Snackbar是用于短弹出窗口的，但我认为在这里可能有用。文档中的showSnackbar（）是在按钮按下回调时调用的，这使得它在build（）调用之外。有趣的技术，虽然它不是一个真正理想的解决方案！因此，我的目标是在点击列表中的歌曲时显示底部栏。在这种情况下，我应该从父级传递控制器吗？我不明白forward（）和reverse（）在这里的用法。@nondefinite是的！将动画控制器作为NavBar构造函数的一部分从父级传入。然后，当你点击父母中的歌曲列表时，你可以在该控制器上调用.forward/.reverse，它将为导航栏设置动画
  @override
void initState() {
super.initState();
_animationController = AnimationController(
    vsync: this, duration: const Duration(milliseconds: 500));
  }

class _NavBarState extends State<NavBar>
with SingleTickerProviderStateMixin {
late AnimationController _animationController;

_animationController.forward()
_animationController.reverse()