Question

我正在使用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)

Answer 1

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

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

AnimatedCrossFade无法与SingleChildScrollView一起正常使用

1 个答案: