dart 可重新排序的列表和键在 Flutter

6pp0gazn  于 2023-10-13  发布在  Flutter
关注(0)|答案(1)|浏览(89)

我正试图用我的简单待办事项应用程序从ListView到Reorderable List。我想我需要一把钥匙,但不知道在哪里。

import 'package:flutter/material.dart';

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

class TodoApp extends StatefulWidget {
  const TodoApp({super.key});

  @override
  State<TodoApp> createState() => _TodoAppState();
}

class _TodoAppState extends State<TodoApp> {
  final _textyController = TextEditingController();
  List<String> storedText = [];
  List<bool> checkedValue = [];

  @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(
                //
                // LIST STARTS
                //

                child: ReorderableListView.builder(
                  reverse: true,
                  itemCount: storedText.length,
                  onReorder: (oldIndex, newIndex) {
                    setState(() {
                      if (oldIndex < newIndex) {
                        newIndex -= 1;
                      }
                      final String item = storedText.removeAt(oldIndex);
                      storedText.insert(newIndex, item);
                    });
                  },
                  //LEARN: UNDERSTAND THIS
                  itemBuilder: (context, index) {
                    //
                    //{STYLING} LIST TILE STARTS
                    //
                    return Padding(
                      padding: const EdgeInsets.symmetric(vertical: 8.0),
                      child: Container(
                        decoration: BoxDecoration(
                            borderRadius: BorderRadius.circular(10),
                            color: Colors.yellow),
                        child: Padding(
                          padding: const EdgeInsets.all(8.0),
                          //
                          //LIST TILE STARTS
                          //
                          child: CheckboxListTile(
                              activeColor: Colors.black,
                              controlAffinity: ListTileControlAffinity.leading,
                              //LEARN: UNDERSTAND THIS
                              title: Text(storedText[index]),
                              value: checkedValue.isNotEmpty
                                  ? checkedValue[index]
                                  : false,
                              onChanged: (newCheckedValue) {
                                setState(() {
                                  checkedValue[index] =
                                      newCheckedValue ?? false;
                                });
                              }),
                        ),
                      ),
                    );
                  },
                ),
              ),
              Padding(
                padding: const EdgeInsets.symmetric(vertical: 20.0),
                child: TextField(
                  controller: _textyController,
                  onSubmitted: (value) {
                    setState(() {
                      //LEARN: UNDERSTAND THIS
                      storedText.insert(0, value);
                      checkedValue.insert(0, false);
                      _textyController.clear();
                    });
                  },
                  decoration: const InputDecoration(
                    labelText: '+ Add a task',
                    labelStyle: TextStyle(
                      color: Colors.grey,
                    ),
                    border: OutlineInputBorder(),
                    focusedBorder: OutlineInputBorder(
                      borderSide: BorderSide(color: Colors.black),
                    ),
                    focusColor: Colors.blue,
                  ),
                  cursorColor: Colors.grey[400],
                ),
              ),
            ],
          )),
    );
  }
}

我试着在CheckboxListTile中添加一个键,但是没有成功(或者我没有正确地做?)我把钥匙设为“钥匙:ValueKey(storedText)”
我甚至试过“钥匙:ValueKey(storedText[index])”,这似乎也不起作用。

dauxcl2d

dauxcl2d1#

itemBuilder小部件需要在每个项目上都有key

itemBuilder: (context, index) {
  return Padding(
    key: Key('$index ${storedText[index]}'),//make sure unique one, you can also use `index`
    padding: const EdgeInsets.symmetric(vertical: 8.0),

相关问题