🚀运行效果展示

Flutter框架跨平台鸿蒙开发——提词器APP开发流程

📝 前言

随着移动互联网的快速发展，跨平台开发框架已成为移动应用开发的重要趋势。Flutter作为Google推出的开源UI框架，凭借其"一次编写，处处运行"的特性，在跨平台开发领域占据了重要地位。而鸿蒙系统作为华为自主研发的分布式操作系统，也在不断扩大其生态影响力。

本文将详细介绍如何使用Flutter框架开发一款跨平台的提词器APP，该APP可同时运行在鸿蒙系统及其他主流移动操作系统上。我们将从项目规划、核心功能实现到最终部署，完整展示整个开发流程。

📱 提词器APP介绍

功能概述

提词器APP是一款用于辅助演讲、直播、视频录制等场景的工具类应用，主要功能包括：

• ✍️ 文本编辑：支持直接输入和编辑提词文本
• ⏯️ 滚动控制：可调节滚动速度，支持开始、暂停、重置操作
• 🎨 视觉设置：支持调整字体大小、字体颜色、背景颜色
• 🖥️ 全屏模式：提供沉浸式全屏显示体验

应用场景

• 直播主播提词
• 视频拍摄脚本提示
• 演讲者辅助工具
• 新闻播报提词

🏗️ 开发流程

项目初始化

1. 环境搭建

   • 安装Flutter SDK 3.0+
   • 配置鸿蒙开发环境
   • 安装必要的开发工具（Android Studio、DevEco Studio等）

2. 创建项目

   flutter create flutter_harmony_teleprompter
   cd flutter_harmony_teleprompter
   

目录结构设计

采用模块化架构设计，将功能按职责划分到不同目录：

lib/
├── teleprompter/          # 提词器功能模块
│   └── screens/           # 页面组件
│       └── teleprompter_screen.dart  # 提词器主页面
├── screens/               # 应用首页
│   └── home_screen.dart   # 功能导航页
└── main.dart              # 应用入口

核心功能模块划分

模块名称	主要职责	文件位置
文本编辑	提词文本的输入和编辑	teleprompter_screen.dart
滚动控制	提词内容的滚动管理	teleprompter_screen.dart
视觉设置	字体和背景的样式调整	teleprompter_screen.dart
全屏模式	沉浸式显示体验	teleprompter_screen.dart

🔧 核心功能实现及代码展示

1. 文本编辑功能

功能说明：实现提词文本的输入、编辑和预览切换

关键代码：

/// 提词器主屏幕
class TeleprompterScreen extends StatefulWidget {
  const TeleprompterScreen({super.key});

  @override
  State<TeleprompterScreen> createState() => _TeleprompterScreenState();
}

class _TeleprompterScreenState extends State<TeleprompterScreen> {
  /// 提词文本
  String _scriptText = '';
  
  /// 是否编辑模式
  bool _isEditMode = false;
  
  /// 文本编辑控制器
  final TextEditingController _textController = TextEditingController();
  
  /// 焦点节点
  final FocusNode _focusNode = FocusNode();
  
  /// 切换到编辑模式
  void _switchToEditMode() {
    _resetScrolling();
    setState(() {
      _isEditMode = true;
    });
    // 延迟请求焦点，确保UI更新后再获取焦点
    Future.delayed(const Duration(milliseconds: 100), () {
      _focusNode.requestFocus();
    });
  }
  
