AnimatedCrossFade 不能与 SingleChildScrollView 一起正常工作答案

【问题标题】：AnimatedCrossFade doesn't work correctly with SingleChildScrollViewAnimatedCrossFade 不能与 SingleChildScrollView 一起正常工作
【发布时间】：2020-03-03 17:54:53
【问题描述】：

我正在使用AnimatedCrossFade 为项目列表制作动画，但是，我注意到在淡入期间，列表只会在动画完成后突然显示（没有淡入中，只是大小转换）。淡出按预期工作。

如果您在下面的示例中删除SingleChildScrollView 并保留Row，则它可以正常工作。

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: MyHomePage(),
    );
  }
}

class MyHomePage extends StatefulWidget {
  @override
  _MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  bool crossFade = false;

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Center(
        child: AnimatedCrossFade(
          crossFadeState: crossFade ? CrossFadeState.showFirst : CrossFadeState.showSecond,
          duration: const Duration(milliseconds: 1000),
          firstChild: Container(
            height: 0.0,
            decoration: BoxDecoration(border: Border.all(color: Colors.greenAccent), color: Colors.green[100]),
          ),
          secondChild: Container(
            decoration: BoxDecoration(border: Border.all(color: Colors.blueAccent), color: Colors.blue[100]),
            child: SingleChildScrollView(
              child: Row(
                children: <Widget>[
                  Container(
                    width: 40,
                    height: 40,
                    margin: const EdgeInsets.all(10.0),
                    color: Colors.red,
                  ),
                  Container(
                    width: 40,
                    height: 40,
                    margin: const EdgeInsets.all(10.0),
                    color: Colors.red,
                  ),
                  Container(
                    width: 40,
                    height: 40,
                    margin: const EdgeInsets.all(10.0),
                    color: Colors.red,
                  ),
                ],
              ),
            ),
          ),
        ),
      ),
      floatingActionButton: FloatingActionButton(
        onPressed: () {
          setState(() {
            crossFade = !crossFade;
          });
        },
        tooltip: 'Switch',
        child: Icon(Icons.add),
      ),
    );
  }
}

Doctor summary (to see all details, run flutter doctor -v):
[✓] Flutter (Channel stable, v1.12.13+hotfix.8, on Mac OS X 10.15.3 19D76, locale en-GB)

【问题讨论】：

标签： flutter flutter-animation

【解决方案1】：

只有当行中的任何元素的高度或宽度大于移动屏幕时才有可能

你必须使用其他一些技巧，而不是使用这个 AnimatedCrossFade Widget

【讨论】：