JSON 值与 as

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

JSON 映射中的值是 dynamic。Dart 不知道它是什么，因此不会检查你对它的操作，编辑器也无法帮你。你知道服务器会发送什么：age 是数字，isPro 是 true 或 false。用 as 声明这一点：

final age = user['age'] as int;
final isPro = user['isPro'] as bool;

as 会立即检查这个值。从那以后，age 就是 int，isPro 就是 bool，Dart 会按这种类型处理它们。如果服务器发送了其他内容，应用会在这一行报错，并显示两种类型的名称，而不是在很远的地方才报错。

JSON 值与 Dart 类型的对应关系如下：引号中的文本是 String，整数是 int，带小数点的数字是 double，true 或 false 是 bool。注意，true 没有引号：它是 bool，不是文本 'true'。

挑战

中等

显示更多个人资料信息。在构建器中，使用 as 读取每个值：name 和 email 的类型为 String，age 的类型为 int，isPro 的类型为 bool。然后，在电子邮件下方添加：

由 age 生成的 28 years old
当 isPro 为 true 时显示 Pro member，否则显示 Free plan

亲手试试

import 'dart:convert';

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: ProfileScreen(),
    );
  }
}

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

  @override
  State<ProfileScreen> createState() => _ProfileScreenState();
}

class _ProfileScreenState extends State<ProfileScreen> {
  late Future<Map<String, dynamic>> _user;

  @override
  void initState() {
    super.initState();
    _user = loadUser();
  }

  Future<Map<String, dynamic>> loadUser() async {
    final body = await fetch('/user');
    return jsonDecode(body);
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: const Text('Profile')),
      body: Center(
        child: FutureBuilder<Map<String, dynamic>>(
          future: _user,
          builder: (context, snapshot) {
            if (snapshot.hasError) {
              return Text('Could not load: ${snapshot.error}');
            }
            if (snapshot.hasData) {
              final user = snapshot.data!;
              return Column(
                mainAxisSize: MainAxisSize.min,
                children: [
                  Text(
                    user['name'],
                    style: const TextStyle(fontSize: 28, fontWeight: FontWeight.bold),
                  ),
                  const SizedBox(height: 8),
                  Text(user['email'], style: const TextStyle(fontSize: 18)),
                ],
              );
            }
            return const CircularProgressIndicator();
          },
        ),
      ),
    );
  }
}

自我测试

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

自己练习： Flutter 在线编译器

JSON 值与 as

数据与网络中的所有课