如何制作每個都有音頻的詳細螢屏。我是否必須為每個串列視圖專案的每個音頻播放器宣告？誰能給我一些見解以使其盡可能簡單？順便說一句，我使用 just_audio 插件。提前感謝任何可以幫助我的人:)
//宣告
late AudioPlayer player;
late AudioPlayer player2;
@override
void initState() {
super.initState();
player = AudioPlayer();
player2 = AudioPlayer();
}
@override
void dispose() {
player.dispose();
player2.dispose();
super.dispose();
}
//我打算為每個串列視圖專案放在詳細螢屏中的音頻播放器按鈕
FlatButton(
onPressed: () async {
try {
await player.setAsset("assets/audio/mim dengung.mp3");
player.play();
} on PlayerException catch (e) {
print("Error code: ${e.code}");
print("Error message: ${e.message}");
} on PlayerInterruptedException catch (e) {
print("Connection aborted: ${e.message}");
} catch (e) {
print(e);
}
},
padding: EdgeInsets.symmetric(horizontal: 50),
shape: StadiumBorder(
side: BorderSide(color: Colors.white54, width: 2)),
child: Container(
width: 80,
height: 50,
padding:
EdgeInsets.symmetric(vertical: 3, horizontal: 10),
decoration: ShapeDecoration(
color: Colors.amber,
shape: StadiumBorder(),
),
child: Row(
children: <Widget>[
Icon(Icons.volume_up_outlined),
Text(
" ? ",
style:
TextStyle(color: Colors.black87, fontSize: 25),
textAlign: TextAlign.center,
),
],
),
),
),
這是串列視圖專案，如果用戶單擊任何串列視圖專案，它將在其中顯示詳細資訊螢屏（下面的代碼）
import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';
import 'package:flutter/painting.dart';
import '../../constants.dart';
import 'detail_screen.dart';
import 'model.dart';
class Basic extends StatefulWidget {
@override
_MyHomePageState createState() => _MyHomePageState();
}
class _MyHomePageState extends State<Basic> {
List<Item> _itemList = [
Item(
title: "Hamzah Wasal",
longText:
"Hamzah Wasal adalah hamzah zaidah (tambahan) yang berada pada awal. Ia harus diucapkan jika berada di awal kalimah dan tidak diucapkan jika disambung dengan ayat sebelumnya.\n\nHamzah Wasal dibaca Dhommah(baris depan) apabila huruf ketiga adalah Dhommah. Jika huruf ketiga adalah Fathah (baris atas) atau Kasrah (baris bawah), ia perlu dibaca dengan Kasrah.",
image: "assets/images/hamzah_wasal.jpg"),
Item(
title: "Ghunnah",
longText:
"Dari segi bahasa ia bermaksud suara yang keluar dari pangkal rongga hidung.\n\nDari segi istilah ia bermaksud suara yang indah dan teratur pada huruf nun(termasukk tanwin) dan mim.\n\nDalam keadaan normal, makhraj mim adalah dua bibir bertemu dan makhraj nun adalah hujung lidah bertemu lelangit mulut. Tetapi dalam keadaan ghunnah, makhraj mim dan nun bercampur dengan khaisyum (baca lebih lanjut dalam bahagian makhraj).",
image: "assets/images/hamzah_wasal.jpg"),
Item(
title: "Sukun",
longText:
"Terdapat 2 jenis sukun (mati) di dalam Al Quran. Sukun yg pertama dinamakan Sukun Asli manakala yg kedua adalah Sukun yg mendatang.\n\nSukun Asli adalah huruf yg bertanda sukun. Sukun itu dibaca sama ada ketika waqaf (berhenti) mahupun ketika wasal (sambung). Dinamakan Asli kerana ia tidak berubah dan merupakan asal kepada huruf tersebut bertanda sukun.\n\nContoh hukum adalah pada Mad Lazim Kalimi.\n\nSukun mendatang pula atau disebut ‘aridhah adalah sukun yg terhasil daripada huruf yg bertanda (baris, sabdu atau tanwin). Disebut sukun mendatang adalah disebabkan berlaku sesuatu pada huruf berbaris tersebut iaitu waqaf (berhenti). Ia menjadi sukun apabila waqaf tetapi kembali kepada bacaan asalnya berbaris apabila wasal (sambung).\n\nContohnya adalah pada hukum Mad Aridh Lissukun.",
image: "assets/images/hamzah_wasal.jpg"),
Item(
title: "Mad Ta’zhim",
longText:
"Mad Ta’zhim ialah mad pada perkataan ?? bererti “tidak” ketika pertemuannya dengan perkataan yang terdapat pada kalimah tauhid (???).\n\n Bagi mereka yang membaca mad jaiz munfasil dengan kadar 2/4/6 harakat, apabila bertemu perkataan (???) di dalam kalimah tauhid, ia dibaca 6 harakat.",
image: "assets/images/mad silah qasirah.jpg"),
];
@override
Widget build(BuildContext context) {
return Scaffold(
backgroundColor: primaryColor,
appBar: AppBar(
title: const Text("Asas"),
centerTitle: true,
backgroundColor: secondaryColor,
),
body: Center(
child: ListView.builder(
itemCount: _itemList.length,
itemBuilder: (context, index) {
return GestureDetector(
onTap: () {
Navigator.push(
context,
MaterialPageRoute(
builder: (context) =>
DetailScreen(item: _itemList[index])),
);
},
child: Card(
color: Colors.white,
child: Container(
margin: EdgeInsets.all(18),
child: Text(
_itemList[index].title,
style: TextStyle(
fontSize: 19,
fontWeight: FontWeight.bold,
),
),
),
));
},
)));
}
}
這是用戶單擊任何串列視圖項后將出現的詳細螢屏
import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';
import '../../constants.dart';
import 'model.dart';
class DetailScreen extends StatelessWidget {
final Item item;
const DetailScreen({Key? key, required this.item}) : super(key: key);
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
backgroundColor: secondaryColor,
),
body: Center(
child: SingleChildScrollView(
scrollDirection: Axis.vertical,
child: Padding(
padding: const EdgeInsets.all(30),
child: Column(children: [
Padding(
padding: const EdgeInsets.only(bottom: 20),
child: Text(
item.title,
style: TextStyle(fontSize: 25, fontWeight: FontWeight.bold),
),
),
Padding(
padding: const EdgeInsets.only(bottom: 20),
child: Text(
item.longText,
style: TextStyle(fontSize: 18.5),
textAlign: TextAlign.justify,
),
),
SizedBox(height: 100, child: Image.asset(item.image)),
]),
),
),
),
);
}
}
//這是我添加音頻播放器邏輯后得到的錯誤。Idk 在 DetailScreen 類中宣告音頻播放器的位置
uj5u.com熱心網友回復：
你已經過去了title，longText到image你DetailScreen里面了Item。因此，您也可以添加audiotoItem并在DetailScreen. 然后，您可以將音頻播放器邏輯移動到您的DetailScreen，并且只使用一個音頻播放器來播放基于item.audio.
更新
DetailScreen 代碼：
class DetailScreen extends StatefulWidget {
final Item item;
const DetailScreen({Key? key, required this.item}) : super(key: key);
@override
State<DetailScreen> createState() => _DetailScreenState();
}
class _DetailScreenState extends State<DetailScreen> {
final _player = AudioPlayer();
@override
void initState() {
super.initState();
_init();
}
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
backgroundColor: secondaryColor,
),
body: Center(
child: SingleChildScrollView(
scrollDirection: Axis.vertical,
child: Padding(
padding: const EdgeInsets.all(30),
child: Column(
children: [
Padding(
padding: const EdgeInsets.only(bottom: 20),
child: Text(
widget.item.title,
style: TextStyle(fontSize: 25, fontWeight: FontWeight.bold),
),
),
Padding(
padding: const EdgeInsets.only(bottom: 20),
child: Text(
widget.item.longText,
style: TextStyle(fontSize: 18.5),
textAlign: TextAlign.justify,
),
),
SizedBox(
height: 100,
child: Image.asset(widget.item.image),
),
SizedBox(height: 16),
FlatButton(
onPressed: _player.play,
padding: EdgeInsets.symmetric(horizontal: 50),
shape: StadiumBorder(side: BorderSide(color: Colors.white54, width: 2)),
child: Container(
width: 80,
height: 50,
padding: EdgeInsets.symmetric(vertical: 3, horizontal: 10),
decoration: ShapeDecoration(
color: Colors.amber,
shape: StadiumBorder(),
),
child: Row(
children: <Widget>[
Icon(Icons.volume_up_outlined),
Text(
" ? ",
style: TextStyle(color: Colors.black87, fontSize: 25),
textAlign: TextAlign.center,
),
],
),
),
),
],
),
),
),
),
);
}
@override
void dispose() {
_player.dispose();
super.dispose();
}
Future<void> _init() async {
_player.playbackEventStream.listen((event) {}, one rror: (Object e, StackTrace stackTrace) {
print('A stream error occurred: $e');
});
try {
await _player.setAsset("assets/audio/mim dengung.mp3");
} catch (e) {
print("Error loading audio source: $e");
}
}
}
轉載請註明出處，本文鏈接：https://www.uj5u.com/houduan/411960.html
標籤：