animation - 如何为 AnimatedContainer 设置动画以填充所有可用空间

Question

基本上我想在 2 个值之间设置 AnimatedContainer 的高度动画。但这就是问题所在。当我的状态为 1 时，我知道高度，因此我可以设置动画，但是当我的状态为 0 时，我希望动画容器扩展到可用空间。我尝试用 Expanded 小部件包装我的动画容器，但这没有用。

class _PreviewScreenState extends State<PreviewScreen> {
  var selectedTab = 1;

  @override
  Widget build(BuildContext context) {
    double imageWidth = MediaQuery.of(context).size.width;
    double imageHeight = selectedTab == 1 ? imageWidth : null;

    return Scaffold(
      body: DefaultTabController(
        length: 3,
        initialIndex: selectedTab,
        child: Background(
          child: SafeArea(
            child: Column(
              mainAxisAlignment: MainAxisAlignment.spaceBetween,
              children: <Widget>[
                AppBar(
                  backgroundColor: Colors.transparent,
                  elevation: 0,
                  title: Text('SHARE'),
                ),
                Expanded(
                  child: AnimatedContainer(
                    height: imageHeight,
                    duration: Duration(milliseconds: 600),
                    color: Colors.red,
                  ),
                ),
                TabBar(
                  labelStyle: TextStyle(fontSize: 13),
                  indicator: BoxDecoration(
                    color: Colors.white24,
                    borderRadius: BorderRadius.circular(40),
                  ),
                  onTap: (index) {
                    setState(() {
                      selectedTab = index;
                    });
                  },
                  tabs: <Widget>[
                    Tab(child: Text('INSTAGRAM')),
                    Tab(child: Text('SQUARE')),
                    Tab(child: Text('OTHER'))
                  ],
                ),
                Container(
                  height: 100,
                  child: Center(
                    child: Padding(
                      padding: const EdgeInsets.symmetric(horizontal: 20.0),
                      child: ShareButton(
                        onPressed: () {},
                      ),
                    ),
                  ),
                )
              ],
            ),
          ),
        ),
      ),
    );
  }
}

Answer 1

您可以使用Flexible 小部件代替Expanded 小部件。它为子项提供了“扩展以填充主轴中可用空间的灵 active ，但与 Expanded 不同的是，Flexible 不需要子项填充可用空间。”此外，您应该从 AnimatedContainer 切换到 AnimatedSize，因为 AnimatedContainer 会在 double.infinity 和常量之间引发错误插值高度。

所以这个

 Expanded(
                  child: AnimatedContainer(
                    height: imageHeight,
                    duration: Duration(milliseconds: 600),
                    color: Colors.red,
                  ),
                ),

会来的

    Flexible(                                                             
                  child: AnimatedSize(
                        vsync: this,
                        duration: Duration(milliseconds: 600),
                        child: Container(
                        height: imageHeight,
                        color: Colors.red,),
                      ),
                    ),

为此，您的 _PreviewScreenState 必须使用 SingleTickerProviderStateMixin 混合宏，并且您的 imageHeight 逻辑必须从 null 更改为 double.infinity 用于填充可用空间。

即您将拥有:

class _PreviewScreenState extends State<PreviewScreen> with SingleTickerProviderStateMixin{
//rest of your code
}

和

double imageHeight = selectedTab == 1 ? imageWidth : double.infinity;

这是一个 DartPad 演示:https://dartpad.dev/bf4f969f76ab3092d0b1960bfdbf7825