面试题：Flutter 中如何实现网络请求完成后及时更新 UI

Question

在Flutter项目里，使用Dio库发起网络请求获取用户信息数据，请求成功后，需要将用户姓名显示在一个Text组件上。请简述实现思路，并给出关键代码片段。

Answer 1

实现思路

1. 引入Dio库：在pubspec.yaml文件中添加Dio依赖并下载。
2. 发起网络请求：使用Dio发起GET请求获取用户信息数据。
3. 解析数据：将返回的响应数据解析为对应的模型对象。
4. 更新UI：将解析后的用户姓名传递给Text组件显示，可通过StatefulWidget来实现状态更新从而更新UI。

关键代码片段

import 'package:dio/dio.dart';
import 'package:flutter/material.dart';

class User {
  String name;
  User({required this.name});
  factory User.fromJson(Map<String, dynamic> json) {
    return User(name: json['name']);
  }
}

class UserInfoPage extends StatefulWidget {
  const UserInfoPage({Key? key}) : super(key: key);
  @override
  _UserInfoPageState createState() => _UserInfoPageState();
}

class _UserInfoPageState extends State<UserInfoPage> {
  String _userName = '';
  @override
  void initState() {
    super.initState();
    _fetchUserInfo();
  }
  Future<void> _fetchUserInfo() async {
    try {
      var response = await Dio().get('your_api_url');
      User user = User.fromJson(response.data);
      setState(() {
        _userName = user.name;
      });
    } catch (e) {
      print('Error: $e');
    }
  }
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: const Text('User Info')),
      body: Center(
        child: Text(_userName),
      ),
    );
  }
}