显示四个textField

Question

我想在我的应用程序中有 4 个文本字段。在initState，它会从服务器获取数据，然后将文本放入textField。

List<TextEditingController> _controllers = [];
 
  @override
  void initState() {
    _controllers.add(TextEditingController());
    _controllers[0] = TextEditingController();
    _controllers[1] = TextEditingController();
    _controllers[2] = TextEditingController();
    _controllers[3] = TextEditingController();

    sharedPreferences.getUser().then((onValue) {

      _bloc
          .getData(...) // fetch from server
          .then((onValue) {
        for (int i = 0; i < onValue.esd.data.length; i++) {
          _controllers[i].text = onValue.esd.data['name'];
        }
        setState(() {});
      });
    });
    super.initState();
  }

这里是小部件构建

 Widget _showQueries() {
    return Column(
      crossAxisAlignment: CrossAxisAlignment.start,
      children: [
            ....
        ListView.builder(
          physics: NeverScrollableScrollPhysics(),
          shrinkWrap: true,
          itemCount: 4,
          itemBuilder: (context, index) {
            return Padding(
                padding: EdgeInsets.all(5),
                child: TextField(
                    maxLines: 2,
                    controller: _controllers[index],
                    decoration: InputDecoration(
                      border: OutlineInputBorder(
                          borderRadius: const BorderRadius.all(
                              const Radius.circular(5.0))),
                      contentPadding: EdgeInsets.all(10),
                    )));
          },
        )
      ],
    );
  }

错误

RangeError (index): Invalid value: Only valid value is 0: 1

Answer 1

请让我们知道您在“onValue”这个变量中从服务器得到什么响应。

Answer 2

由于您的 _controller 变量，您收到此错误。在开始创建小部件时，该变量包含类型为 TextEditingController 的空列表。现在，当 initstate 被调用时，您向该列表 TextEditingController 添加了一个 ，但您只添加了一个controller 不是 4，并且 Dart 在编译期间没有对该列表进行计数，因此您可能在运行期间遇到错误。

可能的解决方法不是在 initState 中添加控制器，而是在该列表中添加 4 个控制器。

List<TextEditingController> _controllers = [
TextEditingController(),
TextEditingController(),
TextEditingController(),
TextEditingController(),
];

现在您可能不会收到 范围错误

显示四个textField

Display four textField

listview

dart

flutter