一个 ListView 在 AnimatedCrossFade 中不可滚动

Posted 2023-02-23

【中文标题】一个 ListView 在 AnimatedCrossFade 中不可滚动

【英文标题】：One ListView isn't scrollable in AnimatedCrossFade

【发布时间】：2017-10-18 01:21:35

【问题描述】：

我是 Flutter 开发的新手，但遇到一个问题： 我创建了新的 AnimatedCrossFade 并将两个不同的 ListView 添加到第一个和第二个孩子，但总是一个孩子 ListView 可滚动。如何在第一个和第二个孩子中做可滚动的 ListView？

（与简单 GridView 的情况相同。）

【问题讨论】：

只有一个列表视图在滚动，这是你的问题吗？

你能添加一些代码吗？没有你就很难帮助到你。

【参考方案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),
                ],
              );
            
          ),
        ),
        ),
      ),
    );