使用 async 和 await 等待

本课属于 Coddy Flutter 学习旅程的“数据与网络”单元。第 2 课，共 27 课。

茶饮应用应该先显示 Boiling...，稍后再显示 Tea is ready。在 Future.delayed 中使用回调，执行顺序不容易看清。Dart 有一种更清晰的写法：await。

Future<void> boil() async {
  setState(() {
    message = 'Boiling...';
  });
  await Future.delayed(const Duration(seconds: 3));
  setState(() {
    message = 'Tea is ready';
  });
}

await 会暂停这个函数，直到 Future 完成，然后继续执行下一行。代码从上到下阅读，顺序与事情发生的顺序一致。

使用它有两条规则。使用 await 的函数要标记为 async。async 函数会返回一个 Future：如果没有返回任何内容，则返回 Future<void>。只有这个函数会暂停，应用的其余部分会继续运行。

挑战

简单

用 async 和 await 重写 boil：

点击后，消息立即变为 Boiling...
3 秒后，消息变为 Tea is ready

亲手试试

import 'package:flutter/material.dart';

void main() {
  runApp(const MyApp());
}

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  @override
  Widget build(BuildContext context) {
    return const MaterialApp(
      debugShowCheckedModeBanner: false,
      home: TeaScreen(),
    );
  }
}

class TeaScreen extends StatefulWidget {
  const TeaScreen({super.key});

  @override
  State<TeaScreen> createState() => _TeaScreenState();
}

class _TeaScreenState extends State<TeaScreen> {
  String message = 'The water is cold';

  void boil() {
    Future.delayed(const Duration(seconds: 3), () {
      setState(() {
        message = 'Tea is ready';
      });
    });
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Center(
        child: Column(
          mainAxisSize: MainAxisSize.min,
          children: [
            Text(message, style: const TextStyle(fontSize: 28)),
            const SizedBox(height: 24),
            ElevatedButton(onPressed: boil, child: const Text('Boil water')),
          ],
        ),
      ),
    );
  }
}

自我测试

这节课包含一个小测验。开始学习即可作答，并记录你的进度。

数据与网络中的所有课

自己练习： Flutter 在线编译器