Flutter故事引擎插件gladstoriesengine的使用

Flutter 故事引擎插件 GladStoriesEngine 的使用

GladStoriesEngine 是一个用 Dart 实现的互动小说故事格式的运行时和编辑器。它允许开发者创建复杂的互动小说故事，并在 Flutter 应用程序中运行。

示例代码

以下是一个完整的示例代码，展示了如何使用 GladStoriesEngine 插件来创建和运行一个简单的互动小说故事。

import 'package:gladstoriesengine/gladstoriesengine.dart';

void main() {
  // 创建第一个页面
  var rootPage = Page(
    nodes: [
      // 页面有两个段落 "Test" 和 "Second"
      PageNode(text: "Test"),
      PageNode(text: "Second"),
    ],
    // 在最后一个段落被访问后，读者应该选择下一个选项数组中的一个选项
    next: [
      PageNext(
        text: "Go to next page", // 这个选项的文字是 "Go to next page"
        // 当用户选择 "Go to next page" 后，将要读取的下一页
        nextPage: Page(
          nodes: [
            PageNode(text: "inner node"), // 下一页的第一个节点的文字是 "inner node"
          ],
          endType: EndType.ALIVE, // 结束类型为 ALIVE
          next: [], // 下一个选项为空列表
        ),
      ),
    ],
  );

  // 初始化故事，包含作者、标题、描述、年份、根页面和当前页面
  var story = Story(
    authors: "Authors",
    title: "Title",
    description: "Test Description",
    year: 1648,
    root: rootPage,
    currentPage: rootPage,
  );

  // 检查故事是否可以继续
  print(story.canContinue()); // 输出 true

  // 获取当前页面的文本
  print(story.currentPage.getCurrentText()); // 输出 "Test"

  // 继续到下一个节点
  story.doContinue();

  // 获取新的当前文本
  print(story.currentPage.getCurrentText()); // 输出 "Second"

  // 如果故事不能自动继续，因为页面已达到其最后一个段落
  if (!story.canContinue()) {
    // 打印可用的下一个选项
    story.currentPage.next.forEach((nextNode) => print(nextNode.text)); // 输出 "Go to next page"

    // 使用 goToNextPage 并传递 PageNext 的引用
    // 这个操作会将 "Go to next page"（下一个选项的名称）和 "inner node"（下一页的第一个节点）添加到历史记录数组中
    story.goToNextPage(story.currentPage.next[0]); // 切换到下一页
  }

  // 检查故事是否可以继续
  print(story.canContinue()); // 输出 false

  // 打印故事的历史记录
  print(story.history.map((f) => f.text).toList()); // 输出 [Test, Second, Go to next page, inner node]

  // 当前页面定义了 'endType'，意味着故事将在该页面结束，可以选择 EndType.ALIVE 或 EndType.DEAD
  print(story.currentPage.isTheEnd()); // 输出 true
  print(story.currentPage.endType); // 输出 EndType.ALIVE
}

运行测试

如果你想运行测试并生成覆盖率报告，可以参考以下步骤：

  1. 安装 coverage 包：

    pub global activate coverage

  2. 安装 genhtml 和 lcov 工具：

    brew install lcov

  3. 运行脚本生成覆盖率报告：

    ./scripts/generate_coverage.sh

  4. 查看 LCOV 报告：

    open ./coverage/index.html

更多关于Flutter故事引擎插件gladstoriesengine的使用的实战教程也可以访问 https://www.itying.com/category-92-b0.html

1 回复

更多关于Flutter故事引擎插件gladstoriesengine的使用的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html


当然，关于Flutter中的gladstoriesengine插件的使用，这里提供一个简单的代码示例来展示如何集成和使用该插件。请注意，由于gladstoriesengine是一个第三方插件，具体的API和功能可能会有所不同，以下代码示例基于假设的API结构和常见的Flutter插件使用模式。

首先，确保你已经在pubspec.yaml文件中添加了gladstoriesengine依赖：

dependencies:
  flutter:
    sdk: flutter
  gladstoriesengine: ^最新版本号  # 替换为实际的最新版本号

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

接下来，在你的Flutter应用中，你可以按照以下步骤使用gladstoriesengine插件：

  1. 导入插件：

在你的Dart文件中导入gladstoriesengine插件：

import 'package:gladstoriesengine/gladstoriesengine.dart';
  1. 初始化引擎：

通常，插件的使用需要初始化。这里假设GladStoriesEngine是插件的主要类，并且它有一个初始化方法。

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    // 初始化 GladStoriesEngine
    GladStoriesEngine.instance.initialize().then((_) {
      // 初始化完成后运行应用
      runApp(MaterialApp(
        home: StoryScreen(),
      ));
    }).catchError((error) {
      // 处理初始化错误
      print('Initialization failed: $error');
    });
    
    // 返回一个临时的加载屏幕或空容器，直到初始化完成
    return Container();
  }
}

注意：上述代码中的初始化方式可能会导致UI在初始化完成前显示一个空白的容器。在实际应用中，你可能需要更优雅地处理这种异步初始化，比如使用FutureBuilder。

  1. 使用故事引擎：

在你的故事屏幕中，使用GladStoriesEngine提供的方法来加载和显示故事。

class StoryScreen extends StatefulWidget {
  @override
  _StoryScreenState createState() => _StoryScreenState();
}

class _StoryScreenState extends State<StoryScreen> {
  String? currentStoryPart;

  @override
  void initState() {
    super.initState();
    // 加载故事的第一部分
    loadStoryPart(1);
  }

  void loadStoryPart(int partNumber) async {
    try {
      String storyPart = await GladStoriesEngine.instance.loadStoryPart(partNumber);
      setState(() {
        currentStoryPart = storyPart;
      });
    } catch (error) {
      print('Failed to load story part: $error');
    }
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Story Screen'),
      ),
      body: Center(
        child: currentStoryPart == null
            ? CircularProgressIndicator()
            : Text(currentStoryPart!),
      ),
      floatingActionButton: FloatingActionButton(
        onPressed: () {
          // 假设有一个方法来加载下一个故事部分
          int nextPartNumber = int.parse(currentStoryPart!.split(' ').last) + 1;
          loadStoryPart(nextPartNumber);
        },
        tooltip: 'Load Next Part',
        child: Icon(Icons.navigate_next),
      ),
    );
  }
}

在这个示例中，我们假设loadStoryPart方法根据部分编号加载故事的一部分，并且故事的部分编号可能以某种方式嵌入在文本中（例如，作为文本的最后一部分）。这是一个非常简化的示例，实际应用中你可能需要根据gladstoriesengine插件提供的具体API来调整代码。

注意：上述代码是基于假设的API和功能编写的，实际使用时请查阅gladstoriesengine插件的官方文档和示例代码，以确保正确集成和使用该插件。如果插件提供了更高级的功能（如故事管理、用户交互等），你可能需要进一步探索其API并相应地调整你的代码。

回到顶部