在 Flutter 中通过拖放重新排序 SliverList 中的项目

Posted 2023-02-23

【中文标题】在 Flutter 中通过拖放重新排序 SliverList 中的项目

【英文标题】：Reorder items in SliverList in Flutter with Drag & Drop

【发布时间】：2019-05-27 13:41:39

【问题描述】：

我使用 SliverList 和 SliverChildBuilderDelegate 来动态生成列表项。现在我正在尝试允许用户通过拖放来重新排序列表项在一行中的每个项目上的句柄图标上。

我尝试了不同的方法（例如 Draggable Widget），但到目前为止我还没有找到解决方案。有没有人已经使用 SliverList 小部件的拖放重新排序并且可以给我一个提示？

无法使用 ReorderableListView Widget，导致将 ListView 与 SliverList 混合。我想使用 SliverAppBar 来实现滚动淡出效果，如您在此处看到的：https://medium.com/flutter-io/slivers-demystified-6ff68ab0296f

这是我的 SliverList 的结构：

return Scaffold(
  body: RefreshIndicator(
    ...
    child: CustomScrollView(
      ...
      slivers: <Widget>[
        SliverAppBar(...),
        SliverList(
          delegate: SliverChildBuilderDelegate(...),
        )
        ...

在此先感谢并最好， 迈克尔

【参考方案1】：

在 pub 上查看这个 reorderables 包。它最近增加了对 SliverList 的支持。

此处截图：ReorderableSliverList

该示例具有条子列表和应用栏，并显示您正在寻找的内容。只需将代码中的 SliverList 和 SliverChildBuilderDelegate 替换为包中的计数器部分即可。

class _SliverExampleState extends State<SliverExample> 
  List<Widget> _rows;

  @override
  void initState() 
    super.initState();
    _rows = List<Widget>.generate(50,
        (int index) => Text('This is sliver child $index', textScaleFactor: 2)
    );
  

  @override
  Widget build(BuildContext context) 
    void _onReorder(int oldIndex, int newIndex) 
      setState(() 
        Widget row = _rows.removeAt(oldIndex);
        _rows.insert(newIndex, row);
      );
    
    ScrollController _scrollController = PrimaryScrollController.of(context) ?? ScrollController();

    return CustomScrollView(
      // a ScrollController must be included in CustomScrollView, otherwise
      // ReorderableSliverList wouldn't work
      controller: _scrollController,
      slivers: <Widget>[
        SliverAppBar(
          expandedHeight: 210.0,
          flexibleSpace: FlexibleSpaceBar(
            title: Text('ReorderableSliverList'),
            background: Image.network(
              'https://upload.wikimedia.org/wikipedia/commons/thumb/6/68/Yushan'
                '_main_east_peak%2BHuang_Chung_Yu%E9%BB%83%E4%B8%AD%E4%BD%91%2B'
                '9030.png/640px-Yushan_main_east_peak%2BHuang_Chung_Yu%E9%BB%83'
                '%E4%B8%AD%E4%BD%91%2B9030.png'),
          ),
        ),
        ReorderableSliverList(
          delegate: ReorderableSliverChildListDelegate(_rows),
          // or use ReorderableSliverChildBuilderDelegate if needed
//          delegate: ReorderableSliverChildBuilderDelegate(
//            (BuildContext context, int index) => _rows[index],
//            childCount: _rows.length
//          ),
          onReorder: _onReorder,
        )
      ],
    );
  

【讨论】：

我有一些使用 ReorderableSliverChildListDelegate 显示的可修改元素。它工作正常，但是当我尝试订购时，它不会更新列表中的顺序。此列表不是动态 BTW，我需要更新不同类别中的元素

【参考方案2】：

您可以查看flutter_reorderable_list。我还没有尝试过，目前正在推出我自己的，但它看起来不错，the example 使用带有 SliverList 的 CustomScrollView。