如何对 AnimatedContainer 进行动画处理以填充所有可用空间

Question

基本上我想在两个值之间对 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小部件。它为子级提供了“扩展以填充主轴中可用空间的灵活性，但是与 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 必须使用 mixin 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