在列表中删除和添加新卡片 -Flutter

Question

我正在使用约会应用程序。所以，它基本上就像一个 Tinder。

我们有卡片layout here。所以，它是一个带有卡片小部件的堆栈列表。

在我关注https://mightytechno.com/flutter-tinder-swipe-cards/ 的这个例子中，他创建了一个列表，当刷卡时它从列表中删除。但是，当我尝试添加新卡片时，卡片并没有添加。

我的滑动区域：

List<Widget> cards = List();

@override
void initState() { 
    super.initState(); 
    cards.add(
      new ProfileCard());

@override
Widget build(BuildContext context) {
  return Expanded(
    child: Container(
    child: Stack(
      children: cards,
    ),
  ));
}
void callBack(Widget value) {

    setState(() {
      cards.remove(value);
      cards.add(new ProfileCard());
      _adCardCounter++;
    });
}

当 ProfileCard（卡片）被刷卡时，callBack 被调用，然后我从 List 中删除 Widget 并添加一个新的。 但是，我在显示器中看不到卡片。 如果列表中有 2 张卡片，我删除 2 并添加 2，它不会显示任何卡片。但数组有 3。

有人知道为什么吗？以及如何使用它的最佳解决方案是什么？我试图重复使用这些卡片，但我不能。

Answer 1

您可以在下面复制过去运行的完整代码
你可以使用包https://pub.dev/packages/flutter_tindercard
您可以在swipeCompleteCallback添加新卡
代码sn-p

swipeCompleteCallback: (CardSwipeOrientation orientation, int index) {
        _addToStream();
...
void _addToStream() {
    Random random = new Random();
    int index = random.nextInt(3);
    print("index $index");
    welcomeImages.add('https://picsum.photos/250?image=$index');
    welcomeImages.removeAt(0);
    _streamController.add(welcomeImages);
  }

工作演示

完整代码

import 'package:flutter/material.dart';
import 'package:flutter_tindercard/flutter_tindercard.dart';
import 'dart:async';
import 'dart:math';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: AsyncDataExampleHomePage(),
    );
  }
}

// support for asynchronous data events
class AsyncDataExampleHomePage extends StatefulWidget {
  @override
  _AsyncDataExampleHomePageState createState() =>
      _AsyncDataExampleHomePageState();
}

class _AsyncDataExampleHomePageState extends State<AsyncDataExampleHomePage>
    with TickerProviderStateMixin {
  StreamController<List<String>> _streamController;

  List<String> welcomeImages = [
    "https://picsum.photos/250?image=9",
    "https://picsum.photos/250?image=10",
    "https://picsum.photos/250?image=11",
  ];

  @override
  initState() {
    super.initState();
    _streamController = StreamController<List<String>>();
  }

  void _addToStream() {
    Random random = new Random();
    int index = random.nextInt(3);
    print("index $index");
    welcomeImages.add('https://picsum.photos/250?image=$index');
    welcomeImages.removeAt(0);
    _streamController.add(welcomeImages);
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text("asynchronous data events test"),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            Text(
              'Added image appears on top:',
            ),
            StreamBuilder<List<String>>(
              stream: _streamController.stream,
              initialData: welcomeImages,
              builder:
                  (BuildContext context, AsyncSnapshot<List<String>> snapshot) {
                print('snapshot.data.length: ${snapshot.data.length}');
                if (snapshot.hasError) return Text('Error: ${snapshot.error}');
                switch (snapshot.connectionState) {
                  case ConnectionState.none:
                    return Text('Add image');
                  case ConnectionState.waiting:
                  //return Text('Awaiting images...');
                  case ConnectionState.active:
                    print("build active");
                    return _AsyncDataExample(context, snapshot.data);
                  case ConnectionState.done:
                    return Text('\$${snapshot.data} (closed)');
                }
                return null; // unreachable
              },
            ),
          ],
        ),
      ),
      floatingActionButton: FloatingActionButton(
        onPressed: _addToStream,
        tooltip: 'Add image',
        child: Icon(Icons.add),
      ),
    );
  }

  Widget _AsyncDataExample(BuildContext context, List<String> imageList) {
    CardController controller; //Use this to trigger swap.
    print(imageList.length);
    return Center(
      key: UniqueKey(),
      child: Container(
        height: MediaQuery.of(context).size.height * 0.6,
        child: TinderSwapCard(
          orientation: AmassOrientation.TOP,
          totalNum: imageList.length,
          stackNum: 3,
          swipeEdge: 4.0,
          maxWidth: MediaQuery.of(context).size.width * 0.9,
          maxHeight: MediaQuery.of(context).size.width * 0.9,
          minWidth: MediaQuery.of(context).size.width * 0.8,
          minHeight: MediaQuery.of(context).size.width * 0.8,
          cardBuilder: (context, index) {
            print("cardbuilder ${index}");
            print("imageList length ${imageList.length}");
            return Card(
              color: Colors.blue,
              child: Image.network('${imageList[index]}'),
            );
          },
          cardController: controller = CardController(),
          swipeUpdateCallback: (DragUpdateDetails details, Alignment align) {
            /// Get swiping card's alignment
            if (align.x < 0) {
              //Card is LEFT swiping
            } else if (align.x > 0) {
              //Card is RIGHT swiping
            }
          },
          swipeCompleteCallback: (CardSwipeOrientation orientation, int index) {
            _addToStream();

            /// Get orientation & index of swiped card!
          },
        ),
      ),
    );
  }
}