2 张卡片之间的动画切换器 - 如何使卡片具有相同的高度（较短的卡片扩展为与较高的卡片相同的高度）？

Question

我在两个

AnimatedSwitcher

孩子之间的

Card

上有一个翻转动画。

两张卡片都包含可变长度的可换行文本。因此它们具有不同的高度 - 一张卡片可能有 1 行文本，另一张卡片可能有 10 行。宽度是相同的。

当动画为翻转动画时，这看起来很奇怪，因为它应该是卡片翻转，但正面和背面的高度不同。它还会导致翻转动画出现一些卡顿（动画开始时高度会捕捉到更高的高度）。

我想通过使较短的卡长到与较高的卡相同的高度来解决这个问题。

也就是说当前的翻转动画是这样的：

------------      ------------------
| Card one |  ->  | Taller card 2  | 
------------      | with more text |
                  ------------------

我想将其更改为：

------------      ------------------
| Card one |  ->  | Taller card 2  | 
|          |      | with more text |
------------      ------------------

文本可以是可变长度的，所以我不知道如何预先计算固定高度（也许有办法？）。与

Row

或其他东西不同，容器在动画的开始和结束时只容纳 1 张卡片，所以我想没有简单的方法可以让较短的卡片“生长”，因为较高的卡片甚至不存在？

Answer 1

实现它的最简单方法是使用 IntrinsicHeight

1. 用

   Row

    包裹你的 

   IntrinsicHeight
2. 将

   Row

   的

   crossAxisAlignment

   设置为

   CrossAxisAlignment.stretch

   （用于将布局拉伸到最大行同级高度）

这是示例代码：

import 'package:flutter/material.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        body: Column(
          children: [
            IntrinsicHeight(
              child: Row(
                crossAxisAlignment: CrossAxisAlignment.stretch,
                children: [
                  Container(
                    color: Colors.blue,
                    width: 100,
                    child: Text('Box 1'),
                  ),
                  Container(
                    color: Colors.green,
                    width: 150,
                    child: Text('Box 2\nwith\ndifferent\nheights'),
                  ),
                  Container(
                    color: Colors.orange,
                    width: 75,
                    child: Text('Box 3'),
                  ),
                ],
              ),
            ),
          ],
        ),
      ),
    );
  }
}

这就是结果：