Question

我通过尝试从头开始构建一个简单的ToDo应用（而不是基于任何教程）来开始开发，因此我可以更好地学习，但是现在我无法从等效的小部件访问todos数组。

为了使事情井井有条，我具有以下结构：

lib
  pages
    home.page.dart
  widgets
    todo-card.dart
    todo-empty.dart
  main.dart

该应用程序是每个待办事项的卡片列表以及用于创建新卡片的FAB。每张卡都是一个删除按钮，待办事项文本的一部分和一个检查按钮。所有待办事项都存储在HomePage类中：

pages / home.page.dart

class HomePage extends StatefulWidget {
  @override
  _HomePageState createState() => _HomePageState();
}

class _HomePageState extends State<HomePage> {
  List todos = [
    {'text': 'texto teste 1', 'checked': false},
    {'text': 'texto teste 2', 'checked': true},
    {'text': 'texto teste 3', 'checked': false},
  ];

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        ...
      ),
      backgroundColor: Theme.of(context).primaryColor,
      body: this.todos.length > 0
          ? ListView.builder(
              itemCount: this.todos.length,
              itemBuilder: (context, index) {
                Map item = this.todos[index];

                return TodoCard(item['text'], item['checked']);
              },
            )
          : TodoEmpty(),
      floatingActionButton: FloatingActionButton(
        ...
      ),
    );
  }
}

和卡结构： 小部件/todo-card.dart

class TodoCard extends StatefulWidget {
  String text;
  bool checked = false;

  TodoCard(this.text, [this.checked = false]);

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

class _TodoCardState extends State<TodoCard> {
  @override
  Widget build(BuildContext context) {
    return Card(
      child: Container(
        padding: EdgeInsets.all(20),
        child: Row(
          mainAxisAlignment: MainAxisAlignment.spaceBetween,
          children: <Widget>[
            IconButton(
              icon: Icon(Icons.delete),
              onPressed: () {

              },
            ),
            Expanded(
              child: Text(
                widget.text,
              ),
            ),
            IconButton(
              icon: widget.checked
                  ? Icon(Icons.check_box)
                  : Icon(Icons.check_box_outline_blank),
              onPressed: () {
                setState(() {
                  if (widget.checked == true) {
                    widget.checked = false;
                  } else {
                    widget.checked = true;
                  }
                });
              },
            ),
          ],
        ),
      ),
    );
  }
}

我的问题是：如何访问HomePage类中的TodoCard属性，以便从todos列表中删除索引？ < / p>

目前，我不想使用bloc，provider或其他类似工具。由于我开始使用Flutter，因此我想先掌握setState()。

Project repository on Github

Answer 1

您可以像这样将Function作为参数传递给TodoCard类

class TodoCard extends StatefulWidget {
  String text;
  bool checked = false;
  Function onTodoCardDeleted;

  TodoCard(this.text, this.onTodoCardDeleted, [this.checked = false]);

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

在主页中，您将像这样创建TodoCard对象

/* your code */
itemBuilder: (context, index) {
  Map item = this.todos[index];
  return TodoCard(item['text'], (){ _removeFromTodos(index); }, item['checked']);
},
/* your code */

_removeFromTodos(int index){
  setState((){
    todos.removeAt(index);
  });
}

最后，您可以调用在删除图标点击上作为参数传递的函数

IconButton(
  icon: Icon(Icons.delete),
  onPressed: () {
    widget.onTodoCardDeleted;
  },
),

从另一个类访问和修改参数

1 个答案: