Flutter中不使用FutureBuilder/ListBuilder存储请求数据的方法

核心调整点 #

• 用单个用户对象替代列表存储信息（用户信息通常为单条数据，对象更贴合业务）
• 修正initState执行顺序（必须先调用父类的super.initState()）
• 接口返回数据后直接赋值给用户变量，通过setState触发UI更新
• UI层根据变量状态展示内容（加载提示/用户真实信息）

完整修正代码 #

// 修正StatefulWidget的语法与命名规范
class NombreCabeceraDrawer extends StatefulWidget {
  const NombreCabeceraDrawer({super.key});

  @override
  State<NombreCabeceraDrawer> createState() => _NombreCabeceraDrawerState();
}

class _NombreCabeceraDrawerState extends State<NombreCabeceraDrawer> {
  // 定义单个用户信息变量，初始为null
  InfoInicialUserModel? _userInfo;
  // 实例化服务类
  final InfoUsuarioInicialServices _userService = InfoUsuarioInicialServices();

  @override
  void initState() {
    super.initState(); // 必须优先调用父类初始化方法
    _loadUserInfo(); // 单独封装接口请求逻辑，代码更清晰
  }

  // 封装接口请求与数据处理
  void _loadUserInfo() async {
    try {
      // 调用接口获取用户列表（假设接口返回单用户数组）
      List<InfoInicialUserModel> userList = await _userService.MostrarInfoInicialUser();
      if (userList.isNotEmpty) {
        setState(() {
          _userInfo = userList.first; // 取数组中第一个用户信息
        });
      }
    } catch (e) {
      // 处理请求异常，比如打印日志或提示用户
      print('获取用户信息失败：$e');
    }
  }

  @override
  Widget build(BuildContext context) {
    return Drawer(
      child: ListView(
        padding: EdgeInsets.zero,
        children: [
          UserAccountsDrawerHeader(
            accountName: Text(
              // 变量不为空则显示用户名，否则显示加载提示
              _userInfo?.NombreUsuario ?? '加载中...',
            ),
            accountEmail: Text(
              _userInfo?.CorreoUsuario ?? '加载中...',
            ),
            // 可选：显示用户头像
            currentAccountPicture: _userInfo?.FotoUsuario != null
                ? CircleAvatar(
                    backgroundImage: NetworkImage(_userInfo!.FotoUsuario),
                  )
                : const CircleAvatar(child: Icon(Icons.person)),
          ),
          // 其他Drawer菜单选项可在此添加
        ],
      ),
    );
  }
}

// 服务类保持逻辑，修正拼写错误与细节
class InfoUsuarioInicialServices {
  Future<List<InfoInicialUserModel>> MostrarInfoInicialUser() async {
    Map<String, String> headers = {
      'Content-Type': 'application/json;charset=UTF-8',
      'Charset': 'utf-8'
    };

    var url = Uri.parse("http://你的实际接口地址"); // 替换为真实接口地址
    final response = await http.get(url, headers: headers);
    print(response.body);
    return productInfoUsuarioInicialFromJson(response.body); // 修正原拼写错误
  }
}

// 修正解析函数的拼写错误
List<InfoInicialUserModel> productInfoUsuarioInicialFromJson(String str) =>
    List<InfoInicialUserModel>.from(
        json.decode(str).map((x) => InfoInicialUserModel.fromJson(x)));

// 模型类保持结构，建议变量名改为小驼峰规范（如nombreUsuario替代NombreUsuario）
class InfoInicialUserModel {
  String? UsuarioPk;
  String? FotoUsuario;
  String? CorreoUsuario;
  String? NombreUsuario;

  InfoInicialUserModel({this.UsuarioPk, this.FotoUsuario, this.NombreUsuario, this.CorreoUsuario});

  factory InfoInicialUserModel.fromJson(Map<String, dynamic> parsedJson) {
    return InfoInicialUserModel(
      UsuarioPk: parsedJson['Usuari'],
      FotoUsuario: parsedJson['image'],
      NombreUsuario: parsedJson['Usuario_A'],
      CorreoUsuario: parsedJson['Usuario_C'],
    );
  }
}

关键说明 #

1. 变量设计：用单对象存储用户信息，比列表更符合用户数据的业务逻辑。
2. 代码拆分：把接口请求逻辑单独封装，便于维护和异常处理。
3. UI更新逻辑：接口请求完成后通过setState更新变量，直接在Text组件中读取变量值，无需使用FutureBuilder。
4. 空值安全：用??运算符处理变量为空的场景，避免空指针异常，同时给用户加载反馈。

内容的提问来源于stack exchange，提问作者Carlos Alejandro