我如何设置表单字段的当前值说一个配置文件更新表单与当前用户详细信息

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;

  }

但这似乎没有用。我怎样才能实现它？

Answer 1

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

完整源代码

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) {},
    );
  }
}

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

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

便于复制粘贴的完整源代码：

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) {},
    );
  }
}

Answer 2

您也可以使用 Flutter Hooks。它会让你的代码更精简：

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

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

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

  @override
  Widget build(BuildContext context) {
    final _firstNameController = useTextEditingController(text: userName);
    return Scaffold(
      body: Center(
        child: _FirstNameInput(controller: _firstNameController),
      ),
    );
  }
}

class _FirstNameInput extends StatelessWidget {
  final TextEditingController controller;

  const _FirstNameInput({Key key, this.controller}) : super(key: key);

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

我如何设置表单字段的当前值说一个配置文件更新表单与当前用户详细信息

How can i set the current values of a form field say a profile updating form with current user details

controller

flutter

完整源代码

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

便于复制粘贴的完整源代码：