  /// 切换到预览模式
  void _switchToPreviewMode() {
    setState(() {
      _isEditMode = false;
      _scriptText = _textController.text;
    });
    _focusNode.unfocus();
  }
  
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      // ... 其他代码
      body: SafeArea(
        child: Column(
          children: [
            // 提词显示区域
            Expanded(
              child: SingleChildScrollView(
                controller: _scrollController,
                child: Container(
                  padding: const EdgeInsets.all(24.0),
                  child: _isEditMode
                      ? TextField(
                          controller: _textController,
                          focusNode: _focusNode,
                          style: TextStyle(
                            fontSize: _fontSize,
                            color: _fontColor,
                          ),
                          decoration: const InputDecoration(
                            border: InputBorder.none,
                            hintText: '在此输入提词文本...',
                            hintStyle: TextStyle(color: Colors.grey),
                          ),
                          maxLines: null,
                          onChanged: _updateText,
                        )
                      : Text(
                          _scriptText.isEmpty ? '点击编辑按钮输入提词文本' : _scriptText,
                          style: TextStyle(
                            fontSize: _fontSize,
                            color: _fontColor,
                            height: 1.8,
                          ),
                          textAlign: TextAlign.center,
                        ),
                ),
              ),
            ),
            // ... 控制区域代码
          ],
        ),
      ),
    );
  }
}

2. 滚动控制功能

功能说明：实现提词文本的平滑滚动，支持速度调节和状态控制

关键代码：

/// 滚动控制器
final ScrollController _scrollController = ScrollController();

/// 开始滚动
void _startScrolling() {
  setState(() {
    _isScrolling = true;
  });
  
  // 计算总滚动距离和时间
  final double maxScrollExtent = _scrollController.position.maxScrollExtent;
  final double durationSeconds = maxScrollExtent * _scrollSpeed / 100;
  
  // 执行平滑滚动
  _scrollController.animateTo(
    maxScrollExtent,
    duration: Duration(seconds: durationSeconds.toInt()),
    curve: Curves.linear,
  );
}

/// 暂停滚动
void _pauseScrolling() {
  setState(() {
    _isScrolling = false;
  });
  // 保存当前滚动位置
  final double currentPosition = _scrollController.offset;
  // 通过跳转到当前位置来停止动画
  _scrollController.jumpTo(currentPosition);
}

/// 重置滚动位置
void _resetScrolling() {
  setState(() {
    _isScrolling = false;
  });
  _scrollController.jumpTo(0);
}

// 滚动控制UI
Row(
  mainAxisAlignment: MainAxisAlignment.center,
  children: [
    IconButton(
      onPressed: _resetScrolling,
      icon: const Icon(Icons.refresh, color: Colors.white),
      tooltip: '重置',
    ),
    const SizedBox(width: 16),
    IconButton(
      onPressed: _isScrolling ? _pauseScrolling : _startScrolling,
      icon: Icon(
        _isScrolling ? Icons.pause : Icons.play_arrow,
        color: Colors.white,
        size: 32,
      ),
      tooltip: _isScrolling ? '暂停' : '开始',
    ),
    const SizedBox(width: 16),
    IconButton(
      onPressed: _toggleFullScreen,
      icon: Icon(
        _isFullScreen ? Icons.fullscreen_exit : Icons.fullscreen,
        color: Colors.white,
      ),
      tooltip: _isFullScreen ? '退出全屏' : '进入全屏',
    ),
  ],
),

3. 视觉设置功能

功能说明：支持调整字体大小、字体颜色和背景颜色，提升用户体验

关键代码：

/// 字体大小调节
Column(
  children: [
    Text(
      '字体大小: ${_fontSize.toInt()}',
      style: const TextStyle(color: Colors.white),
    ),
    Slider(
      value: _fontSize,
      min: 16.0,
      max: 72.0,
      divisions: 56,
      label: _fontSize.toInt().toString(),
      activeColor: _fontColor,
      onChanged: (value) {
        setState(() {
          _fontSize = value;
        });
      },
    ),
  ],
),

/// 字体颜色选择
Row(
  mainAxisAlignment: MainAxisAlignment.spaceEvenly,
  children: [
    const Text(
      '字体颜色:',
      style: TextStyle(color: Colors.white),
    ),
    Wrap(
      spacing: 8.0,
      children: [
        _buildColorOption(Colors.white),
        _buildColorOption(Colors.yellow),
        _buildColorOption(Colors.green),
        _buildColorOption(Colors.red),
      ],
    ),
  ],
),

