Question

我正在尝试创建一个“编辑个人资料”页面，我正在加载所有用户数据并让用户修改它。但是，使用value上的text和TextEditingController属性会导致无法修改TextFormField中的数据。我可以添加到它的开头，但我无法从中删除任何字符。

进一步详细说明这种行为，在下面的截图中，我可以在字段中输入更多内容（因为我做了“Asdf”），但是从光标所在的位置，我无法将光标向右移动或删除“F”或最初放置在那里的任何角色。

在OnSaved的{{1}}函数中，TextFormField param是提交时表单的全文，在本例中为“AsdfFrederick”。

这是我的代码：

value

这是import 'dart:async'; import 'package:flutter/material.dart'; import '../models/user.dart'; class EditProfileView extends StatefulWidget { @override _EditProfileViewState createState() => new _EditProfileViewState(); } class _EditProfileViewState extends State<EditProfileView> { final GlobalKey<FormState> _formKey = new GlobalKey<FormState>(); void _handleSubmitted() { final FormState form = _formKey.currentState; if (!form.validate()) { } else { form.save(); User.instance.save().then((result) { print("Saving done: ${result}."); Navigator.pop(context); }); } } @override Widget build(BuildContext context) { final ThemeData themeData = Theme.of(context); final DateTime today = new DateTime.now(); // controllers for form text controllers final TextEditingController _firstNameController = new TextEditingController(); //_firstNameController.value = new TextEditingValue(text: User.instance.first_name); _firstNameController.text = User.instance.first_name; final TextEditingController _lastNameController = new TextEditingController(); _lastNameController.text = User.instance.last_name; return new Scaffold( appBar: new AppBar(title: const Text('Edit Profile'), actions: <Widget>[ new Container( padding: const EdgeInsets.fromLTRB(0.0, 10.0, 5.0, 10.0), child: new MaterialButton( color: themeData.primaryColor, textColor: themeData.secondaryHeaderColor, child: new Text('Save'), onPressed: () { _handleSubmitted(); Navigator.pop(context); }, )) ]), body: new Form( key: _formKey, autovalidate: _autovalidate, onWillPop: _warnUserAboutInvalidData, child: new ListView( padding: const EdgeInsets.symmetric(horizontal: 16.0), children: <Widget>[ new Container( child: new TextFormField( decoration: const InputDecoration(labelText: "First Name", hintText: "What do people call you?"), autocorrect: false, controller: _firstNameController, onSaved: (String value) { User.instance.first_name = value; }, ), ), new Container( child: new TextFormField( decoration: const InputDecoration(labelText: "Last Name"), autocorrect: false, controller: _lastNameController, onSaved: (String value) { User.instance.last_name = value; }, ), ), ], ))); } }：

flutter doctor

Answer 1

计算出来：从TextFormField切换到TextField，创建局部变量以存储对字段的更改，并使用initState设置初始表单值而不是build 1}}。

import 'dart:async';
import 'package:flutter/material.dart';
import '../models/user.dart';

class EditProfileView extends StatefulWidget {
  @override
  _EditProfileViewState createState() => new _EditProfileViewState();
}

class _EditProfileViewState extends State<EditProfileView> {
  final GlobalKey<FormState> _formKey = new GlobalKey<FormState>();

  void _handleSubmitted() {
    final FormState form = _formKey.currentState;
    if (!form.validate()) {
      _autovalidate = true; // Start validating on every change.
      showInSnackBar('Please fix the errors in red before submitting.');
    } else {
      showInSnackBar('snackchat');
      User.instance.first_name = firstName;
      User.instance.last_name = lastName;

      User.instance.save().then((result) {
        print("Saving done: ${result}.");
      });
    }
  }

  // controllers for form text controllers
  final TextEditingController _firstNameController = new TextEditingController();
  String firstName = User.instance.first_name;
  final TextEditingController _lastNameController = new TextEditingController();
  String lastName = User.instance.last_name;

  @override
  void initState() {
    _firstNameController.text = firstName;
    _lastNameController.text = lastName;
    return super.initState();
  }

  @override
  Widget build(BuildContext context) {
    final ThemeData themeData = Theme.of(context);
    final DateTime today = new DateTime.now();

    return new Scaffold(
        appBar: new AppBar(title: const Text('Edit Profile'), actions: <Widget>[
          new Container(
              padding: const EdgeInsets.fromLTRB(0.0, 10.0, 5.0, 10.0),
              child: new MaterialButton(
                color: themeData.primaryColor,
                textColor: themeData.secondaryHeaderColor,
                child: new Text('Save'),
                onPressed: () {
                  _handleSubmitted();
                  Navigator.pop(context);
                },
              ))
        ]),
        body: new Form(
            key: _formKey,
            autovalidate: _autovalidate,
            onWillPop: _warnUserAboutInvalidData,
            child: new ListView(
              padding: const EdgeInsets.symmetric(horizontal: 16.0),
              children: <Widget>[
                new Container(
                  child: new TextField(
                    decoration: const InputDecoration(labelText: "First Name", hintText: "What do people call you?"),
                    autocorrect: false,
                    controller: _firstNameController,
                    onChanged: (String value) {
                      firstName = value;
                    },
                  ),
                ),
                new Container(
                  child: new TextField(
                    decoration: const InputDecoration(labelText: "Last Name"),
                    autocorrect: false,
                    controller: _lastNameController,
                    onChanged: (String value) {
                      lastName = value;
                    },
                  ),
                ),
              ],
            )));
  }
}

Answer 2

将initialValue:属性与TextFormField配合使用会很好。

Answer 3

</body> 具有 TextFormField 属性。

要使用 initialValue 完成此操作，您可以使用 控制器 将初始值设置为：

TextField

如何正确填充扑动表格字段？

3 个答案: