Question

我试图创建类似于this的列表视图，并在顶部连续添加列表项，但是当我设置一个列表视图来执行此操作时，它总是在最后一张卡片中显示动画。

在列表视图中，uniqueCounter是单调递增的数字流，添加到队列中。我用数字10和44播种。我希望每个新列表项都可以进行动画处理，相反，它始终是最后一张卡片“ 44”。我希望这是因为ListView在后台重用了元素，并更改了传入的数据。无论如何，不实现自定义列表视图就可以实现这一目标吗？

import 'package:flutter/material.dart';
import '../../services/stream_test/stream_test.dart';
import './list_item.dart';
import 'dart:collection';

class NumberCards extends StatefulWidget {
  @override
  _NumberCardsState createState() => new _NumberCardsState();
}

class _NumberCardsState extends State<NumberCards> {
  final _suggestions = new Queue();
  final Set<int> _saved = new Set<int>(); // Add this line.
  String title = 'hello';
  _NumberCardsState() {
    _suggestions.addAll([10, 44]);

    uniqueCounter.listen((datum) {
      setState(() {
        _suggestions.addFirst(datum);
      });
    });
  }
  Widget _buildSuggestions() {
    return ListView.builder(
        itemCount: _suggestions.length * 2,
        padding: const EdgeInsets.all(16.0),
        itemBuilder: /*1*/ (context, i) {
          if (i.isOdd)
            return Divider(color: Color.fromRGBO(100, 50, 200, .9)); /*2*/

          final index = i ~/ 2; /*3*/

          if (_suggestions.length > index - 1)
            return _buildRow(_suggestions.elementAt(index));

          return null;
        });
  }

  Widget _buildRow(int pair) {
    return AListItem(number: pair);
  }

  @override
  Widget build(BuildContext context) {
    return new Scaffold(
      appBar: new AppBar(
        title: new Text('$title'),
      ),
      body: _buildSuggestions(),
    );
  }
}

AListItem：

import 'package:flutter/material.dart';

class AListItem extends StatefulWidget {
  final int number;

  const AListItem({Key key, this.number}): super(key: key);

  @override
  _AListItemState createState() => new _AListItemState();
}

class _AListItemState extends State<AListItem> {
  @required
  final _biggerFont = const TextStyle(fontSize: 18.0);
  double opacityLevel = .2;


  @override
  Widget build(BuildContext context) {

    print(widget.number);

    new Future.delayed(const Duration(milliseconds: 10), () {
      setState(() {
        opacityLevel = 1;
      });
    });



    return AnimatedOpacity(
      key: new ObjectKey(widget.number),
      opacity: opacityLevel,
      duration: Duration(seconds: 1),
      child: ListTile(
        key: new ObjectKey(widget.number),
        title: Text(
          widget.number.toString(),
          style: _biggerFont,
        ),
      ),
    );
  }
}

在ListView的顶部卡片中进行动画处理

0 个答案: