Flutter古兰经阅读插件quran_flutter的使用

发布于 1周前 作者 zlyuanteng 来自 Flutter

Flutter古兰经阅读插件quran_flutter的使用

介绍

quran_flutter 是一个Flutter包,旨在提供对来自Tanzil.net的古兰经文本的访问。它还提供了关于章(Surahs)、节(Verses)、段(Juzs)和页(Pages)的元数据。

截图

Home Screen Surah List Juz List Page List Read Surah Read Juz Read Page

使用指南

安装

pubspec.yaml 文件中添加以下依赖:

dependencies:
  flutter:
    sdk: flutter
  quran_flutter: ^1.0.0

初始化

确保在应用启动时初始化 Quran 类:

import 'package:flutter/material.dart';
import 'package:quran_flutter/quran_flutter.dart';

Future<void> main() async {
  WidgetsFlutterBinding.ensureInitialized();
  await Quran.initialize();
  runApp(const MyApp());
}

常量

  • bismillah - بِسْمِ اللَّهِ الرَّحْمَـٰنِ الرَّحِيمِ
  • surahCount - 古兰经中的总章数
  • makkiSurahCount - 古兰经中的麦加章数
  • madaniSurahCount - 古兰经中的麦地那章数
  • verseCount - 古兰经中的总节数
  • juzCount - 古兰经中的总段数

支持的语言

该插件支持多种语言的翻译,包括但不限于:

  • Albanian, Amazigh, Amharic, Azerbaijani, Bengali, Bosnian, Bulgarian, Chinese, Czech, Divehi, Dutch, English, French, German, Hausa, Hindi, Indonesian, Italian, Japanese, Korean, Kurdish, Malay, Malayalam, Norwegian, Pashto, Persian, Polish, Portuguese, Romanian, Russian, Sindhi, Somali, Spanish, Swahili, Swedish, Tajik, Tamil, Tatar, Thai, Turkish, Urdu, Uyghur, Uzbek

获取古兰经文本

可以通过以下方法获取不同语言的古兰经文本:

// 获取阿拉伯语的古兰经文本
Map<int, Map<int, Verse>> quranVerses = Quran.getQuranVerses();

// 获取英语的古兰经文本
Map<int, Map<int, Verse>> quranVersesEnglish = Quran.getQuranVerses(language: QuranLanguage.english);

章(Surah)方法

  • getSurahAsMap() - 返回包含所有章的地图
  • getSurahAsList() - 返回包含所有章的列表
  • getSurah(int surahNumber) - 返回指定编号的章对象
  • getSurahVersesAsMap(int surahNumber, {QuranLanguage? language}) - 返回指定章的节作为地图
  • getSurahVersesAsList(int surahNumber, {QuranLanguage? language}) - 返回指定章的节作为列表
  • getSurahName(int surahNumber) - 返回指定章的名字
  • getSurahNameEnglish(int surahNumber) - 返回指定章的英文名字
  • getTotalVersesInSurah(int surahNumber) - 返回指定章的总节数
  • getRevealationOrderInSurah(int surahNumber) - 返回指定章的启示顺序
  • getRukusInSurah(int surahNumber) - 返回指定章的鲁库数
  • getSurahType(int surahNumber) - 返回指定章的类型(麦加或麦地那)
  • isMakkiSurah(int surahNumber) - 如果指定章是麦加章则返回true
  • isMadaniSurah(int surahNumber) - 如果指定章是麦地那章则返回true

节(Verse)方法

  • getVerse({required int surahNumber, required int verseNumber, QuranLanguage? language}) - 根据给定的章号和节号检索对应的节,可选地指定语言

段(Juz)方法

  • getJuzAsMap() - 返回包含所有段的地图
  • getJuzAsList() - 返回包含所有段的列表
  • getTotalVersesInJuz(int juzNumber) - 返回指定段的总节数
  • getSurahVersesInJuzAsMap(int juzNumber) - 返回指定段内每个章的节作为地图
  • getSurahVersesInJuzAsList(int juzNumber) - 返回指定段内每个章的节作为列表
  • getTotalVersesOfSurahInJuz({required int surahNumber, required int juzNumber}) - 返回指定章在指定段内的总节数
  • getJuzNumber({required int surahNumber, required int verseNumber}) - 返回指定章和节所属的段号

页(Page)方法

  • getPageAsMap() - 返回包含所有页的地图
  • getPageAsList() - 返回包含所有页的列表
  • getTotalVersesInPage(int pageNumber) - 返回指定页的总节数
  • getSurahVersesInPageAsMap(int pageNumber) - 返回指定页内每个章的节作为地图
  • getSurahVersesInPageAsList(int pageNumber) - 返回指定页内每个章的节作为列表
  • getTotalVersesOfSurahInPage({required int surahNumber, required int pageNumber}) - 返回指定章在指定页内的总节数
  • getPageNumber({required int surahNumber, required int verseNumber}) - 返回指定章和节所在的页号

示例代码

下面是一个完整的示例应用程序,演示了如何使用 quran_flutter 包:

import 'package:flutter/material.dart';
import 'package:quran_flutter/quran_flutter.dart';

Future<void> main() async {
  WidgetsFlutterBinding.ensureInitialized();
  await Quran.initialize();
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Quran Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: HomeScreen(),
    );
  }
}

class HomeScreen extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Quran Flutter Demo'),
      ),
      body: Center(
        child: ElevatedButton(
          onPressed: () async {
            // 示例:获取第1章第5节
            Verse verse = Quran.getVerse(surahNumber: 1, verseNumber: 5);
            print(verse.text);

            // 示例:获取第2章的所有节
            List<Verse> verses = Quran.getSurahVersesAsList(2);
            for (var v in verses) {
              print(v.text);
            }

            // 示例:获取第15段的总节数
            int totalVersesInJuz = Quran.getTotalVersesInJuz(15);
            print(totalVersesInJuz);
          },
          child: Text('Get Quran Data'),
        ),
      ),
    );
  }
}

通过以上步骤,您可以轻松地将 quran_flutter 集成到您的Flutter项目中,并利用其提供的功能来展示和操作古兰经文本。


更多关于Flutter古兰经阅读插件quran_flutter的使用的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html

1 回复

更多关于Flutter古兰经阅读插件quran_flutter的使用的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html


当然,以下是如何在Flutter项目中集成和使用quran_flutter插件的详细代码示例。quran_flutter是一个用于阅读和显示古兰经内容的Flutter插件。

1. 添加依赖

首先,在你的pubspec.yaml文件中添加quran_flutter依赖:

dependencies:
  flutter:
    sdk: flutter
  quran_flutter: ^最新版本号  # 请替换为最新版本号

然后运行flutter pub get来安装依赖。

2. 导入包

在你的Dart文件中导入quran_flutter包:

import 'package:quran_flutter/quran_flutter.dart';

3. 使用插件

以下是一个简单的示例,展示如何使用quran_flutter插件来显示古兰经的章节和经文:

import 'package:flutter/material.dart';
import 'package:quran_flutter/quran_flutter.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Quran Reader',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: QuranReaderScreen(),
    );
  }
}

class QuranReaderScreen extends StatefulWidget {
  @override
  _QuranReaderScreenState createState() => _QuranReaderScreenState();
}

class _QuranReaderScreenState extends State<QuranReaderScreen> {
  late QuranController _quranController;

  @override
  void initState() {
    super.initState();
    _quranController = QuranController();
    _quranController.loadQuran();
  }

  @override
  void dispose() {
    _quranController.dispose();
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Quran Reader'),
      ),
      body: Padding(
        padding: const EdgeInsets.all(8.0),
        child: Column(
          children: [
            DropdownButton<int>(
              value: _quranController.currentSurahIndex,
              hint: Text('Select Surah'),
              onChanged: (int? value) {
                setState(() {
                  _quranController.currentSurahIndex = value ?? 0;
                });
              },
              items: List<DropdownMenuItem<int>>.generate(
                _quranController.surahCount,
                (int index) {
                  return DropdownMenuItem<int>(
                    value: index,
                    child: Text('Surah ${index + 1}: ${_quranController.getSurahName(index)}'),
                  );
                },
              ),
            ),
            SizedBox(height: 20),
            Expanded(
              child: ListView.builder(
                itemCount: _quranController.currentSurahAyahCount,
                itemBuilder: (context, index) {
                  return ListTile(
                    title: Text('Ayah ${index + 1}: ${_quranController.getAyahText(index)}'),
                  );
                },
              ),
            ),
          ],
        ),
      ),
    );
  }
}

解释

  1. 依赖管理:在pubspec.yaml中添加quran_flutter依赖。
  2. 导入包:在Dart文件中导入quran_flutter包。
  3. 初始化控制器:在QuranReaderScreen的状态类中初始化QuranController并加载古兰经数据。
  4. UI构建
    • 使用DropdownButton来选择章节(Surah)。
    • 使用ListView.builder来显示当前章节的所有经文(Ayah)。

注意事项

  • 确保在initState中加载古兰经数据,并在dispose中释放资源。
  • 根据quran_flutter插件的文档,确保使用正确的方法和属性。
  • 根据需要自定义UI,例如添加样式、导航等。

这样,你就可以在你的Flutter应用中集成并使用quran_flutter插件来阅读和显示古兰经的内容了。

回到顶部