如何在Flutter库比蒂诺应用程序中创建可重新排序的列表？

我需要的是一个在iOS风格的库比蒂诺Flutter应用程序中的可重新排序的列表，非常像iPhone的Reminders应用程序中的列表。
更具体地说，假设我们有以下flutter应用程序：

import 'package:flutter/cupertino.dart';

void main() {
  runApp(
    CupertinoApp(
      title: 'Cupertino App',
      theme: const CupertinoThemeData(brightness: Brightness.light),
      home: CupertinoPageScaffold(
        navigationBar: const CupertinoNavigationBar(
          middle: Text('Cupertino List'),
        ),
        child: SafeArea(
          child: CupertinoListSection(
            header: const Text('Cupertino Items'),
            children: [
              for (var i = 1; i < 6; i++)
                CupertinoListTile(
                  key: Key('$i'),
                  title: Text('Item $i'),
                ),
            ],
          ),
        ),
      ),
    ),
  );
}

这将创建一个静态列表的5个项目命名为项目1至项目6。我希望能够长时间点击一个项目，并将其拖动到新的位置-很像什么材料的ReorderableListView完成。

谢谢你让我在很长一段时间后在库比蒂诺的应用程序上工作：）。
这是我的解决方案：

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

  @override
  State<ReorderableListIos> createState() => _ReorderableListIosState();
}

class _ReorderableListIosState extends State<ReorderableListIos> {
  final List<int> generatedIntList =
      List<int>.generate(10, (int index) => index);

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: ReorderableListView(
        children: [
          for (int currentIndex = 0;
              currentIndex < generatedIntList.length;
              currentIndex += 1)
            ListTile(
                key: Key('$currentIndex'),
                title: Text(' ${generatedIntList[currentIndex]}')),
        ],
        onReorder: (int oldIndex, int newIndex) {
          setState(() {
            if (oldIndex < newIndex) {
              newIndex -= 1;
            }
            final int itemToRemove = generatedIntList.removeAt(oldIndex);
            generatedIntList.insert(newIndex, itemToRemove);
          });
        },
      ),
    );
  }
}

如果你得到一个错误，告诉你：
未找到MaterialLocalizations。

ReorderableListView widgets require MaterialLocalizations to be provided by a Localizations widget ancestor.
The material library uses Localizations to generate messages, labels, and abbreviations.

To introduce a MaterialLocalizations, either use a MaterialApp at the root of your application to include them automatically, or add a Localization widget with a MaterialLocalizations delegate.

尝试将localizations添加到CupertinoApp，如下所示：

localizationsDelegates: [
      DefaultMaterialLocalizations.delegate,
      DefaultCupertinoLocalizations.delegate,
      DefaultWidgetsLocalizations.delegate,
 ],

这将你的主函数变成这样：

void main() {
  runApp(const CupertinoApp(
    home: ReorderableListIos(),
    localizationsDelegates: [
      DefaultMaterialLocalizations.delegate,
      DefaultCupertinoLocalizations.delegate,
      DefaultWidgetsLocalizations.delegate,
    ],
  ));
}

希望这有帮助！
编辑：为了发挥一些创造力，让我们更改拖动手柄的图标：首先更改ReorderableListView：

ReorderableListView(
  buildDefaultDragHandles: false,
  ...

然后添加一个尾随的ReorderableDragStartListener以更改图标：

ListTile(
  key: Key('$currentIndex'),
  title: Text(' ${generatedIntList[currentIndex]}'),
  trailing: ReorderableDragStartListener(
  key: ValueKey<int>(generatedIntList[currentIndex]),
    index: currentIndex,
    child: const Icon(CupertinoIcons.bars),
  ),
)

最终版本：

如何在Flutter库比蒂诺应用程序中创建可重新排序的列表？

1条答案

相关问题

热门标签

最新问答