如何将 ReorderableListView 与 flutter_bloc 一起使用？

Question

我是 flutter_bloc 的新手，我正在尝试实现 ReorderableListView，以允许用户重新排列列表视图中文本字段的顺序。

不幸的是，它不起作用。将 listtile 放到新位置后，它会变回旧位置：

这是屏幕中的输出：

class _Levels extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return BlocBuilder<DifficultyLevelsCubit, DifficultyLevelsState>(
      builder: (context, state) {
        print('rebuild');
        return Flexible(
          child: ReorderableListView(
            shrinkWrap: true,
            children: state.levels
                .asMap()
                .map((i, lvl) => MapEntry(
                      i,
                      ListTile(
                        key: ValueKey(i),
                        title: TextField(
                          onChanged: (lvl) => context
                              .read<DifficultyLevelsCubit>()
                              .levelChanged(lvl, i),
                          decoration: InputDecoration(
                            labelText: 'Level',
                            helperText: '',
                            errorText: state.levels[i].invalid
                                ? 'invalid level'
                                : null,
                          ),
                        ),
                        trailing: Icon(Icons.menu),
                      ),
                    ))
                .values
                .toList(),
            onReorder: (int oldIndex, int newIndex) => context
                .read<DifficultyLevelsCubit>()
                .orderChanged(oldIndex, newIndex),
          ),
        );
      },
    );
  }
}

这是我在cubit 类中实现的重新排序功能：

void orderChanged(int oldIndex, int newIndex) {
    List<DiffLevel> _list = state.levels;

    if (newIndex > oldIndex) {
      newIndex -= 1;
    }
    final items = _list.removeAt(oldIndex);
    _list.insert(newIndex, items);

    emit(state.copyWith(levels: _list));
}

有人知道为什么会出现这种行为以及如何解决这个问题吗？提前致谢！

注意：print('rebuild)` 不会在重新排序时触发。我真的不明白为什么，因为我在 reorder 函数中发出状态并期望 blocbuilder 对该更改做出反应。

Answer 1

这里发生的事情是你正在改变同一个列表而不是覆盖它 - bloc 期望和全新的列表以便重建。

另外，我不完全确定你可以像这样直接发出状态。我通常遵循here 建议的模式，其中发出的状态带有更新的列表

 const ListState.success(List<Item> items)
      : this._(status: ListStatus.success, items: items);

话虽如此，这里??是我建议的方法！

void orderChanged(int oldIndex, int newIndex) {

    if (newIndex > oldIndex) {
      newIndex -= 1;
    }

// First get the items at the old index
    final items = state.levels[oldIndex];

//Then remove it from the old position and insert it at the new one
    final reorderedList = List.of(state.levels)
    ..removeWhere((element) => element.id == items.id)
    ..insert(newIndex, items);

    emit((ListState.success(reorderedList);
}