Flutter：tinder 喜欢没有堆栈的卡片

Question

我正在开发一个语言学习测验应用程序。 该人选择一个主题（30 个单词），我通过 API 向服务器发出请求，以获取翻译和转录列表。

因为获取数据需要很长时间，所以我只想获取几个单词的数据。 第一张卡片已显示，第二张卡片已加载。 当用户使用第一个（滑动它）时，第二个出现，第三个的数据并行加载。

你怎么能得到这样的数据？ 所有 tinder-cards 小部件都请求一个 stack ，即已经准备好的数据。 就我而言，这是不允许的。

我假设它应该是这样的：显示不是堆栈而是只显示一张卡片

Answer 1

带有堆栈的 Ui 很好，您需要使用Future 、 List和setState对获取数据逻辑做一些处理。

示例：当我滑动时，顶部数据 object 被滑动，最后创建新数据 object（完成后开始获取和 seft setState）。

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

void main() => runApp(MaterialApp(home: MyApp()));

class MyApp extends StatefulWidget {
  final int cardSizes = 3;

  @override
  MyAppState createState() => MyAppState();
}

class MyAppState extends State<MyApp> {
  var datas = <AGirl>[];

  @override
  void initState() {
    // generate stack when init
    datas = List.generate(widget.cardSizes, (_) => getNewGirl());
  }

  // function that return a AGirl and register a `setState` when data fetched
  AGirl getNewGirl() => AGirl()..fetch().then((_) => setState(() {}));

  // function that `swipe` top data object and add new unfetched data object at the last
  void swipe() {
    datas.removeAt(0);
    datas.add(getNewGirl());
    setState(() {});
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Stack(
        children: renderCards(),
      ),
    );
  }

  List<Widget> renderCards() {
    render(AGirl data, int index) {
      return Positioned(
        left: index * 200,
        child: SizedBox(
          width: 200,
          height: 300,
          child: Card(
            child: Column(
              mainAxisAlignment: MainAxisAlignment.spaceAround,
              children: [
                Text('Card $index'),
                Text('AGirl id ${data.id}'),
                data.hasData
                    ? const Center(child: Text('loaded'))
                    : const CircularProgressIndicator(),
                ElevatedButton(
                  onPressed: index == 0 ? swipe : null,
                  child: const Text('swipe'),
                ),
              ],
            ),
          ),
        ),
      );
    }

    return datas.reversed
        .map((data) => render(data, datas.indexOf(data)))
        .toList();
  }
}

class AGirl {
  final int id;
  dynamic data;
  AGirl() : id = Random().nextInt(99999);
  bool get hasData => data != null;

  Future<AGirl> fetch() async {
    await Future.delayed(const Duration(milliseconds: 1000));
    data = {};
    return this;
  }
}