尝试从要显示在 ListView 中的字符串列表中读取项目时出错答案

【问题标题】：Error trying to read items from a list of strings to show in a ListView尝试从要显示在 ListView 中的字符串列表中读取项目时出错
【发布时间】：2021-08-12 00:21:35
【问题描述】：

在下面的代码中，我尝试使用 Flutter 构建一个基本的 ToDo 列表应用程序。我有一个 FAB，当它被按下时，它会要求用户在包含 TextField 的弹出警报对话框中输入文本。我还使用 TextEditingController 来获取文本并将其添加到字符串列表中。我有一个计数器变量来跟踪添加到列表中的项目，并在我想显示列表中的项目并将其作为 ListTile 添加到 ListView 时将其用作列表的索引。

当我运行代码时，它说索引超出范围，我真的不知道我还应该注意什么。对不起，如果我的问题是基本的，我是新手。

我的代码：

import 'package:flutter/material.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'ToDo List',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: MyTaskList(),
    );
  }
}

class MyTaskList extends StatefulWidget {

  @override
  _MyTaskListState createState() => _MyTaskListState();
}

class _MyTaskListState extends State<MyTaskList> {
  final _taskItems = <String>[];
  var _counter = 0;
  final myController = TextEditingController();


  @override
  void dispose(){
    myController.dispose();
    super.dispose();
  }

  void _addTask(String task){
    setState(() {
      _taskItems.add(task);
    });
    myController.clear();
  }


  Widget _buildTaskList() {
    return new ListView.builder(
        itemCount: _taskItems.length,
        itemBuilder: (BuildContext context, _) {
          print(_taskItems);
          return _buildTask(_taskItems[_counter]);

        }

    );

  }

  Widget _buildTask(String task) {

    return new ListTile(
      title: new Text(task),
    );
  }


  @override
  Widget build(BuildContext context) {
    return Scaffold(

        appBar: AppBar(

          title: Text("ToDo List"),
        ),
        floatingActionButton: FloatingActionButton(
          onPressed: () => showDialog<String>(
            context: context,
            builder: (context) => AlertDialog(
              title: Text("New Task"),
              content: TextField(
                controller: myController,
                decoration: InputDecoration(
                  border: OutlineInputBorder(),
                  hintText: "Enter New Task",
                ),
              ),

              actions: <Widget>[
                TextButton(
                    onPressed: () => {
                      _addTask(myController.text),
                      Navigator.pop(context, "ok"),
                      _counter++,
                      print(_counter),
                      print(_taskItems),


                    },
                    child: const Text("OK")),

              ],
            )
          ),
          child: Center(child:Icon(Icons.add)),

        ),
        body: _buildTaskList(),
    );
  }
}

【问题讨论】：

你真的让我混淆了 () => {}, 使用 () {} 而不是 () => {} 第二个只是返回一个 Set 而第一个是 void 回调。我不得不问不和谐。谢谢美代代
@moneeralhashim 感谢您的信息，但我有一些事情。如果我们根据您所说的进行假设，那么为什么我的那段代码即使返回一个集合也能工作？
你真的不应该使用它，即使它有效。当您编写 () => {} 时，您将返回一个 Set 文字。就像你这样做一样() => [] 函数部分只是() => [] 部分是在你制作它时返回的列表你可以调用像() => [print('not ok')] 这样的函数但是你可以看到没有需要在此处执行此操作，因为您可以编写 () => print('ok') 或 () {} 用于分组表达式。不要混淆 javascript 和 dart，但即使在 javascript 中它也会引入歧义，因为它看起来像一个对象和一个函数体。

标签： android flutter listview dart mobile

【解决方案1】：

编辑如下。可以使用ListViewBuilder索引，为什么要使用counter？我认为，您的初始 counter 值为 0 但列表为空。您尝试获取空列表的元素0（或第一个）`，但没有元素。

Widget _buildTaskList() {
    return new ListView.builder(
        itemCount: _taskItems.length,
        itemBuilder: (BuildContext context, index) {
          print(_taskItems);
          return _buildTask(_taskItems[index]);

        }

    );

  }

【讨论】：

感谢您的回答礼萨！工作得很好，整洁。