我怎样才能翻转我的卡片，同时我可以点击图片发出声音？

Question

我是 flutter 的新手，我正在创建一个抽认卡，当我长按图片时，它会发出声音。我做到了。我的问题是如何使用翻盖，因为它是抽认卡，有正面和背面图片。每张照片都有其独特的声音。我还在 Pub dev 中使用了轮播（carousel，flip card）。我用了一个按钮，但它不起作用。我得到一个错误。它说全局密钥被多次使用。所以这是一个失败的计划。我也想创建一个按钮来滚动图片，但它没有用。如何翻转卡片并发出声音？这是我的代码，如果你有问题，请问我会回答只是为了解决这个问题。谢谢

import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';
import 'package:carousel_slider/carousel_slider.dart';
import 'package:assets_audio_player/assets_audio_player.dart';
import 'package:baybay_app/FlashCards/FlashcardsList.dart';
import 'package:flip_card/flip_card.dart';

class Flashcards extends StatefulWidget {
  final List<FlashcardsList> _flashCardsList = flashcardsList;
  @override
  _FlashcardsState createState() => _FlashcardsState();
}

class _FlashcardsState extends State<Flashcards> {
  CarouselController buttonCarouselController = CarouselController();
  List<FlashcardsList> flashCardsList;
  @override
  void initState() {
    super.initState();
    flashCardsList = widget._flashCardsList;
  }

  Widget build(BuildContext context) => Scaffold(
    appBar: AppBar(title:Text('Sample Carousel')),
    body: Column(
        children: <Widget>[

          CarouselSlider.builder(
            itemBuilder:(context, index){

              return
                Card(
                  child:FlipCard(
                    front: ListTile(

                      title: Image(
                          image: AssetImage(
                              widget._flashCardsList[index].pictures1)
                      ),
                  ),



                    back: ListTile(

                      title: Image(
                          image: AssetImage(
                              widget._flashCardsList[index].pictures2)
                      ),
                    ),
                  ),


                );



            },
            itemCount: widget._flashCardsList.length,
            options: CarouselOptions(

              autoPlay: false,
              enlargeCenterPage: true,
              viewportFraction: 0.9,
              aspectRatio: 2.0,
              initialPage: 2,
            ),

          ),
        ]

    ),

      );
      void onPlayAudio(index) async{
        AssetsAudioPlayer assetsAudioPlayer = AssetsAudioPlayer();
        assetsAudioPlayer.open(
            Audio(widget._flashCardsList[index].sound1)
        );
      }
      void PlayAudio(index) async{
        AssetsAudioPlayer assetsAudioPlayer = AssetsAudioPlayer();
        assetsAudioPlayer.open(
            Audio(widget._flashCardsList[index].sound2)
        );
      }
    }

'''

我还有一个图片列表要放在抽认卡上。

Answer 1

您可以使用 InkWell 小部件包装您的卡片。您可以长按卡片。它看起来像这样：

 Widget build(BuildContext context) => Scaffold(
        appBar: AppBar(title: Text('Sample Carousel')),
        body: Column(children: <Widget>[
          CarouselSlider.builder(
            itemBuilder: (context, index) {
              return InkWell(
                onLongPress: () {
                  onPlayAudio(index);
                },
                child: Card(
                  child: FlipCard(
                    front: ListTile(
                      title: Image(
                          image: AssetImage(
                              widget._flashCardsList[index].pictures1)),
                    ),
                    back: ListTile(
                      title: Image(
                          image: AssetImage(
                              widget._flashCardsList[index].pictures2)),
                    ),
                  ),
                ),
              );
            },
            itemCount: widget._flashCardsList.length,
            options: CarouselOptions(
              autoPlay: false,
              enlargeCenterPage: true,
              viewportFraction: 0.9,
              aspectRatio: 2.0,
              initialPage: 2,
            ),
          ),
        ]),
      );

我怎样才能翻转我的卡片，同时我可以点击图片发出声音？

How can I flip my card and at the same time I can click the picture to produce sounds?

android

flip

carousel

dart

flutter