颤动翻卡时播放声音

Question

我想在购物车翻转时播放声音，向我尝试使用 Inkwell 的用户显示单词的意思，但它不起作用。 我想实现一个字典，当用户单击任何单词时可以看到意思并收听声音。 另外，我在页面底部放置了一个按钮来测试声音，当我们点击它时，声音就会播放，但它对程序不起作用。

我的代码仓库：https://github.com/efarhadi/sw_flash 我的 test_filip.dart 文件：

import 'package:audioplayers/audioplayers.dart';
import 'package:flip_card/flip_card.dart';
import 'package:flutter/material.dart';
import 'dart:convert';

import 'package:flutter/services.dart';

class TestFlip extends StatefulWidget {
  const TestFlip({Key? key}) : super(key: key);

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

class _TestFlipState extends State<TestFlip> {
  final player = AudioPlayer();
  List _items = [];
  Future<void> readJson() async {
    final String response = await rootBundle.loadString('assets/words.json');
    final data = await json.decode(response);
    setState(() {
      _items = data["items"];
    });
  }

  @override
  void initState() {
    // TODO: implement initState

    readJson();
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Center(
        child: Column(
          children: [
            Expanded(
              child: ListView.builder(
                itemCount: _items.length,
                itemBuilder: (BuildContext context, int index) {
                  return InkWell(
                    onTap: () {
                      playSound('a070.mp3');
                    },
                    child: _HomeScreenCard(_items[index]["name"],
                        _items[index]["description"], context),
                  );
                },
              ),
            ),
            ElevatedButton(
                onPressed: () {
                  playSound('a070.mp3');
                },
                child: Text('sala'))
          ],
        ),
      ),
    );
  }

  Widget _HomeScreenCardFront(String text, context) {
    return Container(
      height: 100,
      alignment: Alignment.center,
      margin: const EdgeInsets.symmetric(vertical: 10, horizontal: 20),
      decoration: BoxDecoration(
        color: Theme.of(context).primaryColor,
        borderRadius: BorderRadius.circular(10),
      ),
      // width: 200,
      child: Text(text),
    );
  }

  Widget _HomeScreenCardBack(String text, context) {
    return Container(
      height: 100,
      alignment: Alignment.center,
      margin: const EdgeInsets.all(10),
      decoration: BoxDecoration(
        // color: Theme.of(context).primaryColor,
        borderRadius: BorderRadius.circular(10),
      ),
      // width: 200,
      child: Text(text),
    );
  }

  Widget _HomeScreenCard(String textFront, String textBack, context) {
    return FlipCard(
      fill: Fill.fillBack,
      direction: FlipDirection.HORIZONTAL, // default

      front: _HomeScreenCardFront(textFront, context),
      back: _HomeScreenCardBack(textBack, context),
    );
  }

  playSound(String sound) async {
    await player.play(AssetSource(sound));
  }
}

Answer 1

就您而言，

FlipCard

小部件有一个您需要的方便功能

onFlip

，而不是额外的

InkWell

小部件，您应该在那里播放声音。

...
              ListView.builder(
                itemCount: _items.length,
                itemBuilder: (BuildContext context, int index) {
                  // Remove the unneeded InkWell
                  return _HomeScreenCard(_items[index]["name"],
                      _items[index]["description"], context);
                },
              )
...
Widget _HomeScreenCard(String textFront, String textBack, context) {
    return FlipCard(
      fill: Fill.fillBack,
      direction: FlipDirection.HORIZONTAL, // default
      // Use the already-given function here
      onFlip: () async {
        await playSound('a070.mp3');
      },
      front: _HomeScreenCardFront(textFront, context),
      back: _HomeScreenCardBack(textBack, context),
    );
  }
...