Flutter：自定义底栏出现时向上滑动

Question

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

我有一个自定义导航栏class

class NavBar extends StatefulWidget

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

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

我怎么可以这样的动画？

Answer 1

一种解决方案是使用 SnackBar 小部件。由于它是自动设置动画的，因此您不必担心手动设置底部栏的动画。您可以将音频播放器（底部栏）小部件插入到 SizedBox 的 child。

底栏可见，

ScaffoldMessenger.of(context).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'),
      ),
    );

Answer 2

使用 SizeTransition 小部件https://api.flutter.dev/flutter/widgets/SizeTransition-class.html

"SizeTransition acts as a ClipRect that animates either its width or its height, depending upon the value of axis. The alignment of the child along the axis is specified by the axisAlignment."

 Widget build(BuildContext context) {
 return SizeTransition(
  sizeFactor: CurvedAnimation(
    curve: Curves.fastOutSlowIn,
    parent: _animationController,
  ),
  child: Container(height: 100, color: Colors.blue)
);
}

在有状态小部件 initState() 中初始化动画控制器

  @override
void initState() {
super.initState();
_animationController = AnimationController(
    vsync: this, duration: const Duration(milliseconds: 500));
  }

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

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

然后用

打开和关闭

_animationController.forward()
_animationController.reverse()

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

或者，您可以使用 AnimatedContainer 小部件和高度为 0 或 100 的 setState，具体取决于是否应显示 Nav。对于一些不能压缩到 0 高度的小部件来说，这成为一个问题，我不会推荐任何包含除文本以外的任何内容的容器

Flutter：自定义底栏出现时向上滑动

Flutter: Make a custom bottom bar sliding up when it appears

animation

navbar

dart

flutter