如何使用 Flutter 在编辑表单中显示用户数据？答案

【问题标题】：How to display user data in an edit form using Flutter?如何使用 Flutter 在编辑表单中显示用户数据？
【发布时间】：2019-12-10 14:53:06
【问题描述】：

我正在为我在 Flutter 工作的公司构建一个应用程序。我们正在与我合作的其他开发人员一起使用 MVVM（模型、视图、视图模型）架构。

我想将用户数据从我的 ViewModel 显示到我的编辑表单（这些数据是通过我们的 API 获取的）。

问题是：数据不会显示在我的视图中。我可以访问它，我可以打印它（见下面的截图）......

到目前为止我尝试了什么：

我主要使用了 initialValue 并调用了例如我的“lastName”变量（但它没有显示任何内容）
我尝试为每个字段使用一个控制器。使用这种方法，它会显示我的用户数据，但是我遇到了一个奇怪的键盘问题，每次我想输入一些内容时，光标都会转到开头并删除单词。

另外，我注意到我的变量可以显示在 Text() 小部件中。

我很无知，我真的很想得到这个错误的答案。

class MyAccountViewModel with ChangeNotifier {
    String _lastName;

    MyAccountViewModel() {
//      this._lastName = 'Hardcoded text';

        ApiHelper api = new ApiHelper();

        api.getUserData().then((Map<String, dynamic>response) {
            print(response);
            this._lastName = response['last_name'];
        });

        notifyListeners();
    }

    String get lastName => this._lastName;

    set lastName(String value) {
        this._lastName = value;
        notifyListeners();
    }

Widget editProfileForm(model, BuildContext context) {
        return Form(
            key: _formKey,
            child: Column(
                children: <Widget>[
                    TextFormField(
                        initialValue: model.lastName,
                    ),
                ],
            ),
        );
    }

current view

response after the API call

【问题讨论】：

我可以看看你的Form 小部件源代码吗？
@Metr0me，为了快速准确的响应，您需要包含一个基本的可运行代码，说明您正在做什么，否则只是猜测。
我简化了我的代码，以便您更好地理解:)

标签： flutter dart

【解决方案1】：

感谢我在这篇文章中收到的答案，我设法找到了一个可行的解决方案。

按照之前的 cmets 中的建议，我需要实例化一个控制器并将例如“lastName”从我的 api 响应绑定到 controller.text。

这是一个使用 MVVM 架构的示例代码：

class MyAccountViewModel with ChangeNotifier {
    TextEditingController _lastNameController;

    MyAccountViewModel() {
        _lastNameController = new TextEditingController();
        ApiHelper api = new ApiHelper();

        api.getUserData().then((Map<String, dynamic> response) {
            this._lastNameController.text = response['last_name'];
            notifyListeners();
        });
    }

    TextEditingController get lastName => this._lastNameController;

    set lastName(TextEditingController value) {
        this._lastNameController =  value;
        notifyListeners();
    }
}

Widget editProfileForm(model, BuildContext context) {
        return Form(
            key: _formKey,
            child: TextFormField(
                controller: model.lastName,
            ),
        );
    }

【讨论】：

【解决方案2】：

@Metr0me，您是否尝试过使用控制器来更新值？它可能看起来像这样，

将控制器初始化为final lastNameController = TextEditingController();
当您的模型实例为时，为控制器分配文本值，

MyAccountViewModel model = new MyAccount.....
lastNameController.text = model.lastName;
setState(() {}); //Refresh if you need to

将 lastNameController 分配给您的表单字段，

child: Column(
  children: <Widget>[
     TextFormField(
        controller: lastNameController,
      ),
 ],
)

【讨论】：

我会尽快尝试您的解决方案。我要去上学，同时我正在为一家公司工作（学徒），我无法访问我的项目之外的项目。我将重现开发环境并让您知道。谢谢你的回答。
没问题。告诉我。
好的。感谢您的评论，我想出了如何使用 MVVM 模式来实现它。我在我的视图模型中实例化了一个控制器，然后将来自 api 调用的响应绑定到 myControllerVariable.text，它现在可以正确显示我的变量。非常感谢！

【解决方案3】：

将数据设置到文本字段

setState (() { 
           lastNameController.text = model.lastName ;
             });

将控制器分配给您的文本表单字段

TextFormField(
                controller: lastNameController,
              ),

【讨论】：