AnimatedCrossFade не работает правильно с SingleChildScrollView - PullRequest
Новая
       7

AnimatedCrossFade не работает правильно с SingleChildScrollView

0 голосов
/ 03 марта 2020

Я анимирую список элементов, используя 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)
...