Flutter:如何将AnimatedContainer与Expanded in Column一起使用? [英] Flutter: How to use AnimatedContainer with Expanded in Column?

问题描述

假设我们有3个Column的孩子:

Let's say we have 3 children of a Column:

Flexible(
   flex:1,
   child: Container(
      color: Colors.red,
   ),
),
Flexible(
   flex:3,
   child: Container(
      color: Colors.yellow,
   ),
),
Flexible(
   flex:1,
   child: Container(
      color: Colors.blue,
   ),
),

我想用平滑的动画以编程方式用flex=3扩展中间子对象，以覆盖整个Column，而顶部和底部子对象相应地缩小.

I want to programmatically expand middle child with flex=3 to cover the whole Column with smooth animation, while the top and bottom children shrinks accordingly.

现在，我的设置是使用Column和Flexible小部件的.但是，如果您能想到使用其他小部件的解决方案，那么我也对这些想法持开放态度.

Right now my setup is with a Column and Flexible widgets. However if you can think of a solution with other widgets, I am open to those ideas as well.

推荐答案

截屏:

代码:

Duration _duration = Duration(seconds: 1);
int _flex1 = 1, _flex2 = 3, _flex3 = 1;

@override
Widget build(BuildContext context) {

  double height = MediaQuery.of(context).size.height;
  var height1 = (_flex1 * height) / (_flex1 + _flex2 + _flex3);
  var height2 = (_flex2 * height) / (_flex1 + _flex2 + _flex3);
  var height3 = (_flex3 * height) / (_flex1 + _flex2 + _flex3);

  return Scaffold(
    body: Column(
      children: <Widget>[
        AnimatedContainer(
          duration: _duration,
          color: Colors.blue,
          height: height1,
          alignment: Alignment.center,
          child: Text("Flex: ${_flex1}", style: TextStyle(fontSize: 32, fontWeight: FontWeight.bold)),
        ),
        AnimatedContainer(
          duration: _duration,
          color: Colors.red,
          height: height2,
          alignment: Alignment.center,
          child: Text("Flex: ${_flex2}", style: TextStyle(fontSize: 32, fontWeight: FontWeight.bold)),
        ),
        AnimatedContainer(
          duration: _duration,
          color: Colors.teal,
          height: height3,
          alignment: Alignment.center,
          child: Text("Flex: ${_flex3}", style: TextStyle(fontSize: 32, fontWeight: FontWeight.bold)),
        ),
      ],
    ),
  );
}

这篇关于Flutter:如何将AnimatedContainer与Expanded in Column一起使用?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！