Flutter提词器插件frame_teleprompter_universal的使用

Flutter提词器插件frame_teleprompter_universal的使用

简介

简单易用的提词器插件，可以从用户设备中加载UTF-8编码的文本文件，并逐行发送到Frame上进行显示。（如果只需要ASCII/Latin文本，可以考虑使用非Unicode纯文本提词器frame_teleprompter。）

通过在应用程序屏幕上上下滑动，可以实现内容的翻页（下一页/上一页）。因此，蓝牙翻页环（例如一些支持"抖音滚动"的蓝牙环）可以用来向前或向后翻页，因为它们通常会模拟鼠标作为HID设备，并在屏幕的某个区域执行点击和拖动操作。

在本仓库中提供了示例文本文件mission_korean.txt（韩语/英语，从左到右）和mission_urdu.txt（乌尔都语，从右到左），但这些文件在运行时不会被Flutter直接使用。您可以将这些文件下载到设备的下载文件夹中，在运行应用时选择它们（或者选择任何其他UTF-8编码的.txt文件）。

特性

  • 调整字体大小（16、32、48、64）
  • 左对齐、右对齐文本（分别适合左到右和右到左的语言）

已知问题

  • 分页仅根据提供的文本文件中的换行符进行。如果您希望更改提词器每页显示的文本量，请编辑您的.txt文件。
  • 不支持自动滚动（按行或按页）。在某些情况下，使用便宜的抖音蓝牙环手动翻页可能是一个不错的解决方案。
  • 将文本渲染为精灵并传输的速度较慢（每行可能需要几秒钟？）比原始frame_teleprompter中的纯文本（几乎即时）要慢。较小的字体大小更快，未来可能会有改进。
  • 显示过多的文本（超过显示屏范围）可能会导致视觉故障。这可能在未来固件或应用程序代码中修复。使用较小的字体大小或调整文本文件中的换行符可以防止此问题。
  • 左/右对齐最适合左到右和右到左文本，且一个设置同时控制两者。例如，左到右文本右对齐时会出现问题，例如标点符号可能会移动到另一侧。
  • .txt文件中的空白行无法正确清除屏幕——这可能在未来固件或应用程序版本中修复。应从输入的.txt文件中删除空行。
  • 在前一页完全绘制完成之前更改字体大小、对齐方式或翻页可能导致问题。取消/停止/开始可以解决大多数问题；内存不足则需要停止/断开连接/重新连接/开始。

使用示例

以下是一个简单的Flutter示例，展示如何使用frame_teleprompter_universal插件：

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

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

class MyApp extends StatelessWidget {
  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      home: TeleprompterPage(),
    );
  }
}

class TeleprompterPage extends StatefulWidget {
  [@override](/user/override)
  _TeleprompterPageState createState() => _TeleprompterPageState();
}

class _TeleprompterPageState extends State<TeleprompterPage> {
  final teleprompter = FrameTeleprompterUniversal();

  [@override](/user/override)
  void initState() {
    super.initState();
    // 初始化提词器
    teleprompter.initialize();
  }

  [@override](/user/override)
  void dispose() {
    // 释放资源
    teleprompter.dispose();
    super.dispose();
  }

  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Flutter 提词器示例'),
      ),
      body: Center(
        child: ElevatedButton(
          onPressed: () {
            // 加载文本文件并开始提词
            teleprompter.loadTextFile('assets/mission_korean.txt');
            teleprompter.start();
          },
          child: Text('开始提词'),
        ),
      ),
    );
  }
}

更多关于Flutter提词器插件frame_teleprompter_universal的使用的实战教程也可以访问 https://www.itying.com/category-92-b0.html

1 回复

更多关于Flutter提词器插件frame_teleprompter_universal的使用的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html


frame_teleprompter_universal 是一个用于在 Flutter 应用中实现提词器功能的插件。它可以帮助你在应用中显示滚动的文本，类似于在视频录制或演讲中使用的提词器。以下是如何使用 frame_teleprompter_universal 插件的基本步骤：

1. 添加依赖

首先，你需要在 pubspec.yaml 文件中添加 frame_teleprompter_universal 插件的依赖：

dependencies:
  flutter:
    sdk: flutter
  frame_teleprompter_universal: ^1.0.0  # 请使用最新版本

然后运行 flutter pub get 来获取依赖。

2. 导入插件

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

import 'package:frame_teleprompter_universal/frame_teleprompter_universal.dart';

3. 使用 FrameTeleprompter 组件

你可以在你的 Flutter 应用中使用 FrameTeleprompter 组件来显示滚动的文本。以下是一个简单的示例：

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

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

class MyApp extends StatelessWidget {
  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text('Flutter Teleprompter'),
        ),
        body: Center(
          child: FrameTeleprompter(
            text: 'This is a sample text for the teleprompter. It will scroll automatically.',
            textStyle: TextStyle(fontSize: 24, color: Colors.black),
            scrollSpeed: 1.0, // 控制滚动速度
            onScrollEnd: () {
              print('Scroll ended');
            },
          ),
        ),
      ),
    );
  }
}

4. 配置参数

FrameTeleprompter 组件提供了多个参数来定制提词器的行为：

  • text: 要显示的文本内容。
  • textStyle: 文本的样式，如字体大小、颜色等。
  • scrollSpeed: 文本滚动的速度，值越大滚动越快。
  • onScrollEnd: 当文本滚动结束时触发的回调函数。

5. 控制滚动

你可以通过 FrameTeleprompterController 来控制文本的滚动。例如，你可以暂停、恢复或重置滚动：

class MyApp extends StatefulWidget {
  [@override](/user/override)
  _MyAppState createState() => _MyAppState();
}

class _MyAppState extends State<MyApp> {
  FrameTeleprompterController _controller = FrameTeleprompterController();

  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text('Flutter Teleprompter'),
        ),
        body: Center(
          child: FrameTeleprompter(
            controller: _controller,
            text: 'This is a sample text for the teleprompter. It will scroll automatically.',
            textStyle: TextStyle(fontSize: 24, color: Colors.black),
            scrollSpeed: 1.0,
            onScrollEnd: () {
              print('Scroll ended');
            },
          ),
        ),
        floatingActionButton: FloatingActionButton(
          onPressed: () {
            _controller.pause(); // 暂停滚动
          },
          child: Icon(Icons.pause),
        ),
      ),
    );
  }
}
回到顶部