/// 构建字体颜色选择选项
Widget _buildColorOption(Color color) {
  return GestureDetector(
    onTap: () {
      setState(() {
        _fontColor = color;
      });
    },
    child: Container(
      width: 32,
      height: 32,
      decoration: BoxDecoration(
        color: color,
        borderRadius: BorderRadius.circular(16),
        border: _fontColor == color
            ? Border.all(width: 3, color: Colors.white)
            : null,
      ),
    ),
  );
}

4. 全屏模式

功能说明：实现沉浸式全屏显示，提供更好的提词体验

关键代码：

import 'package:flutter/services.dart';

/// 切换全屏模式
void _toggleFullScreen() {
  setState(() {
    _isFullScreen = !_isFullScreen;
  });
  
  if (_isFullScreen) {
    // 进入全屏模式
    SystemChrome.setEnabledSystemUIMode(SystemUiMode.immersiveSticky);
  } else {
    // 退出全屏模式
    SystemChrome.setEnabledSystemUIMode(SystemUiMode.edgeToEdge);
  }
}

@override
void dispose() {
  _scrollController.dispose();
  _textController.dispose();
  _focusNode.dispose();
  // 恢复系统UI模式
  SystemChrome.setEnabledSystemUIMode(SystemUiMode.edgeToEdge);
  super.dispose();
}

📊 开发流程图

🎯 鸿蒙系统适配

1. 配置鸿蒙开发环境

• 安装DevEco Studio
• 配置鸿蒙SDK
• 安装Flutter HarmonyOS插件

2. 项目配置

在项目根目录下创建鸿蒙相关配置文件：

• ohos/ 目录：存放鸿蒙特定代码和资源
• ohos/build-profile.json5：鸿蒙构建配置
• ohos/module.json5：鸿蒙模块配置

3. 构建鸿蒙应用

flutter build ohos

该命令会生成鸿蒙应用包（.hap文件），可直接安装到鸿蒙设备上运行。

📱 应用测试

1. 模拟器测试

• 使用HarmonyOS模拟器测试应用功能
• 验证跨平台兼容性

2. 真机测试

• 在鸿蒙设备上安装并测试
• 验证性能和稳定性

3. 自动化测试

void main() {
  testWidgets('Teleprompter UI test', (WidgetTester tester) async {
    // 构建提词器应用
    await tester.pumpWidget(const MaterialApp(home: TeleprompterScreen()));
    
    // 测试编辑按钮点击
    await tester.tap(find.text('编辑'));
    await tester.pump();
    
    // 测试文本输入
    await tester.enterText(find.byType(TextField), '测试提词文本');
    await tester.pump();
    
    // 测试预览按钮点击
    await tester.tap(find.text('预览'));
    await tester.pump();
  });
}

📈 性能优化

1. 滚动性能优化

• 使用ScrollController的animateTo方法实现平滑滚动
• 优化滚动计算逻辑，避免不必要的重绘

2. 内存管理

• 及时释放资源，在dispose方法中清理控制器和焦点节点
• 避免内存泄漏

3. UI渲染优化

• 使用const构造函数创建不可变Widget
• 合理使用StatefulWidget和StatelessWidget

📋 总结

本文详细介绍了使用Flutter框架开发跨平台鸿蒙提词器APP的完整流程，包括项目初始化、核心功能实现、鸿蒙适配和性能优化等方面。通过Flutter的跨平台特性，我们可以高效地开发出同时兼容鸿蒙及其他主流操作系统的应用，大大提高了开发效率和代码复用率。

提词器APP虽然功能相对简单，但涵盖了Flutter开发的核心概念和技术点，包括状态管理、UI布局、动画效果、系统API调用等。这些技术点对于开发更复杂的Flutter应用具有重要的参考价值。

随着Flutter和鸿蒙生态的不断发展，跨平台开发将迎来更多的机遇和挑战。我们期待看到更多基于Flutter开发的优秀鸿蒙应用出现，共同推动跨平台开发技术的进步。

📚 参考资料

1. Flutter官方文档
2. HarmonyOS官方文档
3. Flutter HarmonyOS插件
4. Dart编程语言文档

---

欢迎加入开源鸿蒙跨平台社区：https://openharmonycrossplatform.csdn.net