在Flutter中为不受约束的小部件制作动画

This is the explanation and the demo for the @pskink answer

之前的代码:

Positioned(
  top: 0,
  left: 0,
  right: 0,
  child: AnimatedSize(
    duration: const Duration(milliseconds: 250),
    curve: Curves.easeInOut,
    child: isTopBarHovered
        ? Container(
          color: Colors.black,
          child: const Padding(
            padding: EdgeInsets.symmetric(vertical: 88.0),
            child: Center(
              child: Text('Additional Widget'),
            ),
          ),
        )
        : const SizedBox(height: 0),
  ),
),

步骤:

1. 将AnimatedSize替换为AnimatedAlign并将对齐设置为底部，因为您将向下动画化小部件，因此您必须将其粘在底部
2. 动画随heightFactor变化，就像调整布局边界框比例，1或0

后面的代码:

Positioned(
  top: 0,
  left: 0,
  right: 0,
  child: AnimatedAlign(
    duration: const Duration(milliseconds: 250),
    alignment: Alignment.bottomCenter,
    heightFactor: isTopBarHovered ? 1 : 0,
    curve: Curves.easeInOut,
    child: Container(
      color: Colors.black,
      child: const Padding(
        padding: EdgeInsets.symmetric(vertical: 88.0),
        child: Center(
          child: Text(
            'Additional Widget',
            style: TextStyle(color: Colors.white),
          ),
        ),
      ),
    ),
  ),
),

这就是结果:

感谢@pskink

这是最终的代码:

class HomePage extends StatefulWidget {
  const HomePage({super.key});

  @override
  State<HomePage> createState() => _HomePageState();
}

class _HomePageState extends State<HomePage> {
  bool isTopBarHovered = false;

  void handleTopBarHover(bool isHovered) {
    setState(() {
      isTopBarHovered = isHovered;
    });
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: MediaQuery.of(context).size.width < 800
          ? AppBar()
          : PreferredSize(
              preferredSize: Size(MediaQuery.of(context).size.width, 48.0),
              child: TopNavigationBar(onHover: handleTopBarHover),
            ),
      body: Stack(
        children: [
          Container(),
          Positioned(
            top: 0,
            left: 0,
            right: 0,
            child: AnimatedAlign(
              duration: const Duration(milliseconds: 250),
              alignment: Alignment.bottomCenter,
              heightFactor: isTopBarHovered ? 1 : 0,
              curve: Curves.easeInOut,
              child: Container(
                color: Colors.black,
                child: const Padding(
                  padding: EdgeInsets.symmetric(vertical: 88.0),
                  child: Center(
                    child: Text(
                      'Additional Widget',
                      style: TextStyle(color: Colors.white),
                    ),
                  ),
                ),
              ),
            ),
          ),
        ],
      ),
    );
  }
}

class TopNavigationBar extends StatefulWidget {
  final Function(bool) onHover;

  const TopNavigationBar({super.key, required this.onHover});

  @override
  State<TopNavigationBar> createState() => _TopNavigationBarState();
}

class _TopNavigationBarState extends State<TopNavigationBar> {
  @override
  Widget build(BuildContext context) {
    bool isHover = false;

    return Container(
      color: Colors.black,
      child: Row(
        mainAxisAlignment: MainAxisAlignment.center,
        children: [
          InkWell(
            onTap: () {},
            onHover: (val) {
              setState(() {
                isHover = val;
              });
              widget.onHover(isHover);
            },
            child: const Padding(
              padding: EdgeInsets.symmetric(vertical: 16.0, horizontal: 8.0),
              child: Text(
                "Item 01",
                style: TextStyle(color: Colors.white),
              ),
            ),
          ),
        ],
      ),
    );
  }
}