插件介绍

asynchronous是一个专为HarmonyOS跨平台开发优化的Flutter异步编程示例包。该包全面展示了Flutter中各种异步编程技术的使用方法,帮助开发者快速掌握异步编程的核心概念和实践技巧。主要功能包括:

  • async/await:基础异步编程模型,简化Future的使用
  • FutureBuilder:将异步操作与UI组件无缝集成
  • Future.wait:并行执行多个Future并统一处理结果
  • Completer:自定义Future的创建和管理
  • microtask:微任务队列的使用
  • Stream:流式数据处理
  • StreamBuilder:将Stream与UI组件结合使用

这些示例代码覆盖了Flutter异步编程的主要场景,从基础的网络请求处理到复杂的数据流管理,为HarmonyOS Flutter开发者提供了全面的参考。

在这里插入图片描述

使用步骤

1. 包的引入

由于asynchronous是自定义修改版本,需要通过Git形式引入。在你的HarmonyOS Flutter项目的pubspec.yaml文件中,添加以下依赖配置:

dependencies:
  flutter:
    sdk: flutter
  cupertino_icons: ^1.0.2
  asynchronous:
    git:
      url: "https://atomgit.com/"
      path: "packages/asynchronous/asynchronous"

添加依赖后,运行flutter pub get命令获取包:

flutter pub get

2. API调用示例

下面将介绍几个核心异步编程技术的使用示例,帮助你快速上手asynchronous工具包。

2.1 async/await的使用

async/await是Flutter中最常用的异步编程模型,它可以将异步代码写得像同步代码一样直观:

import 'package:flutter/material.dart';

class AsyncAwaitExample extends StatefulWidget {
  const AsyncAwaitExample({Key? key}) : super(key: key);

  
  _AsyncAwaitExampleState createState() => _AsyncAwaitExampleState();
}

class _AsyncAwaitExampleState extends State<AsyncAwaitExample> {
  List<Student> _students = [];

  
  void initState() {
    super.initState();
    fetchStudentsData();
  }

  // 模拟网络请求
  Future<List<Student>> fetchStudentsFromNetwork() async {
    await Future.delayed(const Duration(seconds: 2)); // 模拟网络延迟

    // 生成模拟数据
    List<Map<String, dynamic>> studentsJson = List.generate(30, (index) {
      return {
        'name': 'Student ${index + 1}',
        'age': 18 + (index % 5),
        'grade': 'Grade ${['A', 'B', 'C', 'D', 'F'][index % 5]}',
      };
    });

    return studentsJson.map((json) => Student.fromJson(json)).toList();
  }

  // 使用async/await获取数据
  Future<void> fetchStudentsData() async {
    try {
      List<Student> students = await fetchStudentsFromNetwork();
      setState(() {
        _students = students;
      });
    } catch (e) {
      setState(() {
        _students = [];
      });
    }
  }

  
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: const Text('Student List Example')),
      body: _students.isEmpty
          ? const Center(child: CircularProgressIndicator())
          : ListView.builder(
              itemCount: _students.length,
              itemBuilder: (context, index) {
                final student = _students[index];
                return Card(
                  margin: const EdgeInsets.all(8.0),
                  child: ListTile(
                    title: Text(student.name),
                    subtitle: Text('Age: ${student.age}\nGrade: ${student.grade}'),
                  ),
                );
              },
            ),
    );
  }
}

// 学生模型类
class Student {
  final String name;
  final int age;
  final String grade;

  Student({required this.name, required this.age, required this.grade});

  factory Student.fromJson(Map<String, dynamic> json) {
    return Student(
      name: json['name'],
      age: json['age'],
      grade: json['grade'],
    );
  }
}
2.2 FutureBuilder的使用

FutureBuilder可以将异步操作与UI组件无缝集成,自动处理不同的异步状态:

import 'package:flutter/material.dart';

class FutureBuilderExample extends StatefulWidget {
  const FutureBuilderExample({Key? key}) : super(key: key);

  
  _FutureBuilderExampleState createState() => _FutureBuilderExampleState();
}

class _FutureBuilderExampleState extends State<FutureBuilderExample> {
  late Future<List<Employee>> _employeeFuture;

  
  void initState() {
    super.initState();
    _employeeFuture = fetchEmployeesFromNetwork();
  }

  // 模拟网络请求
  Future<List<Employee>> fetchEmployeesFromNetwork() async {
    await Future.delayed(const Duration(seconds: 2));

    List<Map<String, dynamic>> employeesJson = List.generate(30, (index) {
      return {
        'name': 'Employee ${index + 1}',
        'position': 'Position ${['Manager', 'Developer', 'Designer', 'HR', 'Tester'][index % 5]}',
        'salary': 3000 + (index % 10) * 500,
      };
    });

    return employeesJson.map((json) => Employee.fromJson(json)).toList();
  }

  
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: const Text('FutureBuilder Example')),
      body: FutureBuilder<List<Employee>>(
        future: _employeeFuture,
        builder: (context, snapshot) {
          if (snapshot.connectionState == ConnectionState.waiting) {
            // 正在加载
            return const Center(child: CircularProgressIndicator());
          } else if (snapshot.hasError) {
            // 发生错误
            return Center(child: Text('Error: ${snapshot.error}'));
          } else if (!snapshot.hasData || snapshot.data!.isEmpty) {
            // 没有数据
            return const Center(child: Text('No employees found.'));
          } else {
            // 数据加载成功
            List<Employee> employees = snapshot.data!;
            return ListView.builder(
              itemCount: employees.length,
              itemBuilder: (context, index) {
                final employee = employees[index];
                return Card(
                  margin: const EdgeInsets.all(8.0),
                  child: ListTile(
                    title: Text(employee.name),
                    subtitle: Text('Position: ${employee.position}\nSalary: \$${employee.salary}'),
                  ),
                );
              },
            );
          }
        },
      ),
    );
  }
}

// 员工模型类
class Employee {
  final String name;
  final String position;
  final int salary;

  Employee({required this.name, required this.position, required this.salary});

  factory Employee.fromJson(Map<String, dynamic> json) {
    return Employee(
      name: json['name'],
      position: json['position'],
      salary: json['salary'],
    );
  }
}
2.3 Future.wait的使用

Future.wait用于并行执行多个Future并统一处理结果:

import 'package:flutter/material.dart';

class FutureWaitExample extends StatefulWidget {
  const FutureWaitExample({Key? key}) : super(key: key);

  
  _FutureWaitExampleState createState() => _FutureWaitExampleState();
}

class _FutureWaitExampleState extends State<FutureWaitExample> {
  String _result = '';

  
  void initState() {
    super.initState();
    fetchMultipleData();
  }

  // 模拟多个网络请求
  Future<String> fetchData1() async {
    await Future.delayed(const Duration(seconds: 2));
    return 'Data from API 1';
  }

  Future<String> fetchData2() async {
    await Future.delayed(const Duration(seconds: 3));
    return 'Data from API 2';
  }

  Future<String> fetchData3() async {
    await Future.delayed(const Duration(seconds: 1));
    return 'Data from API 3';
  }

  // 使用Future.wait并行执行多个请求
  Future<void> fetchMultipleData() async {
    try {
      List<String> results = await Future.wait([
        fetchData1(),
        fetchData2(),
        fetchData3(),
      ]);

      setState(() {
        _result = results.join('\n');
      });
    } catch (e) {
      setState(() {
        _result = 'Error: $e';
      });
    }
  }

  
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: const Text('Future.wait Example')),
      body: Center(
        child: _result.isEmpty
            ? const CircularProgressIndicator()
            : Padding(
                padding: const EdgeInsets.all(16.0),
                child: Text(_result),
              ),
      ),
    );
  }
}
2.4 Stream与StreamBuilder的使用

Stream用于处理流式数据,StreamBuilder将Stream与UI组件结合使用:

import 'dart:async';
import 'package:flutter/material.dart';

class StreamStreamBuilderExample extends StatefulWidget {
  const StreamStreamBuilderExample({Key? key}) : super(key: key);

  
  _StreamStreamBuilderExampleState createState() => _StreamStreamBuilderExampleState();
}

class _StreamStreamBuilderExampleState extends State<StreamStreamBuilderExample> {
  late Stream<int> _countStream;

  
  void initState() {
    super.initState();
    // 创建一个每秒递增的数据流
    _countStream = Stream.periodic(const Duration(seconds: 1), (count) => count);
  }

  
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: const Text('Stream with StreamBuilder Example')),
      body: Center(
        child: StreamBuilder<int>(
          stream: _countStream,
          builder: (context, snapshot) {
            if (snapshot.connectionState == ConnectionState.waiting) {
              return const CircularProgressIndicator();
            } else if (snapshot.hasError) {
              return Text('Error: ${snapshot.error}');
            } else {
              return Text(
                'Count: ${snapshot.data}',
                style: const TextStyle(fontSize: 24),
              );
            }
          },
        ),
      ),
    );
  }
}

总结

asynchronous工具包为HarmonyOS Flutter开发者提供了全面的异步编程示例,覆盖了从基础到高级的各种异步编程技术。其核心优势包括:

  1. 全面的异步技术覆盖:包含了Flutter中所有常用的异步编程技术
  2. 实战导向的示例代码:每个示例都模拟了真实的应用场景
  3. 清晰的代码结构:代码组织合理,易于理解和复用
  4. HarmonyOS优化:针对HarmonyOS平台进行了适配和优化
  5. 易于集成:通过Git形式引入,配置简单,便于在现有项目中使用

这些示例代码不仅帮助开发者快速掌握Flutter异步编程的核心概念,还提供了在HarmonyOS平台上的最佳实践。无论是处理网络请求、数据加载还是实时数据流,asynchronous工具包都能为开发者提供有效的解决方案。


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

Logo

讨论HarmonyOS开发技术,专注于API与组件、DevEco Studio、测试、元服务和应用上架分发等。

更多推荐