再试一次按钮

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

连接会恢复。好的错误界面不会让人卡住：它会说明发生了什么，并提供重试的方法。

重试就是重新加载：在 setState 中创建一个新的 future，就像刷新按钮一样。

void tryAgain() {
  setState(() {
    _message = fetch('/message');
  });
}

有一点需要注意。新的 future 运行期间，快照会像保留旧数据那样保留上一次的错误：新答案到达之前，hasError 会一直是 true。要在第二次尝试期间显示加载指示器，请先检查 snapshot.connectionState：

if (snapshot.connectionState == ConnectionState.waiting) {
  return const CircularProgressIndicator();
}
if (snapshot.hasError) {
  // 错误信息和按钮
}
return Text(snapshot.data!);

要在预览中看到失败，请在 main 的第一行写下 offline = true;，然后按“运行”。offline 来自 api.dart：它会让每次调用都失败，就像手机没有信号一样。按“检查”之前，请删掉这一行。

挑战

中等

为错误状态提供一个恢复方式：

在错误文本下方添加一个 Try again 按钮
按下按钮后，在 setState 中设置一个新的 fetch('/message')
重试时显示加载指示器：在 builder 中先检查 ConnectionState.waiting

亲手试试

import 'package:flutter/material.dart';

import 'api.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: MessageScreen(),
    );
  }
}

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

  @override
  State<MessageScreen> createState() => _MessageScreenState();
}

class _MessageScreenState extends State<MessageScreen> {
  late Future<String> _message;

  @override
  void initState() {
    super.initState();
    _message = fetch('/message');
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Center(
        child: FutureBuilder<String>(
          future: _message,
          builder: (context, snapshot) {
            if (snapshot.hasError) {
              return Text(
                'Could not load: ${snapshot.error}',
                style: const TextStyle(fontSize: 20),
              );
            }
            if (snapshot.hasData) {
              return Text(snapshot.data!, style: const TextStyle(fontSize: 24));
            }
            return const CircularProgressIndicator();
          },
        ),
      ),
    );
  }
}

自我测试

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

自己练习： Flutter 在线编译器

再试一次按钮

数据与网络中的所有课