如何在Flutter Cupertino应用中实现可重排列表？

要实现长按拖动重排的Cupertino风格列表，我们可以结合ReorderableListView与Cupertino组件达成类似iPhone提醒事项的效果，以下是完整实现代码：

import 'package:flutter/cupertino.dart';

void main() {
  runApp(const CupertinoApp(
    title: 'Cupertino Reorderable List',
    theme: CupertinoThemeData(brightness: Brightness.light),
    home: ReorderableCupertinoListPage(),
  ));
}

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

  @override
  State<ReorderableCupertinoListPage> createState() => _ReorderableCupertinoListPageState();
}

class _ReorderableCupertinoListPageState extends State<ReorderableCupertinoListPage> {
  late List<String> _items;

  @override
  void initState() {
    super.initState();
    _items = List.generate(5, (index) => 'Item ${index + 1}');
  }

  void _onReorder(int oldIndex, int newIndex) {
    setState(() {
      if (newIndex > oldIndex) {
        newIndex -= 1;
      }
      final item = _items.removeAt(oldIndex);
      _items.insert(newIndex, item);
    });
  }

  @override
  Widget build(BuildContext context) {
    return CupertinoPageScaffold(
      navigationBar: const CupertinoNavigationBar(
        middle: Text('Cupertino Reorderable List'),
      ),
      child: SafeArea(
        child: CupertinoListSection(
          header: const Text('Cupertino Items'),
          children: [
            ReorderableListView(
              shrinkWrap: true,
              physics: const NeverScrollableScrollPhysics(),
              onReorder: _onReorder,
              children: _items.map((item) {
                return CupertinoListTile(
                  key: Key(item),
                  title: Text(item),
                  // 可选：添加右侧拖动手柄，贴近提醒事项交互逻辑
                  trailing: const CupertinoListTileChevron(),
                );
              }).toList(),
            ),
          ],
        ),
      ),
    );
  }
}

关键实现说明： #

• 状态管理：用StatefulWidget维护列表数据_items，重排后通过setState更新UI。
• ReorderableListView集成：将CupertinoListTile作为子项传入ReorderableListView，利用其内置的长按拖动重排能力。设置shrinkWrap: true和NeverScrollableScrollPhysics是为了适配CupertinoListSection布局，避免滚动冲突。
• 重排逻辑：_onReorder函数处理列表项位置调整，当新位置在旧位置之后时，需将newIndex减1，这是ReorderableListView的标准处理规则。
• iOS风格适配：保留CupertinoListTile原生样式，可选添加CupertinoListTileChevron作为拖动手柄，和iPhone提醒事项的交互体验更匹配。

内容的提问来源于stack exchange，提问作者bagratte