如何在Flutter中编辑列表中的选定项目

问题描述

我一直在尝试向我的待办事项列表添加一个编辑功能,用户可以在其中选择要编辑的项目,然后应该弹出一个对话框,在该对话框中有一个文本字段可以输入所选内容的新值项目和一个保存更改的按钮。当前,我有一个函数,该函数调用存储任务的数组,然后应该使用索引触发所选项目,以便最后在onPressed时可以给所选值一个新值,请将此编辑功能视为instagrams,除了它会编辑文本。

在对话框的编辑按钮中调用该函数时出现问题,因为我这样做是onPressed: () => _editToDoItem(_controller.text,index),并且因为我必须在那里传递2个参数,所以我得到的错误是Undefined name 'index'。如何解决此问题以使此编辑功能起作用?顺便说一句,由于这个错误,我没有去尝试编辑功能,所以如果功能或代码的任何部分不正确,请更正我。

与下面的编辑功能有关的一切。

  List<ToDoElement> _toDoItems = [];
  TextEditingController _controller = TextEditingController();

  // this function adds a task to the list
  void _addToDoItem(String task) {
    if(task.isNotEmpty) {
      setState(() {  
        _toDoItems.add(ToDoElement(task,DateTime.now()));
      });
    }
  }

  // this is the function that is supposed to edit the selected index from the _toDoItems array
  void _editToDoItem(String newText,int index) {
    setState(() {
      _toDoItems[index].task = newText;
    });
  }

  _editDialog(BuildContext context) {
    return showDialog(context: context,builder: (context) {
      return Dialog(
        child: Container(
          height: 180,width: 100,child: Column(
            mainAxisAlignment: MainAxisAlignment.center,children: [
                Container(
                  height: 60,child: TextField(
                    controller: _controller,autofocus: true,style: TextStyle(fontSize: 18,),)
                ),Container(
                  height: 65,width: double.infinity,margin: EdgeInsets.only(top: 5,child: RaisedButton(
                    textColor: Colors.white,color: Colors.red,child: Text('EDIT'),onPressed: () {
                      _editToDoItem(_controller.text,index); // error on index,Undefined name 'index'
                      FocusScope.of(context).requestFocus(FocusNode());
                    },],);
    });
  }

完整的main.dart文件

class ToDoElement {
  String task;
  final DateTime timeOfCreation;

  ToDoElement(this.task,this.timeOfCreation);
}

void main() => runApp(MaterialApp(home: MyApp()));

class MyApp extends StatefulWidget {
  @override
  createState() => MyAppState();
}



class MyAppState extends State<MyApp> {
  List<ToDoElement> _toDoItems = [];
  TextEditingController _controller = TextEditingController();

  void _addToDoItem(String task) {
    if(task.isNotEmpty) {
      setState(() {  
        _toDoItems.add(ToDoElement(task,DateTime.now()));
      });
    }
  }

  void _editToDoItem(String newText,int index) {
    setState(() {
      _toDoItems[index].task = newText;
    });
  }

  void _removeTodoItem(int index) {
    setState(() => _toDoItems.removeAt(index));
  }

  _editDialog(BuildContext context) {
    return showDialog(context: context,builder: (context) {
      return Dialog(
        backgroundColor: Colors.transparent,child: Container(
          decoration: BoxDecoration(
            color: Colors.white,borderRadius: BorderRadius.all(Radius.circular(20.0)),padding: EdgeInsets.all(20),height: 180,/*onSubmitted: (val) {
                      _addToDoItem(val);
                      _controller.clear();
                    },*/
                    style: TextStyle(fontSize: 18,decoration: InputDecoration(
                      hintText: 'Add a task here...',enabledBorder: OutlineInputBorder(
                        borderRadius: BorderRadius.all(Radius.circular(12.0)),borderSide: BorderSide(color: Colors.red,width: 2),focusedBorder: OutlineInputBorder(
                        borderRadius: BorderRadius.all(Radius.circular(12.0)),child: Text('EDIT',style: TextStyle(fontSize: 18)),shape: RoundedRectangleBorder(
                      borderRadius: BorderRadius.all(Radius.circular(12)),index);
                      FocusScope.of(context).requestFocus(FocusNode());
                    },);
    });
  }

  Widget _buildToDoItem(String toDoText,int index) {
    return SizedBox(
      child: Container(
        height: 58,margin: EdgeInsets.only(left: 22.0,right: 22.0,bottom: 12,decoration: BoxDecoration(
          border: Border.all(width: 1.5,color: Colors.red),borderRadius: BorderRadius.all(Radius.circular(18)),child: Row(
          crossAxisAlignment: CrossAxisAlignment.center,children:[
            Expanded(
              child: ListTile(
                title: Text(
                  toDoText,style: TextStyle(fontSize: 18),onTap: () => null,FlatButton(
              child: Text('Edit',style: TextStyle(color: Colors.red,fontSize: 16.5),onPressed: () => _editDialog(context),FlatButton(
              child: Text('Delete',onPressed: () => _removeTodoItem(index),);
  }

  int compareElement(ToDoElement a,ToDoElement b) =>
      a.timeOfCreation.isAfter(b.timeOfCreation) ? -1 : 1;

  Widget _buildToDoList() {
    _toDoItems.sort(compareElement);
    return Expanded(
      child: ListView.builder(
        itemCount: _toDoItems.length,itemBuilder: (context,index) {
          if (index < _toDoItems.length) {
            return _buildToDoItem(_toDoItems[index].task,index);
          }
        },);
  }
  @override
  Widget build(BuildContext context) {
    return Scaffold(
        appBar: PreferredSize(
          preferredSize: Size.fromHeight(50),child: AppBar(
            centerTitle: true,backgroundColor: Colors.red,title: Text('To Do List',style: TextStyle(fontSize: 24,fontWeight: FontWeight.bold,)
        ),backgroundColor: Colors.white,body: GestureDetector(
          onTap: () {
            FocusScope.of(context).requestFocus(FocusNode());
          },child: Column(
            crossAxisAlignment: CrossAxisAlignment.center,children: [
              Container(
                height: 60,margin: EdgeInsets.all(22),child: Row(
                  crossAxisAlignment: CrossAxisAlignment.center,children: [
                    Expanded(
                      flex: 10,child: Container(
                        height: double.infinity,child: TextField(
                          controller: _controller,onSubmitted: (val) {
                            _addToDoItem(val);
                            _controller.clear();
                          },decoration: InputDecoration(
                            hintText: 'Add a task here...',enabledBorder: OutlineInputBorder(
                              borderRadius: BorderRadius.all(Radius.circular(12.0)),focusedBorder: OutlineInputBorder(
                              borderRadius: BorderRadius.all(Radius.circular(12.0)),Expanded(
                      flex: 4,margin: EdgeInsets.only(left: 12),child: RaisedButton(
                          textColor: Colors.white,child: Text('ADD',shape: RoundedRectangleBorder(
                            borderRadius: BorderRadius.all(Radius.circular(12)),onPressed: () {
                            _addToDoItem(_controller.text);
                            _controller.clear();
                            FocusScope.of(context).requestFocus(FocusNode());
                          },_buildToDoList()
            ]
          ),);
  }
}

如果您有任何疑问,请在评论中让我知道;)

解决方法

暂无找到可以解决该程序问题的有效方法,小编努力寻找整理中!

如果你已经找到好的解决方法,欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@)