如何在Flutter的TextFormField中显示数据库中的信息？

核心实现思路 #

通过TextEditingController与TextFormField绑定，异步从数据库拉取数据后，将数据赋值给控制器的text属性，即可自动填充到输入框中。结合你提供的EditarPerfilModel和EditarPerfilServices，具体实现步骤如下：

1. 声明并初始化TextEditingController #

在页面的State类中，为每个需要填充的字段声明对应的控制器：

class _EditarPerfilPageState extends State<EditarPerfilPage> {
  // 为每个输入字段声明控制器
  late TextEditingController _nombreController;
  late TextEditingController _correoController;
  late TextEditingController _telefonoController;
  late EditarPerfilModel _perfilData;

  @override
  void initState() {
    super.initState();
    // 初始化控制器
    _nombreController = TextEditingController();
    _correoController = TextEditingController();
    _telefonoController = TextEditingController();
    // 页面启动时加载数据库数据
    _cargarDatosDesdeBD();
  }

2. 调用服务类获取数据并赋值 #

实现异步方法调用EditarPerfilServices获取数据，成功后通过setState更新控制器文本：

Future<void> _cargarDatosDesdeBD() async {
  try {
    // 调用你的服务类方法，获取用户档案数据
    _perfilData = await EditarPerfilServices().obtenerDatosPerfil();
    setState(() {
      // 将模型数据映射到对应控制器
      _nombreController.text = _perfilData.nombre ?? '';
      _correoController.text = _perfilData.correo ?? '';
      _telefonoController.text = _perfilData.telefono ?? '';
      // 其他字段如地址、昵称等同理处理
    });
  } catch (error) {
    // 处理请求失败场景，比如打印错误或提示用户
    print('加载数据失败: $error');
  }
}

3. 将控制器绑定到TextFormField #

在Widget树中，把控制器关联到对应的输入框：

@override
Widget build(BuildContext context) {
  return Scaffold(
    body: Padding(
      padding: const EdgeInsets.all(16.0),
      child: Column(
        children: [
          TextFormField(
            controller: _nombreController,
            decoration: const InputDecoration(labelText: 'Nombre'),
          ),
          TextFormField(
            controller: _correoController,
            decoration: const InputDecoration(labelText: 'Correo Electrónico'),
            keyboardType: TextInputType.emailAddress,
          ),
          TextFormField(
            controller: _telefonoController,
            decoration: const InputDecoration(labelText: 'Teléfono'),
            keyboardType: TextInputType.phone,
          ),
          // 其他字段的TextFormField
        ],
      ),
    ),
  );
}

4. 释放控制器资源 #

页面销毁时务必释放控制器，避免内存泄漏：

@override
void dispose() {
  _nombreController.dispose();
  _correoController.dispose();
  _telefonoController.dispose();
  super.dispose();
}

可选：用FutureBuilder处理异步状态 #

如果不想在initState中加载数据，也可以用FutureBuilder直接包裹输入区域，自动处理加载、错误、完成状态：

@override
Widget build(BuildContext context) {
  return Scaffold(
    body: Padding(
      padding: const EdgeInsets.all(16.0),
      child: FutureBuilder<EditarPerfilModel>(
        future: EditarPerfilServices().obtenerDatosPerfil(),
        builder: (context, snapshot) {
          if (snapshot.connectionState == ConnectionState.waiting) {
            return const CircularProgressIndicator();
          } else if (snapshot.hasError) {
            return Text('加载出错: ${snapshot.error}');
          } else if (snapshot.hasData) {
            final perfil = snapshot.data!;
            _nombreController.text = perfil.nombre ?? '';
            _correoController.text = perfil.correo ?? '';
            return Column(
              children: [
                TextFormField(controller: _nombreController),
                TextFormField(controller: _correoController),
              ],
            );
          } else {
            return const Text('无可用数据');
          }
        },
      ),
    ),
  );
}

关键注意事项 #

• 空值处理：数据库返回的字段可能为null，赋值时需添加默认值（如?? ''）避免报错
• 异步更新：必须在setState或FutureBuilder的完成回调中赋值，确保页面重建后输入框更新
• 资源管理：控制器必须在dispose中销毁，防止内存泄漏

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