加载时显示旋转图标

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

盯着一动不动的屏幕看两秒，时间就很长了。旋转的圆圈会告诉用户应用正在处理。Flutter 中的这个组件是 CircularProgressIndicator。

const CircularProgressIndicator()

它不需要任何设置就能工作：把它放到屏幕上，它就会旋转。它的作用是只在数据加载过程中显示。你可以用状态中的 bool 来实现：

bool loading = false;

// await 之前：loading = true
// await 之后：loading = false

loading ? const CircularProgressIndicator() : Text(message)

在 await 之前，在 setState 中将 loading 设为 true；显示答案的 setState 中再将它设回 false。

挑战

简单

用加载指示器替换 Loading... 文本：

在状态中添加 bool loading = false;
在 fetch 之前将它设为 true，消息到达后再设回 false
当 loading 为 true 时，在消息的位置显示 CircularProgressIndicator

亲手试试

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> {
  String message = 'No message yet';

  Future<void> loadMessage() async {
    setState(() {
      message = 'Loading...';
    });
    final text = await fetch('/message');
    setState(() {
      message = text;
    });
  }

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

自我测试

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

数据与网络中的所有课

自己练习： Flutter 在线编译器