하나의 ListView가 AnimatedCrossFade에서 스크롤 할 수 없습니다.

Question

나는 플러터 개발에서 새로운 기능을 가지고 있습니다. 새로운 AnimatedCrossFade를 만들고 두 번째 다른 ListView를 첫 번째 및 두 번째 자식에 추가하지만 항상 한 개의 자식 ListView를 스크롤 할 수있게 추가합니다. 첫 번째 및 두 번째 자식에서 스크롤 가능한 ListView를 수행하려면 어떻게해야합니까?

(단순의 GridView와 같은 상황은.)

Answer 1

이 AnimatedCrossFade에서 벌레처럼 보인다. 나는 issue을 제출했다.

AnimatedCrossFade을 사용하지 않고 FadeTransition을 사용하여 나만의 애니메이션을 제작하면 문제를 해결할 수 있습니다. 소스 코드는 아래에 있습니다. 재생 버튼을 클릭하면,이

같이 시작하고 같이 종료됩니다 :

다시 버튼을 클릭하여 앞뒤로 페이드 수 있습니다. 두 목록 모두 스크롤 할 수 있으며 스크롤 위치를 기억합니다.

import 'package:flutter/widgets.dart'; 
import 'package:flutter/material.dart'; 

void main() { 
    runApp(new MyApp()); 
} 

class MyApp extends StatefulWidget { 
    createState() => new MyAppState(); 
} 

class MyAppState extends State<MyApp> with TickerProviderStateMixin { 
    AnimationController _controller; 
    Key _key1 = new GlobalKey(); 
    Key _key2 = new GlobalKey(); 

    @override 
    void initState() { 
    _controller = new AnimationController(
     duration: const Duration(milliseconds: 700), 
     vsync: this, 
    ); 
    } 

    Widget _buildList(Key key, Color color, double opacity) { 
    return new Opacity(
     opacity: opacity, 
     child: new Container(
     // Keep the hidden ListView around to maintain its scroll position 
     // but set its height to 0.0 so it can't interfere with touches 
     height: opacity == 0.0 ? 0.0 : null, 
     decoration: new BoxDecoration(color: color), 
     child: new ListView(
      key: new GlobalObjectKey(color), 
      children: new List.generate(
      100, 
      (index) => new Text('Item $index'), 
     ), 
     ), 
    ), 
    ); 
    } 

    @override 
    Widget build(BuildContext context) { 
    return new MaterialApp(
     title: 'Flutter Demo', 
     home: new Scaffold(
     floatingActionButton: new FloatingActionButton(
      child: new Icon(Icons.play_arrow), 
      onPressed:() { 
      if (_controller.status == AnimationStatus.dismissed || 
       _controller.status == AnimationStatus.reverse) { 
       _controller.forward(); 
      } else { 
       _controller.reverse(); 
      } 
      }, 
     ), 
     body: new Center(
      child: new Container(
      width: 100.0, 
      height: 100.0, 
      child: new AnimatedBuilder(
      animation: _controller, 
      builder: (BuildContext context, Widget child) { 
       return new Stack(
       children: [ 
        _buildList(_key1, Colors.red[200], _controller.value), 
        _buildList(_key2, Colors.blue[200], 1.0 - _controller.value), 
       ], 
      ); 
      } 
     ), 
     ), 
     ), 
    ), 
    ); 
    } 
} 
}