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;
  }
}