如何在flip_card Widget Flutter中使用控制器？

Question

我正在使用 flip_card 包来翻转我的测验应用程序中的卡片。我有一个下一个按钮来更改卡片两面的问题和答案。 但问题是如果卡片在答案面（背面），单击下一步按钮会显示下一个问题的答案。如果卡片在应答侧，我想通过单击下一步按钮自动反转卡片。

发布开发链接：flip_card

github 链接：flip_card Github

class Practice extends GetView {
  final ShowcaseController cardController = Get.put(ShowcaseController());
  final PracticeController practiceController = Get.put(PracticeController());

  final subjectName;
  Practice({this.subjectName});

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      backgroundColor: Colors.blue[100],
      body: Center(
        child: Obx(
          () => 
          //Flip_card Code
          FlipCard(
            direction: FlipDirection.HORIZONTAL,
            front: Container(
              color: Colors.white,
              child: Text(cardController.cards[practiceController.cardIndex.toInt()]["question"]),
            ),
            back: Container(
              color: Colors.red,
              child: Text(cardController.cards[practiceController.cardIndex.toInt()]["answer"]),
            ),
          ),
        ),
      ),
      floatingActionButton: FloatingActionButton(
        child: Text("Next"),
        onPressed: () {
          practiceController.cardIndex++;
        },
      ),
    );
  }
}

Answer 1

我没有看到任何直接明显的方法来跟踪卡片的状态。但这里有一个解决方案。

一般的想法是创建一个在卡片翻转时更新的boolean，如果按下Next 按钮，如果卡片被翻转，它会在移动到下一个索引之前翻转回前面。这还需要将GlobalKey 保留在Getx 类中。

将以下内容添加到您的 PracticeController 类中。

GlobalKey<FlipCardState> cardKey = GlobalKey<FlipCardState>();

  bool cardIsFlipped = false;

  void updateCardIsFlipped() => cardIsFlipped = !cardIsFlipped;

  Future<void> nextQuestion() async {
    if (cardIsFlipped) {
      cardKey.currentState.toggleCard();
    }
    await Future.delayed(const Duration(milliseconds: 200), () {
      cardIndex++;
    }); // needs time for the flip animation to complete before moving to the next question
  }

然后对您的Scaffold 进行一些更改，您就可以开始了。

Scaffold(
      backgroundColor: Colors.blue[100],
      body: Center(
        child: Obx(
          () => FlipCard(
            direction: FlipDirection.HORIZONTAL,
            key: practiceController.cardKey, // using key from Getx class
            onFlip: () => practiceController.updateCardIsFlipped(), // updating bool on every flip
            front: Container(
                color: Colors.white,
                child: Text(cardController
                        .cardsMap[practiceController.cardIndex.toInt()]
                    ["question"])),
            back: Container(
              color: Colors.red,
              child: Text(cardController
                  .cardsMap[practiceController.cardIndex.toInt()]["answer"]),
            ),
          ),
        ),
      ),
      floatingActionButton: FloatingActionButton(
        child: const Text("Next"),
        onPressed: () => practiceController.nextQuestion(), // function from Getx class
      ),
    );

Answer 2

您还可以通过使用 GlobalKey 来切换卡片，将卡片配置为仅在需要时翻转：

class Practice extends GetView {
  final ShowcaseController cardController = Get.put(ShowcaseController());
  final PracticeController practiceController = Get.put(PracticeController());

GlobalKey<FlipCardState> cardKey = GlobalKey<FlipCardState>();
bool isFlipped = false;

  final subjectName;
  Practice({this.subjectName});

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      backgroundColor: Colors.blue[100],
      body: Center(
        child: Obx(
          () => 
          //Flip_card Code
          FlipCard(
          onFlipDone: (status) {
             isFlipped = true;
             print(isFlipped);
          },
            direction: FlipDirection.HORIZONTAL,
            front: Container(
              color: Colors.white,
              child: Text(cardController.cards[practiceController.cardIndex.toInt()]["question"]),
            ),
            back: Container(
              color: Colors.red,
              child: Text(cardController.cards[practiceController.cardIndex.toInt()]["answer"]),
            ),
          ),
        ),
      ),
      floatingActionButton: FloatingActionButton(
        child: Text("Next"),
        onPressed: () { if (isFlipped == false) {cardKey.currentState.toggleCard(); isFlipped = true}},
      ),
    );
  }
}