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

Question

基本上，我想为AnimatedContainer的高度设置2个值之间的动画。但这是问题所在。当我的状态为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小部件。它使子级“可以灵活地扩展以填充主轴上的可用空间，但是与扩展级不同，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 mixin，并且您的imageHeight逻辑必须从null更改为double.infinity以填充可用空间。

即，您将拥有：

class _PreviewScreenState extends State<PreviewScreen> with SingleTickerProviderStateMixin{
}

和

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

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