写点什么

Flutter & 鸿蒙版本数据处理常用总集

作者:淼.
  • 2025-03-14
    北京
  • 本文字数:3383 字

    阅读完需:约 11 分钟

在 Flutter 和鸿蒙 Next 开发中,数据处理是应用开发的核心任务之一。无论是处理本地 JSON 文件、网络请求数据,还是与原生代码进行交互,掌握高效的数据处理方法对于提升开发效率和应用性能至关重要。本文将总结 Flutter 和鸿蒙 Next 中常用的数据处理方法,包括 JSON 数据处理、网络请求、本地存储以及 Flutter 与鸿蒙侧的通信。



一、Flutter 中的数据处理

(一)加载本地 JSON 文件

在 Flutter 中,可以通过 rootBundle 加载本地 JSON 文件,并使用 dart:convert 库进行解析。

示例代码

import 'dart:convert';import 'package:flutter/services.dart';
Future<void> loadJsonData() async { try { // 加载本地 JSON 文件 final String response = await rootBundle.loadString('assets/json/one.json'); // 解析 JSON 数据 final Map<String, dynamic> data = jsonDecode(response); print(data); // 输出解析后的数据 } catch (e) { print("Error loading JSON: $e"); }}
复制代码

(二)JSON 与 Dart 对象的转换

JSON 转 Map

使用 jsonDecode 方法将 JSON 字符串转换为 Map。


import 'dart:convert';
void main() { String jsonString = '{"name": "John", "age": 30}'; Map<String, dynamic> userMap = jsonDecode(jsonString); print(userMap); // 输出: {name: John, age: 30}}
复制代码

Map 转 JSON

使用 jsonEncode 方法将 Map 转换为 JSON 字符串。


import 'dart:convert';
void main() { Map<String, dynamic> userMap = { 'name': 'John', 'age': 30 }; String jsonString = jsonEncode(userMap); print(jsonString); // 输出: {"name":"John","age":30}}
复制代码

JSON 转 Dart 对象

定义一个 Dart 类,并实现 fromJson 工厂构造函数。


import 'dart:convert';
class User { final String name; final int age;
User({required this.name, required this.age});
factory User.fromJson(Map<String, dynamic> json) { return User( name: json['name'], age: json['age'], ); }}
void main() { String jsonString = '{"name": "John", "age": 30}'; Map<String, dynamic> userMap = jsonDecode(jsonString); User user = User.fromJson(userMap); print('Name: ${user.name}, Age: ${user.age}'); // 输出: Name: John, Age: 30}
复制代码

(三)网络请求

使用 http 包发送网络请求,并处理响应数据。

示例代码

import 'package:http/http.dart' as http;import 'dart:convert';
Future<void> fetchData() async { final response = await http.get(Uri.parse('https://api.example.com/data')); if (response.statusCode == 200) { final data = jsonDecode(response.body); print(data); // 处理返回的数据 } else { print('Error: ${response.statusCode}'); }}
复制代码

(四)本地存储

使用 shared_preferences 包存储简单的键值对。

示例代码

import 'package:shared_preferences/shared_preferences.dart';
Future<void> saveData(String key, String value) async { final prefs = await SharedPreferences.getInstance(); await prefs.setString(key, value);}
Future<String?> loadData(String key) async { final prefs = await SharedPreferences.getInstance(); return prefs.getString(key);}
复制代码



二、鸿蒙 Next 中的数据处理

(一)加载本地 JSON 文件

在鸿蒙 Next 中,可以通过 fs 模块加载本地 JSON 文件。

示例代码

import fs from '@ohos.file.fs';
async function loadJsonData() { try { const fileDescriptor = await fs.open('/data/local/tmp/one.json', 'r'); const buffer = new Uint8Array(1024); const bytesRead = await fileDescriptor.read(buffer); const jsonString = new TextDecoder().decode(buffer.slice(0, bytesRead)); const data = JSON.parse(jsonString); console.log(data); // 输出解析后的数据 } catch (e) { console.error('Error loading JSON:', e); }}
复制代码

(二)JSON 与 JavaScript 对象的转换

JSON 转 JavaScript 对象

使用 JSON.parse 方法将 JSON 字符串转换为 JavaScript 对象。


const jsonString = '{"name": "John", "age": 30}';const user = JSON.parse(jsonString);console.log(user); // 输出: { name: 'John', age: 30 }
复制代码

JavaScript 对象转 JSON

使用 JSON.stringify 方法将 JavaScript 对象转换为 JSON 字符串。


const user = { name: 'John', age: 30 };const jsonString = JSON.stringify(user);console.log(jsonString); // 输出: {"name":"John","age":30}
复制代码

(三)网络请求

使用 http 模块发送网络请求。

示例代码

import http from '@ohos.net.http';
async function fetchData() { const request = http.createHttp(); request.request( 'GET', 'https://api.example.com/data', {}, {}, (err, data) => { if (!err) { console.log(JSON.parse(data)); // 处理返回的数据 } else { console.error('Error:', err); } } );}
复制代码

(四)本地存储

使用 kvstore 模块存储简单的键值对。

示例代码

import kvstore from '@ohos.data.kvstore';
async function saveData(key: string, value: string) { const kvStore = await kvstore.createKVStore(); await kvStore.put(key, value);}
async function loadData(key: string) { const kvStore = await kvstore.createKVStore(); return await kvStore.get(key);}
复制代码



三、Flutter 与鸿蒙 Next 的通信

在混合开发中,Flutter 和鸿蒙 Next 之间需要进行数据通信。以下是常见的通信方式。

(一)Flutter 调用鸿蒙原生方法

Flutter 侧

import 'package:flutter/services.dart';
final _platform = const MethodChannel('xyz.zhousg.interview_success_project');
Future<void> openCamera() async { try { final result = await _platform.invokeMethod('openCamera'); print(result); // 处理返回的数据 } catch (e) { print('Error:', e); }}
复制代码

鸿蒙侧

import { MethodChannel, FlutterPluginBinding } from '@ohos/flutter_ohos';
export class NativePlugin implements FlutterPlugin { private channel?: MethodChannel;
getUniqueClassName(): string { return 'CameraPlugin'; }
onAttachedToEngine(binding: FlutterPluginBinding): void { this.channel = new MethodChannel(binding.getBinaryMessenger(), 'xyz.zhousg.interview_success_project'); this.channel.setMethodCallHandler({ onMethodCall: (call, result) => { switch (call.method) { case 'openCamera': this.openCamera(result); break; default: result.notImplemented(); break; } }, }); }
onDetachedFromEngine(binding: FlutterPluginBinding): void { this.channel?.setMethodCallHandler(null); }
openCamera(result: MethodResult) { // 调用鸿蒙原生功能 result.success('http://test.png'); }}
复制代码

(二)鸿蒙调用 Flutter 方法

鸿蒙侧

import { FlutterBoostEntry } from 'flutter_boost';
const flutterEntry = new FlutterBoostEntry(getContext(), router.getParams());const channel = flutterEntry.getChannel();
channel.addEventListener('updateUser', { onEvent: (key, args) => { console.log(`事件名称 ${key}`, JSON.stringify(args)); },});
复制代码

Flutter 侧

import 'package:flutter/services.dart';
TextButton( onPressed: () { Map<String, String> data = {'name': 'jack'}; const MethodChannel('xyz.zhousg.interview_success_project') .invokeMethod('updateUser', data); }, child: const Text('发送消息'),);
复制代码



四、总结

在 Flutter 和鸿蒙 Next 开发中,掌握数据处理和通信的方法是提升开发效率和应用性能的关键。本文总结了以下常用的数据处理方法:


  1. **Flutter

用户头像

淼.

关注

还未添加个人签名 2022-10-24 加入

还未添加个人简介

评论

发布
暂无评论
Flutter & 鸿蒙版本数据处理常用总集_淼._InfoQ写作社区