Question

我正在为我在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

Answer 1

@ 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,
      ),
 ],
)

Answer 2

将数据设置为文本字段

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

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

TextFormField(
                controller: lastNameController,
              ),

Answer 3

由于我在这篇文章中收到的答复，所以我设法找到了可行的解决方案。

正如前面的评论所建议的，我需要实例化一个控制器并将api响应中的“ lastName”实例绑定到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,
            ),
        );
    }

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

3 个答案: