使用initialValue时，setState不会更新TextFormField [英] setState does not update TextFormField when use initialValue

问题描述

所有人.

我正在使用没有任何自己的TextEditController的Form和TextFieldForm.具有3个具有初始值的TextFieldForm(Value_1，Value_2，Total).当我编辑第一个文本时，总计"文本字段应包含计算结果.要更新小部件，我正在使用setState.变量_total和文本"窗口小部件始终具有正确的计算值，但总计"文本字段不想更新的问题.

I am using Form and TextFieldForm without any own TextEditController. Have 3 TextFieldForm (Value_1, Value_2, Total) with initial values. When i am editing first one, the Total textfield should contain result of calculation . To update widget i am using setState. The problem that variable _total and Text widget always has a correct calculation value, but the Total textfield does not want to update.

为什么?不使用自己的TextEditController就可以吗?

why? is it posible to do without using own TextEditController?

import 'package:flutter/material.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: TestForm(),
    );
  }
}

class TestForm extends StatefulWidget {
  @override
  _TestFormState createState() => _TestFormState();
}

class _TestFormState extends State<TestForm> {
  GlobalKey<FormState> _formKey = GlobalKey();

  int _value1 = 0;
  int _value2 = 20;
  int _total = 0;

  @override
  Widget build(BuildContext context) {
    print('rebuild');
    return Scaffold(
      appBar: AppBar(title: Text('test form')),
      body: Padding(
        padding: const EdgeInsets.all(16.0),
        child: Form(
          key: _formKey,
          child: ListView(
            children: <Widget>[
              TextFormField(
                initialValue: _value1.toString(),
                decoration: InputDecoration(
                  labelText: 'Value_1',
                ),
                keyboardType: TextInputType.number,
                onChanged: (value) {
                  setState(() {
                    _total = int.parse(value) * _value2;
                    print('total: ' + _total.toString());
                  });
                },
              ),
              TextFormField(
                initialValue: _value2.toString(),
                keyboardType: TextInputType.number,
                 decoration: InputDecoration(
                  labelText: 'Value_2',
                ),
              ),
              TextFormField(
                initialValue: _total.toString(),
                keyboardType: TextInputType.number,
                 decoration: InputDecoration(
                  labelText: 'Total',
                ),
              ),
              SizedBox(height: 20),
              Text('total: ' + _total.toString()),
            ],
          ),
        ),
      ),
    );
  }
}

推荐答案

如果您有反应性数据源，也就是可以根据网络更新或其他数据进行更改的数据，那么对我有用的一种方法是使用 Key .

If you have a reactive data source, aka data that can change based on either network updates or other data, one hack that worked for me was to use a Key.

通过对反应性数据(toString())进行Key，每次Key更改时，表单字段都会更改.

By making a Key of the reactive data (toString()), the form field will change every time the Key changes.

因此，在这种情况下，您可以执行以下操作:

So in this case you could do:

TextFormField(
  key: Key(_total.toString()), // <- Magic!
  initialValue: _total.toString(),
  keyboardType: TextInputType.number,
  decoration: InputDecoration(
    labelText: 'Total',
  ),
),

这篇关于使用initialValue时，setState不会更新TextFormField的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！