flutter - 如何设置表单字段的当前值，例如具有当前用户详细信息的配置文件更新表单

Question

我有我的更新用户资料。我希望在用户可以进行更改之前将初始用户配置文件值填充到表单字段中作为初始值。

**这是一个表单域**

  final TextEditingController _firstNameController = TextEditingController();
  Widget _buildFirstNameInput() {
    return TextFormField(
      controller: _firstNameController,
      style: inputTextStyle,
      decoration: formInputDecoration.copyWith(
        labelText: 'First Name',
      ),
      validator: (String value) {
        print(value);
        if (value.isEmpty) {
          return 'First name is Required';
        }
        return null;
      },
      onChanged: (String value){
        setState(() {
          isEdited=true;
        });
      },

    );
  }

当用户导航到此编辑配置文件小部件时，用户配置文件实例作为参数传递给小部件

class ProfilePage extends StatefulWidget {
  final User userProfile;
  ProfilePage({this.userProfile});

...some other code...

我已经尝试通过使用 initstate 中输入字段的控制器来设置输入字段的初始值，如下所示

  void intitState(){
    super.initState();
    _firstNameController.text=widget.userProfile.name;

  }

但这似乎不起作用。我怎样才能实现它？

标签： fluttercontroller

Answer 1

TextEditingController.text在你的设置initState()是完全有效的。

完整的源代码

import 'package:flutter/material.dart';

void main() {
  runApp(
    MaterialApp(
      debugShowCheckedModeBanner: false,
      title: 'Flutter Demo',
      home: ProfilePage(
        userName: 'Thierry',
      ),
    ),
  );
}

class ProfilePage extends StatefulWidget {
  final String userName;
  ProfilePage({this.userName});

  @override
  _ProfilePageState createState() => _ProfilePageState();
}

class _ProfilePageState extends State<ProfilePage> {
  final TextEditingController _firstNameController = TextEditingController();

  @override
  void initState() {
    super.initState();
    _firstNameController.text = widget.userName;
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Center(child: _buildFirstNameInput()),
    );
  }

  Widget _buildFirstNameInput() {
    return TextFormField(
      controller: _firstNameController,
      decoration: InputDecoration(
        labelText: 'First Name',
      ),
      validator: (String value) {
        print(value);
        if (value.isEmpty) {
          return 'First name is Required';
        }
        return null;
      },
      onChanged: (value) {},
    );
  }
}

---

！！！另一个答案是错误的

如果您TextEditingController.text在开头设置 ，_buildFirstNameInput()它将在每次重建时重置表单字段：

轻松复制粘贴的完整源代码：

import 'package:flutter/material.dart';

void main() {
  runApp(
    MaterialApp(
      debugShowCheckedModeBanner: false,
      title: 'Flutter Demo',
      home: ProfilePage(
        userName: 'Thierry',
      ),
    ),
  );
}

class ProfilePage extends StatefulWidget {
  final String userName;
  ProfilePage({this.userName});

  @override
  _ProfilePageState createState() => _ProfilePageState();
}

class _ProfilePageState extends State<ProfilePage> {
  final TextEditingController _firstNameController = TextEditingController();

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Center(
          child: Column(
        children: [
          _buildFirstNameInput(),
          const SizedBox(height: 48.0),
          ElevatedButton(
            onPressed: () {
              setState(() {});
            },
            child: Text('MESS AROUND WITH THE STATE'),
          ),
        ],
      )),
    );
  }

  Widget _buildFirstNameInput() {
    _firstNameController.text = widget.userName;
    return TextFormField(
      controller: _firstNameController,
      decoration: InputDecoration(
        labelText: 'First Name',
      ),
      validator: (String value) {
        print(value);
        if (value.isEmpty) {
          return 'First name is Required';
        }
        return null;
      },
      onChanged: (value) {},
    );
  }
}