Question

我尝试构建类似火种的刷卡功能，其中每张卡都可以显示几张图片。这些图像位于有状态的小部件内。如果我点击图片，则显示下一张图片。在initState（）中，我呼叫number = 0，以便每次滑动时都出现下一张卡，显示第一张图片。但是，如果我在屏幕上点击以查看当前卡的第二张图片，然后滑动以查看下一张卡，则行为异常。而不是显示第一张图片（我试图通过在initState（）中调用number = 0来保证），而是保存前一张卡的状态，并自动显示第二张图片。我的期望是每张火种卡都是一个单独的有状态的小部件，该小部件由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)),
      ),
    );
  }

}

Card No. 4, Picture No. 5 Card No. 5, Picture No. 5

在此代码示例中，您可以看到带有两个数字的灰色火种卡：第一个数字（黑色）代表当前卡，第二个数字（红色）代表当前图片号。如果点击红色数字，将显示下一张照片（数字增加）。

在第一个屏幕截图中，您可以看到卡号。 4，带图片编号。 5.如果我滑动，则出现下一张卡，第一个状态是正确的（卡号5和图片号0），但几毫秒后图片号又变了。更改为5，这是前一张卡的状态。

这是什么问题？我通过在有状态的小部件中包含didUpdateWidget（Widget oldWidget）方法来找到一种解决方法，该方法将下一张图片的数字设置为0，但这不是一个好的解决方案，因为它会在我刷卡后立即触发。因此，如果显示了第二张图片而我轻扫，它会立即跳到第一张图片。多数民众赞成解决了下一张卡的问题，但看起来在当前卡上。另一个尝试是在dispose（）或deactivate（）方法上调用number = 0，但是没有用。我担心这是进口的火种交换卡包装内的问题，但也许您有一些想法。

我是堆栈溢出和波动的新手，所以希望您能理解我的问题并能帮助我，谢谢！

Answer 1

由于ExampleWidget是一个有状态的小部件，因此您将必须为其分配一个密钥。有关更多详细信息，请阅读本文： https://medium.com/flutter/keys-what-are-they-good-for-13cb51742e7d

颤抖火种交换卡怪异的更新行为

1 个答案: