当前位置：首页 > news >正文

【Flutter】多线程

news 2025/7/31 20:01:06

Flutter 作为一个跨平台的UI库，前面的Flutter 架构有涉及到，Flutter 架构中的运行的多个线程。那么最为一个Flutter开发者，我们如何创建线程呢

多线程

上述我们提及到了，架构层涉及的多线程问题。比如说 主线程, 平台线程，GPU线程。本文讨论的及主线程，dart 运行在虚拟中的多线程问题。OK，言归正传。

线程模型

作为一个iOSer，我们在移动端开发的时候，会有多线程的应用场景。关于iOS中多线程我们会遇到线程同步的问题。比如说资源竞争，数据同步我们会引用到锁, 关于自旋，互斥的面试问题也是考察比较多的。呢么flutter 的线程模型是啥呢。这里我们引入isolate

Isolate

flutter的线程是一个独立的Isolate, 每个Isolate 管理其属于自己的EventLoop (此处的设计思路和iOS中线程与RunLoop的关系是一样的)和JS的事件循环蕾丝，关于EventLoop事件循环后续会出文章解释，此处不提及。需要注意的是async 在没有创建新的Isolate时，还是会将事件推入主Isolate 的任务队列当中的。

Talk is cheap

言归正传，了解了flutter 中的线程模型。那我们如何创建新的Isolate。举个🌰，我们需要从文件中读取配置。在处理I/O费时操作的时候，我们一般会创建一个新的Isolate

dart Isolate 🌰

import 'dart:convert';
import 'dart:io';
import 'dart:isolate';void main(List<String> args) async {print("${Isolate.current.debugName}");final jsonData = await Isolate.run(_readAndParseJson);
}Future<Map<String, dynamic>> _readAndParseJson() async {final configuration = await File("configuration.json").readAsString();final jsonData = jsonDecode(configuration) as Map<String, dynamic>;print("${Isolate.current.debugName}");return jsonData;
}

输出结果如下

main
_RemoteRunner._remoteExecuteExited.

flutter🌰

import 'dart:convert';
import 'dart:io';
import 'dart:isolate';import 'package:flutter/foundation.dart';
import 'package:flutter/material.dart';
import 'package:flutter/services.dart';void main() {runApp(const MainApp());
}class MainApp extends StatefulWidget {const MainApp({super.key});@overrideState<MainApp> createState() => _MainAppState();
}class _MainAppState extends State<MainApp> {String content = "内容占位符";void _updateContent() async {// Map<String, dynamic> configuration = await _readAndParseJson();print("${Isolate.current.debugName}");Map<String, dynamic> configuration = await _readAndParseJson();final name = configuration["name"];setState(() {content = name;});}@overrideWidget build(BuildContext context) {return MaterialApp(home: Scaffold(appBar: AppBar(title: const Text("jeverson's eg"),),body: Center(child: Text(content,style: const TextStyle(color: Colors.black),)),floatingActionButton: FloatingActionButton(onPressed: _updateContent,child: const Icon(Icons.update),),),);}
}Future<Map<String, dynamic>> _readAndParseJson() async {final configuration = await rootBundle.loadString("lib/configuration.json");return compute((message) {print("${Isolate.current.debugName}");return jsonDecode(configuration) as Map<String, dynamic>;}, configuration);
}