Flutter 火種交換卡奇怪的更新行為

Question

我嘗試構建一個類似 tinder 的滑動功能，每張卡片都可以顯示多張圖片。 這些圖像位於有狀態的小部件內。 如果我點擊圖片，則會顯示下一張圖片。 在 initState() 中，我調用 number = 0 ，這樣每次我刷卡並出現下一張卡片，就會顯示第一張圖片。 但是，如果我點擊屏幕查看當前卡片的第二張圖片，然后滑動查看下一張卡片，就會出現奇怪的行為。 不是顯示第一張圖片（我嘗試通過在 initState() 中調用 number = 0 來保證），而是保存前一張卡的 state 並自動顯示第二張圖片。 我的期望是每張 tinder 卡都是一個單獨的有狀態小部件，由 number = 0 初始化。似乎情況並非如此。

下面是一個最小的代碼示例來說明我的意思：

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

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: MyHomePage(),
    );
  }
}

class MyHomePage extends StatefulWidget {

  MyHomePage();

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

class _MyHomePageState extends State<MyHomePage> {

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: TinderSwapCard(
        swipeEdge: 6,
        orientation: AmassOrientation.TOP,
        swipeCompleteCallback: handleSwipeCompleted,
        totalNum: 100,
        stackNum: 5,
        maxWidth: MediaQuery.of(context).size.width*0.95,
        maxHeight: MediaQuery.of(context).size.height*0.67,
        minWidth: MediaQuery.of(context).size.width*0.949,
        minHeight: MediaQuery.of(context).size.height*0.669,
        cardBuilder: (context, index) => buildCard(index),
      ),
    );
  }

  void handleSwipeCompleted(CardSwipeOrientation orientation, int index) {
    switch (orientation) {
      case CardSwipeOrientation.LEFT:
        break;
      case CardSwipeOrientation.RIGHT:
        break;
      case CardSwipeOrientation.RECOVER:
        break;
      default:
        break;
    }
  }

  Widget buildCard(int index) {
    return Center(
      child: Container(
        padding: EdgeInsets.only(top: 100),
        color: Colors.grey,
        height: MediaQuery.of(context).size.height*0.5,
        child: Column(
          children: <Widget>[
            Text(index.toString()),
            ExampleWidget(),
          ],
        ),
      ),
    );
  }

}

class ExampleWidget extends StatefulWidget {
  @override State<ExampleWidget> createState() => ExampleWidgetState();
}

class ExampleWidgetState extends State<ExampleWidget> {

  int number;

  @override void initState() {
    number = 0;
    super.initState();
  }

  @override Widget build(BuildContext context) {
    return Center(
      child: GestureDetector(
        onTap: () {setState(() {number++;});},
        child: Text(number.toString(), style: TextStyle(color: Colors.red)),
      ),
    );
  }

}

4 號卡，5號圖片 5 號卡，5 號圖片

在此代碼示例中，您可以看到帶有兩個數字的灰色火種卡：第一個數字（黑色）代表當前卡片，第二個數字（紅色）代表當前圖片編號。 如果您點擊紅色數字，則會顯示下一張圖片（數字增加）。

在第一個屏幕截圖中，您可以看到卡號。 4 有圖片編號。 5.如果我刷卡，那么出現下一張卡片，第一個state是正確的（卡號5和圖片號0），但幾毫秒后圖片號。 更改為 5，即前一張卡的 state。

這里有什么問題？ 我通過在有狀態小部件中包含 didUpdateWidget(Widget oldWidget) 方法找到了一種解決方法，該方法將下一張圖片的數字設置為 0，但這不是一個好的解決方案，因為我一刷卡就會觸發它。 因此，如果顯示第二張圖片並且我滑動，它會立即跳轉到第一張圖片。 這解決了下一張卡的問題，但在當前卡上看起來很糟糕。 另一種嘗試是在 dispose() 或 deactivate() 方法上調用 number = 0，但它不起作用。 我擔心是進口的火種交換卡package內部有問題，但也許你有一些想法。

我是堆棧溢出和 flutter 的新手，所以希望您能理解我的問題並能幫助我，謝謝！

Answer 1

由於ExampleWidget是一個有狀態的小部件，因此您必須為每個小部件分配一個鍵。 有關更多詳細信息，請閱讀本文： https://medium.com/flutter/keys-what-are-they-good-for-13cb51742e7d