Flutter for OpenHarmony 实战：行排序工具：对多行文本进行升序或降序排列。
在移动开发领域，我们总是面临着选择与适配。今天，你的Flutter应用在Android和iOS上跑得正欢，明天可能就需要考虑一个新的平台：HarmonyOS（鸿蒙）。这不是一道选答题，而是很多团队正在面对的现实。Flutter的优势很明确——写一套代码，就能在两个主要平台上运行，开发体验流畅。而鸿蒙代表的是下一个时代的互联生态，它不仅仅是手机系统，更着眼于未来全场景的体验。
·
欢迎加入开源鸿蒙跨平台社区： https://openharmonycrossplatform.csdn.net
前言：跨生态开发的新机遇 {#前言跨生态开发的新机遇}
在移动开发领域，我们总是面临着选择与适配。今天，你的Flutter应用在Android和iOS上跑得正欢，明天可能就需要考虑一个新的平台：HarmonyOS（鸿蒙）。这不是一道选答题，而是很多团队正在面对的现实。
Flutter的优势很明确——写一套代码，就能在两个主要平台上运行，开发体验流畅。而鸿蒙代表的是下一个时代的互联生态，它不仅仅是手机系统，更着眼于未来全场景的体验。将现有的Flutter应用适配到鸿蒙，听起来像是一个“跨界”任务，但它本质上是一次有价值的技术拓展：让产品触达更多用户，也让技术栈覆盖更广。
不过，这条路走起来并不像听起来那么简单。Flutter和鸿蒙，从底层的架构到上层的工具链，都有着各自的设计逻辑。会遇到一些具体的问题：代码如何组织？原有的功能在鸿蒙上如何实现？那些平台特有的能力该怎么调用？更实际的是，从编译打包到上架部署，整个流程都需要重新摸索。
这篇文章想做的，就是把这些我们趟过的路、踩过的坑，清晰地摊开给你看。我们不会只停留在“怎么做”，还会聊到“为什么得这么做”，以及“如果出了问题该往哪想”。这更像是一份实战笔记，源自真实的项目经验，聚焦于那些真正卡住过我们的环节。
无论你是在为一个成熟产品寻找新的落地平台，还是从一开始就希望构建能面向多端的应用，这里的思路和解决方案都能提供直接的参考。理解了两套体系之间的异同，掌握了关键的衔接技术，不仅能完成这次迁移，更能积累起应对未来技术变化的能力。
混合工程结构深度解析 {#混合工程结构深度解析}
项目目录架构
当Flutter项目集成鸿蒙支持后，典型的项目结构会发生显著变化。以下是经过ohos_flutter插件初始化后的项目结构：
my_flutter_harmony_app/
├── lib/ # Flutter业务代码（基本不变）
│ ├── main.dart # 应用入口
│ ├── home_page.dart # 首页
│ └── utils/
│ └── platform_utils.dart # 平台工具类
├── pubspec.yaml # Flutter依赖配置
├── ohos/ # 鸿蒙原生层（核心适配区）
│ ├── entry/ # 主模块
│ │ └── src/main/
│ │ ├── ets/ # ArkTS代码
│ │ │ ├── MainAbility/
│ │ │ │ ├── MainAbility.ts # 主Ability
│ │ │ │ └── MainAbilityContext.ts
│ │ │ └── pages/
│ │ │ ├── Index.ets # 主页面
│ │ │ └── Splash.ets # 启动页
│ │ ├── resources/ # 鸿蒙资源文件
│ │ │ ├── base/
│ │ │ │ ├── element/ # 字符串等
│ │ │ │ ├── media/ # 图片资源
│ │ │ │ └── profile/ # 配置文件
│ │ │ └── en_US/ # 英文资源
│ │ └── config.json # 应用核心配置
│ ├── ohos_test/ # 测试模块
│ ├── build-profile.json5 # 构建配置
│ └── oh-package.json5 # 鸿蒙依赖管理
└── README.md
展示效果图片 {#展示效果图片}
flutter 实时预览 效果展示
运行到鸿蒙虚拟设备中效果展示
目录
功能代码实现 {#功能代码实现}
核心排序工具类 {#核心排序工具类}
核心排序工具类是行排序工具的基础，负责实现文本行的排序功能。
核心功能
- 对多行文本进行升序排序
- 对多行文本进行降序排序
- 解析输入文本为行列表
- 将排序后的行列表转换为文本
实现代码
class LineSorter {
static List<String> sortLines(List<String> lines, bool ascending) {
final sortedLines = List<String>.from(lines);
sortedLines.sort((a, b) {
if (ascending) {
return a.compareTo(b);
} else {
return b.compareTo(a);
}
});
return sortedLines;
}
static List<String> parseTextToLines(String text) {
return text.split('\n').map((line) => line.trim()).where((line) => line.isNotEmpty).toList();
}
static String joinLinesToText(List<String> lines) {
return lines.join('\n');
}
}
使用方法
// 解析文本为行列表
final lines = LineSorter.parseTextToLines('banana\napple\norange');
// 升序排序
final sortedAsc = LineSorter.sortLines(lines, true);
print(sortedAsc); // 输出: [apple, banana, orange]
// 降序排序
final sortedDesc = LineSorter.sortLines(lines, false);
print(sortedDesc); // 输出: [orange, banana, apple]
// 将行列表转换为文本
final sortedText = LineSorter.joinLinesToText(sortedAsc);
print(sortedText); // 输出: apple\nbanana\norange
开发注意事项
- 数据处理：使用
List<String>.from()创建列表的副本，避免修改原始列表 - 字符串处理：使用
trim()去除每行文本的前后空白，使用where()过滤空行 - 排序逻辑：根据
ascending参数选择升序或降序排序 - 性能考虑：对于大量文本行的排序，考虑使用更高效的排序算法
排序工具组件 {#排序工具组件}
排序工具组件是行排序工具的用户界面，负责接收用户输入并显示排序结果。
核心功能
- 文本输入区域，用于输入要排序的多行文本
- 排序方式选择（升序/降序）
- 排序按钮，用于执行排序操作
- 清空按钮，用于清空输入和输出
- 错误提示，当输入为空时显示
- 排序结果显示区域
- 使用说明，帮助用户了解如何使用排序工具
实现代码
import 'package:flutter/material.dart';
import 'line_sorter.dart';
class SorterWidget extends StatefulWidget {
const SorterWidget({Key? key}) : super(key: key);
_SorterWidgetState createState() => _SorterWidgetState();
}
class _SorterWidgetState extends State<SorterWidget> {
final TextEditingController _inputController = TextEditingController();
final TextEditingController _outputController = TextEditingController();
bool _isAscending = true;
String _errorMessage = '';
void _sortLines() {
setState(() {
_errorMessage = '';
final inputText = _inputController.text.trim();
if (inputText.isEmpty) {
_errorMessage = '请输入要排序的文本';
return;
}
final lines = LineSorter.parseTextToLines(inputText);
if (lines.isEmpty) {
_errorMessage = '请输入有效的文本行';
return;
}
final sortedLines = LineSorter.sortLines(lines, _isAscending);
final sortedText = LineSorter.joinLinesToText(sortedLines);
_outputController.text = sortedText;
});
}
void _clearAll() {
setState(() {
_inputController.clear();
_outputController.clear();
_errorMessage = '';
});
}
void _toggleSortOrder() {
setState(() {
_isAscending = !_isAscending;
});
}
void dispose() {
_inputController.dispose();
_outputController.dispose();
super.dispose();
}
Widget build(BuildContext context) {
return Container(
padding: const EdgeInsets.all(20.0),
child: Column(
crossAxisAlignment: CrossAxisAlignment.stretch,
children: [
// 输入区域
Container(
margin: const EdgeInsets.only(bottom: 20.0),
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Text(
'输入文本',
style: TextStyle(
fontSize: 18,
fontWeight: FontWeight.w500,
),
),
SizedBox(height: 8),
TextField(
controller: _inputController,
maxLines: 6,
decoration: InputDecoration(
hintText: '请输入多行文本，每行一条...',
border: OutlineInputBorder(
borderRadius: BorderRadius.circular(8),
),
contentPadding: EdgeInsets.all(12),
),
),
],
),
),
// 控制按钮
Container(
margin: const EdgeInsets.only(bottom: 20.0),
child: Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: [
Row(
children: [
Switch(
value: _isAscending,
onChanged: (value) => _toggleSortOrder(),
),
Text(
_isAscending ? '升序排序' : '降序排序',
style: TextStyle(fontSize: 16),
),
],
),
Row(
children: [
ElevatedButton(
onPressed: _sortLines,
style: ElevatedButton.styleFrom(
backgroundColor: Colors.blue,
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(8),
),
padding: EdgeInsets.symmetric(vertical: 12, horizontal: 24),
),
child: Text(
'排序',
style: TextStyle(fontSize: 16),
),
),
SizedBox(width: 10),
ElevatedButton(
onPressed: _clearAll,
style: ElevatedButton.styleFrom(
backgroundColor: Colors.grey,
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(8),
),
padding: EdgeInsets.symmetric(vertical: 12, horizontal: 24),
),
child: Text(
'清空',
style: TextStyle(fontSize: 16),
),
),
],
),
],
),
),
// 错误提示
if (_errorMessage.isNotEmpty)
Container(
margin: const EdgeInsets.only(bottom: 20.0),
padding: EdgeInsets.all(12),
decoration: BoxDecoration(
color: Colors.red[100],
borderRadius: BorderRadius.circular(8),
border: Border.all(color: Colors.red[300]!),
),
child: Text(
_errorMessage,
style: TextStyle(color: Colors.red[700]),
),
),
// 输出区域
Container(
margin: const EdgeInsets.only(bottom: 20.0),
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Text(
'排序结果',
style: TextStyle(
fontSize: 18,
fontWeight: FontWeight.w500,
),
),
SizedBox(height: 8),
TextField(
controller: _outputController,
maxLines: 6,
readOnly: true,
decoration: InputDecoration(
hintText: '排序结果将显示在这里...',
border: OutlineInputBorder(
borderRadius: BorderRadius.circular(8),
),
contentPadding: EdgeInsets.all(12),
filled: true,
fillColor: Colors.grey[50],
),
),
],
),
),
// 使用说明
Container(
margin: const EdgeInsets.only(top: 30.0),
padding: EdgeInsets.all(16),
decoration: BoxDecoration(
color: Colors.grey[100],
borderRadius: BorderRadius.circular(8),
),
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Text(
'使用说明：',
style: TextStyle(
fontSize: 16,
fontWeight: FontWeight.w500,
),
),
SizedBox(height: 8),
Text('1. 在输入文本区域输入要排序的多行文本，每行一条'),
Text('2. 选择排序方式（升序或降序）'),
Text('3. 点击"排序"按钮对文本进行排序'),
Text('4. 排序结果将显示在输出区域'),
Text('5. 点击"清空"按钮可以清空所有内容'),
],
),
),
],
),
);
}
}
开发注意事项
- 状态管理：使用StatefulWidget和setState管理组件的状态变化，确保界面能够实时反映状态变化
- 内存管理：在dispose方法中释放TextEditingController，避免内存泄漏
- 用户反馈：添加错误提示和使用说明，提高用户体验
- 布局设计：使用Column和Container等布局组件构建美观的用户界面
- 交互设计：实现按钮点击事件和开关切换功能，提供清晰的用户交互
主页面集成 {#主页面集成}
主页面集成排序工具组件，确保在首页直接显示行排序工具的效果。
核心功能
- 集成排序工具组件
- 提供标题和说明文字
- 确保页面内容可以滚动
实现代码
import 'package:flutter/material.dart';
import 'sorter_widget.dart';
class SorterHome extends StatefulWidget {
const SorterHome({Key? key}) : super(key: key);
_SorterHomeState createState() => _SorterHomeState();
}
class _SorterHomeState extends State<SorterHome> {
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text('行排序工具'),
backgroundColor: Theme.of(context).colorScheme.inversePrimary,
),
body: SingleChildScrollView(
child: Column(
children: [
// 标题部分
Container(
padding: const EdgeInsets.all(20.0),
child: Column(
crossAxisAlignment: CrossAxisAlignment.center,
children: [
Text(
'行排序工具',
style: TextStyle(
fontSize: 28,
fontWeight: FontWeight.bold,
),
),
SizedBox(height: 8),
Text(
'对多行文本进行升序或降序排列',
style: TextStyle(
fontSize: 16,
color: Colors.grey[600],
),
),
],
),
),
// 排序工具组件
SorterWidget(),
],
),
),
);
}
}
开发注意事项
- 布局设计：使用SingleChildScrollView包装Column，确保内容在小屏幕上也能完整显示
- 组件集成：将排序工具组件集成到主页面中，确保在首页直接显示效果
- 标题设计：添加清晰的标题和说明文字，帮助用户了解应用功能
- 样式统一：保持应用的整体样式统一，确保视觉效果协调
应用入口配置 {#应用入口配置}
应用入口文件负责配置应用的主页面，确保行排序工具能够在首页直接显示。
核心功能
- 配置应用主题和标题
- 设置主页面为SorterHome
- 确保应用能够正常启动和运行
实现代码
import 'package:flutter/material.dart';
import 'sorter/sorter_home.dart';
void main() {
runApp(const MyApp());
}
class MyApp extends StatelessWidget {
const MyApp({super.key});
Widget build(BuildContext context) {
return MaterialApp(
title: 'Flutter for openHarmony',
theme: ThemeData(
colorScheme: ColorScheme.fromSeed(seedColor: Colors.deepPurple),
useMaterial3: true,
),
debugShowCheckedModeBanner: false,
home: const MyHomePage(title: 'Flutter for openHarmony'),
);
}
}
class MyHomePage extends StatefulWidget {
const MyHomePage({super.key, required this.title});
final String title;
State<MyHomePage> createState() => _MyHomePageState();
}
class _MyHomePageState extends State<MyHomePage> {
Widget build(BuildContext context) {
return SorterHome();
}
}
开发注意事项
- 导入路径：确保正确导入SorterHome组件
- 主题配置：合理配置应用主题，确保界面美观
- 页面设置：正确设置主页面，确保应用启动后能够直接显示行排序工具的效果
- 调试模式：在发布版本中关闭debugShowCheckedModeBanner，提高应用的专业感
开发中容易遇到的问题 {#开发中容易遇到的问题}
1. 文本解析问题
问题描述
输入的多行文本解析不正确，导致排序结果不符合预期。
原因分析
可能的原因包括：
- 文本中的换行符格式不一致（如\n、\r\n等）
- 文本中包含多余的空白字符
- 文本中包含空行，影响排序结果
解决方案
- 使用
split('\n')解析文本为行列表，处理不同格式的换行符 - 使用
trim()去除每行文本的前后空白 - 使用
where((line) => line.isNotEmpty)过滤空行 - 确保解析逻辑能够处理各种特殊情况
2. 排序性能问题
问题描述
当输入大量文本行时，排序操作可能会导致应用卡顿。
原因分析
可能的原因包括：
- 排序算法效率不高
- 大量文本行的排序操作在主线程执行，阻塞UI
- 排序过程中没有提供加载状态提示
解决方案
- 使用高效的排序算法，如Dart内置的
sort()方法 - 对于大量文本行的排序，考虑使用Isolate在后台线程执行
- 添加加载状态提示，提高用户体验
- 合理设置文本输入的最大行数限制
3. 布局溢出问题
问题描述
页面内容过多，导致布局溢出，出现黄色和黑色条纹的溢出警告。
原因分析
Column组件默认会尝试适应所有子组件的大小，如果子组件总高度超过屏幕高度，就会发生溢出。
解决方案
- 使用SingleChildScrollView包装Column，使内容可以滚动
- 合理设置组件的margin和padding，避免不必要的空间占用
- 考虑使用ListView或GridView等滚动组件来替代Column
- 对于长文本输入，设置合理的maxLines值
4. 状态管理问题
问题描述
输入内容或排序结果没有及时更新，界面显示不正确。
原因分析
可能的原因包括：
- 没有使用setState方法更新状态
- 状态更新的作用域不正确
- 异步操作中没有正确处理状态更新
解决方案
- 在状态变化时调用setState方法通知Flutter框架重建UI
- 确保状态变量的作用域正确，能够被setState方法访问
- 在异步操作中，确保状态更新在正确的时机调用
5. 内存泄漏问题
问题描述
应用运行时间过长后，内存使用量不断增加，可能导致应用崩溃。
原因分析
可能的原因包括：
- 没有在dispose方法中释放TextEditingController
- 没有取消订阅Stream或其他资源
- 存在循环引用
解决方案
- 在StatefulWidget的dispose方法中释放TextEditingController
- 取消订阅所有Stream和其他资源
- 避免创建不必要的对象和引用
- 使用WeakReference等机制避免循环引用
总结开发中用到的技术点 {#总结开发中用到的技术点}
1. 文本处理技术
技术原理：使用Dart的字符串处理方法，如split()、trim()、where()等，实现文本的解析和格式化。
应用场景：适用于需要处理多行文本的场景，如文本排序、文本分析等。
实现要点：
- 使用
split('\n')将文本解析为行列表 - 使用
trim()去除每行文本的前后空白 - 使用
where((line) => line.isNotEmpty)过滤空行 - 使用
join('\n')将行列表转换为文本
2. 排序算法
技术原理：使用Dart内置的sort()方法对文本行进行排序，支持升序和降序排列。
应用场景：适用于需要对数据进行排序的场景，如文本行排序、列表排序等。
实现要点：
- 使用
List<String>.from()创建列表的副本，避免修改原始列表 - 根据
ascending参数选择升序或降序排序 - 使用
compareTo()方法比较字符串的大小 - 确保排序逻辑能够处理各种特殊情况
3. 状态管理
技术原理：使用StatefulWidget和setState方法管理组件的状态变化，实现界面与数据的同步。
应用场景：适用于需要根据用户交互或其他因素动态改变组件状态的场景，如表单输入、按钮状态等。
实现要点：
- 使用StatefulWidget创建有状态的组件
- 在状态变化时调用setState方法通知Flutter框架重建UI
- 合理设计状态变量，避免状态管理混乱
- 在dispose方法中释放资源，避免内存泄漏
4. 布局设计
技术原理：使用Flutter的布局组件（如Column、Container、SingleChildScrollView等）构建灵活的用户界面。
应用场景：适用于构建各种复杂的用户界面，如表单、列表、详情页等。
实现要点：
- 使用Column和Row组件构建页面的整体布局结构
- 使用Container组件设置组件的边距、内边距和装饰
- 使用SingleChildScrollView解决布局溢出问题
- 合理设置组件的padding和margin，调整组件间距
5. 用户交互
技术原理：通过各种交互组件和手势检测，实现用户与应用的交互。
应用场景：适用于需要响应用户操作的场景，如按钮点击、开关切换等。
实现要点：
- 使用ElevatedButton组件实现按钮点击事件
- 使用Switch组件实现排序方式的切换
- 使用TextField组件实现文本输入
- 实现清晰的错误提示和使用说明
6. 组件化开发
技术原理：将UI拆分为独立的、可复用的组件，提高代码的可维护性和复用性。
应用场景：适用于构建复杂的用户界面，如将排序功能封装为独立组件。
实现要点：
- 设计清晰的组件接口，通过参数传递数据和回调函数
- 合理划分组件职责，提高代码的可读性
- 使用参数化设计，支持组件功能的自定义
- 将业务逻辑与UI界面分离，提高代码的可测试性
通过以上技术点的应用，我们成功实现了一个功能完整、用户体验良好的行排序工具应用，并在Flutter for OpenHarmony平台上正常运行。这些技术点不仅适用于本次开发，也是Flutter开发中的通用技术，掌握它们对于构建高质量的Flutter应用至关重要。
欢迎加入开源鸿蒙跨平台社区： https://openharmonycrossplatform.csdn.net
开源鸿蒙跨平台开发社区汇聚开发者与厂商，共建“一次开发，多端部署”的开源生态，致力于降低跨端开发门槛，推动万物智联创新。
更多推荐
8
0- 0
已为社区贡献22条内容
所有评论(0)