Flutter 可重新排序列表

Question

我正在尝试创建一个简单的 Todo 应用程序。首先处理 UI，所以此时都是愚蠢的数据，而不是用户输入。

我可以让它在列表视图中正常工作，但是当我尝试使用可重新排序列表时，它突然变得更难（因为按键等）。我想将我的图块保存在单独的文件中，以确保代码也更易于阅读。

到目前为止，我的代码包含以下内容：

我的 main.dart 文件

import 'package:flutter/material.dart';
import 'package:todo/tiles.dart';

void main() {
  runApp(MaterialApp(
    home: TodoApp(),
    theme: ThemeData(primarySwatch: Colors.yellow),
  ));
}

class TodoApp extends StatelessWidget {
  TodoApp({super.key});

  final List fullList = [
    const todoTile(),
    const todoTile(),
    const todoTile(),
    const todoTile(),
  ];

  @override
  Widget build(context) {
    return Scaffold(
      backgroundColor: Colors.yellow[100],
      appBar: AppBar(
        title: const Text("Todo"),
        centerTitle: true,
        elevation: 0,
      ),
      body: Padding(
          padding: const EdgeInsets.symmetric(vertical: 8.0, horizontal: 15.0),
          child: Column(
            children: [
              Expanded(
                child: ReorderableListView(
                  onReorder: (oldIndex, newIndex) {},
                  children: fullList,
                ),
              ),
            ],
          )),
    );
  }
}

我的tiles.dart文件

import 'package:flutter/material.dart';

class todoTile extends StatefulWidget {

  const todoTile({super.key});

  @override

  State<todoTile> createState() => todoTileState();

}

class todoTileState extends State<todoTile> {

  bool checkedValue = false;

  @override

  Widget build(BuildContext context) {

    return Padding(

      padding: const EdgeInsets.symmetric(vertical: 8.0),

      child: Container(

        decoration: BoxDecoration(

            borderRadius: BorderRadius.circular(10),

            color: checkedValue ? Colors.grey[350] : Colors.yellow),

        child: Padding(

          padding: const EdgeInsets.all(8.0),

          child: CheckboxListTile(

            activeColor: Colors.black,

            controlAffinity: ListTileControlAffinity.leading,

            title: Text(

              'perform an exorcism',

              style: TextStyle(

                decoration: checkedValue

                    ? TextDecoration.lineThrough

                    : TextDecoration.none,

              ),

            ),

            value: checkedValue,

            onChanged: (newCheckedValue) {

              setState(() {

                checkedValue = newCheckedValue!;

              });

            },

          ),

        ),

      ),

    );

  }

}

我最初只使用 ListView，但现在想尝试使用可重新排序的列表。我对扑扑完全是个菜鸟，所以这就是我已经走了多远！

Answer 1

列表中的每个项目都需要有唯一的键。你可以做的

todoTile(key: UniqueKey());

或

todoTile(key: Key('todoId'));