稍后到达的值

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

到目前为止，你的应用中的所有事情都会同时发生：点按按钮，屏幕就会改变。真实的应用通常需要等待。它们会等待服务器响应、文件加载，或计时器结束。

Dart 将尚未得到的值称为 Future。最简单的一种是 Future.delayed：它会等待一段 Duration，然后运行你提供的函数。

Future.delayed(const Duration(seconds: 2), () {
  setState(() {
    message = 'Done';
  });
});

应用不会在等待时卡住。屏幕会继续绘制，按钮也会继续工作。2 秒结束后，Dart 会运行这个函数，而 setState 会用新消息重新绘制屏幕。

挑战

简单

点击 Boil water 后，会立刻显示 Tea is ready。水需要时间才能烧开。使用 Future.delayed，让消息在点击 3 秒后改变。

亲手试试

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() {
    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 在线编译器

稍后到达的值

数据与网络中的所有课