在 Flutter 中，线程分离是优化应用性能的关键技术。通过将不同类型的任务分配到不同的线程，可以减少主线程的阻塞从而出现页面卡顿，提高应用的响应速度和流畅度。下面总结一些例子如何使用。
1. 使用 compute 函数进行数据处理
compute 函数可以在后台线程中执行耗时的计算任务，从而避免阻塞主线程。
import 'dart:convert';
import 'package:flutter/foundation.dart'; // for compute function
import 'package:flutter/material.dart';
void main() {
runApp(MyApp());
}
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
home: JsonParsingScreen(),
);
}
}
class JsonParsingScreen extends StatefulWidget {
@override
_JsonParsingScreenState createState() => _JsonParsingScreenState();
}
class _JsonParsingScreenState extends State<JsonParsingScreen> {
late Future<Map<String, dynamic>> _parsedJson;
@override
void initState() {
super.initState();
_parsedJson = parseJsonInBackground(jsonString);
}
// 示例 JSON 数据
final String jsonString = '{"name": "John", "age": 30, "city": "New York"}';
// 使用 compute 函数解析 JSON
Future<Map<String, dynamic>> parseJsonInBackground(String jsonString) {
return compute(parseJson, jsonString);
}
// 解析 JSON 的函数
Map<String, dynamic> parseJson(String jsonString) {
return jsonDecode(jsonString);
}
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text('JSON Parsing Example'),
),
body: FutureBuilder<Map<String, dynamic>>(
future: _parsedJson,
builder: (context, snapshot) {
if (snapshot.connectionState == ConnectionState.waiting) {
return Center(child: CircularProgressIndicator());
} else if (snapshot.hasError) {
return Center(child: Text('Error: ${snapshot.error}'));
} else {
return Center(
child: Text('Parsed JSON: ${snapshot.data}'),
);
}
},
),
);
}
}
当JSON数据量较为复杂情况，compute 函数将 JSON 解析任务转移到后台线程，可以提高主线程的流畅性。
2. 使用 Isolate 进行复杂计算
Isolate 是 Dart 的独立执行环境，适用于需要长时间运行或复杂处理的任务。
import 'dart:async';
import 'dart:isolate';
import 'package:flutter/material.dart';
void main() {
runApp(MyApp());
}
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
home: IsolateExampleScreen(),
);
}
}
class IsolateExampleScreen extends StatefulWidget {
@override
_IsolateExampleScreenState createState() => _IsolateExampleScreenState();
}
class _IsolateExampleScreenState extends State<IsolateExampleScreen> {
late Future<int> _calculatedResult;
@override
void initState() {
super.initState();
_calculatedResult = calculateInIsolate(1000000000);
}
// 函数用于从主 Isolate 向工作 Isolate 发送数据
static void _isolateEntry(SendPort sendPort) {
final port = ReceivePort();
sendPort.send(port.sendPort);
port.listen((message) {
final int value = message[0];
final SendPort replyPort = message[1];
int result = 0;
for (int i = 0; i < value; i++) {
result += i;
}
replyPort.send(result);
});
}
// 使用 Isolate 进行计算
Future<int> calculateInIsolate(int value) async {
final port = ReceivePort();
await Isolate.spawn(_isolateEntry, port.sendPort);
final sendPort = await port.first as SendPort;
final responsePort = ReceivePort();
sendPort.send([value, responsePort.sendPort]);
return await responsePort.first as int;
}
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text('Isolate Example'),
),
body: FutureBuilder<int>(
future: _calculatedResult,
builder: (context, snapshot) {
if (snapshot.connectionState == ConnectionState.waiting) {
return Center(child: CircularProgressIndicator());
} else if (snapshot.hasError) {
return Center(child: Text('Error: ${snapshot.error}'));
} else {
return Center(
child: Text('Calculated Result: ${snapshot.data}'),
);
}
},
),
);
}
}
通过创建了一个独立的 Isolate 来执行复杂的计算任务（或其他耗时任务如IO读取、加密等）。主线程将计算任务和返回端口发送给 Isolate，然后等待计算结果。不占用主线程的UI渲染等操作，提高页面流畅度。
优化 Raster 线程
Raster 线程负责将 Flutter UI 渲染到屏幕上。使用RepaintBoundary 可以减少不必要的重绘，从而优化 Raster 线程的性能。
import 'package:flutter/material.dart';
void main() {
runApp(MyApp());
}
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
home: RepaintBoundaryExampleScreen(),
);
}
}
class RepaintBoundaryExampleScreen extends StatefulWidget {
@override
_RepaintBoundaryExampleScreenState createState() => _RepaintBoundaryExampleScreenState();
}
class _RepaintBoundaryExampleScreenState extends State<RepaintBoundaryExampleScreen> {
int counter = 0;
void _incrementCounter() {
setState(() {
counter++;
});
}
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text('RepaintBoundary Example'),
),
body: Column(
children: [
Text('Counter: $counter'),
RepaintBoundary(
child: PerformanceOptimizedWidget(),
),
],
),
floatingActionButton: FloatingActionButton(
onPressed: _incrementCounter,
child: Icon(Icons.add),
),
);
}
}
class PerformanceOptimizedWidget extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Text('This widget does not depend on the counter');
}
}
代码中RepaintBoundary 确保了 PerformanceOptimizedWidget 不会在 counter 改变时重新绘制，从而减少了 Raster 线程的工作量。提高页面流畅度。
