Question

我正在尝试制作一个简单的任务列表，其中包含文本和复选框，并允许您对任务重新排序。重新排列它们的所有逻辑都可以使用，但是在选择任务时，复选框会更新而不运行动画。

我遇到了类似于简单列表（ListView）的问题，其中通过放置ObjectKey解决了该问题。如您所见，在此示例中，还有一个Key，但是动画不起作用。有什么建议吗？

import 'package:flutter/material.dart';

void main() => runApp(MaterialApp(
      title: 'Flutter To Do',
      theme: ThemeData(primarySwatch: Colors.blue),
      home: HomePage(),
    ));

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

class _HomePageState extends State<HomePage> {
  List myItems = [];

  @override
  void initState() {
    super.initState();
    for (int i = 0; i < 10; i++) {
      Map<String, dynamic> newTask = Map();
      newTask['task'] = 'Task #$i';
      newTask['done'] = false;
      myItems.add(newTask);
    }
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
        appBar: AppBar(
          title: Text('Flutter To Do'),
        ),
        body: ReorderableListView(
          children: [
            for (final item in myItems)
              Card(
                key: ObjectKey(item),
                margin: EdgeInsets.all(0),
                shape: RoundedRectangleBorder(
                  borderRadius: BorderRadius.circular(0)
                ),
                child: Container(
                  height: 56,
                  child: Row(
                    children: <Widget>[
                      IconButton(icon: Icon(Icons.reorder), onPressed: null),
                      Expanded(
                        child: Text(item['task']),
                      ),
                      Checkbox(
                        value: item['done'],
                        onChanged: (value) {
                          setState(() {
                            item['done'] = value;
                          });
                        },
                      )
                    ],
                  ),
                ),
              )
          ],
          onReorder: (oldIndex, newIndex) {
            setState(() {
              if (newIndex > oldIndex) {
                newIndex -= 1;
              }

              final item = myItems.removeAt(oldIndex);
              myItems.insert(newIndex, item);
            });
          },
        ));
  }
}

Answer 1

由于setState更新了ReorderableListView，因此它将重新呈现整个列表，因此不会算作更改。

您应该只在listView中更新一个listTile。为此，请将您的listTile小部件移动到具有自己的Stateful的{{1}}小部件，并在首页中替换您的Card：

setState

class _HomePageState extends State<HomePage> {
  List myItems = [];

  @override
  void initState() {
    super.initState();
    for (int i = 0; i < 10; i++) {
      Map<String, dynamic> newTask = Map();
      newTask['task'] = 'Task #$i';
      newTask['done'] = false;
      myItems.add(newTask);
    }
  }

  bool a = false;

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Flutter To Do'),
      ),
      body: ReorderableListView(
        children: [
          for (var item in myItems)
            TaskListItem(
              key: ObjectKey(item),
              item: item,
            ),
        ],
        onReorder: (oldIndex, newIndex) {
          setState(() {
            if (newIndex > oldIndex) {
              newIndex -= 1;
            }

            final item = myItems.removeAt(oldIndex);
            myItems.insert(newIndex, item);
          });
        },
      ),
    );
  }
}

在ReorderableListView中时，CheckBox动画不起作用

1 个答案: