dart Flutter可重排序表

34gzjxbg 于 2023-10-13 发布在 Flutter

关注(0)|答案(2)|浏览(91)

我正在创建一个简单的应用程序。首先处理UI，所以现在都是愚蠢的数据，而不是用户输入。
我可以用列表视图让它工作得很好，但是当我尝试用可重排序的列表时，它突然变难了（因为键等）。我想保持我的瓷砖在一个单独的文件，以确保代码更容易阅读太多。
到目前为止，我的代码包括以下内容：
我的主.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,
                ),
              ),
            ],
          )),
    );
  }
}

我的瓷砖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，但现在想尝试使用可重新排序的列表。我是一个完整的菜鸟扑所以这是我有多远！

dart

来源：https://stackoverflow.com/questions/77262434/flutter-reorderable-list

2条答案

按热度按时间

dldeef671#

就像@Soliev的答案一样，ReorderableListView中的每个项目都必须有Key来识别。因此，您应该为它标识Key，这样ValueKey或ObjectKey将更有效
您可以查看ReorderableListView的documentation以了解有关此方面的更多信息。
请注意，所有列表项必须有一个键。（引用自文档）。
下面是Flutter示例中的ReorderableListView示例：

import 'package:flutter/material.dart';

/// Flutter code sample for [ReorderableListView].

void main() => runApp(const ReorderableApp());

class ReorderableApp extends StatelessWidget {
  const ReorderableApp({super.key});

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(title: const Text('ReorderableListView Sample')),
        body: const ReorderableExample(),
      ),
    );
  }
}

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

  @override
  State<ReorderableExample> createState() => _ReorderableListViewExampleState();
}

class _ReorderableListViewExampleState extends State<ReorderableExample> {
  final List<int> _items = List<int>.generate(50, (int index) => index);

  @override
  Widget build(BuildContext context) {
    final ColorScheme colorScheme = Theme.of(context).colorScheme;
    final Color oddItemColor = colorScheme.primary.withOpacity(0.05);
    final Color evenItemColor = colorScheme.primary.withOpacity(0.15);

    return ReorderableListView(
      padding: const EdgeInsets.symmetric(horizontal: 40),
      children: <Widget>[
        for (int index = 0; index < _items.length; index += 1)
          ListTile(
            key: Key('$index'),
            tileColor: _items[index].isOdd ? oddItemColor : evenItemColor,
            title: Text('Item ${_items[index]}'),
          ),
      ],
      onReorder: (int oldIndex, int newIndex) {
        setState(() {
          if (oldIndex < newIndex) {
            newIndex -= 1;
          }
          final int item = _items.removeAt(oldIndex);
          _items.insert(newIndex, item);
        });
      },
    );
  }
}

赞(0）回复(0）举报 2023-10-13

unguejic2#

您需要为列表中的每个项目设置键。你可以做

todoTile(key: UniqueKey());

或

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

赞(0）回复(0）举报 2023-10-13

我来回答

dart Flutter可重排序表

2条答案

相关问题

热门标签

最新问答