Flutter中如何将ListView的ItemB按字母顺序显示？

问题背景 #

在Flutter项目的_TestScreen1State状态类中，已实现数据存储、显示项切换、搜索过滤功能，现在需要补充：切换到以itemB为主显示项时，列表（含搜索结果）按itemB的字母顺序排列。

现有核心代码如下：

状态类及初始数据 #

class _TestScreen1State extends State<TestScreen1> {
  late bool _changeItemA_to_ItemB = true;
  List<Map<String, String>> _foundItems = []; // 需补充声明

  final List<Map<String, String>> _lexiqueItems = [
    {'itemA': "Aa_ItemA",  'itemB': "Za_ItemB"},
    {'itemA': "Ab_ItemA",  'itemB': "Zb_ItemB"},
    {'itemA': "Ac_ItemA",  'itemB': "Zc_ItemB"},
    {'itemA': "Ba_ItemA",  'itemB': "Ya_ItemB"},
    {'itemA': "Bb_ItemA",  'itemB': "Yb_ItemB"},
    {'itemA': "Bc_ItemA",  'itemB': "Yc_ItemB"},
    {'itemA': "Ca_ItemA",  'itemB': "Xa_ItemB"},
    {'itemA': "Cb_ItemA",  'itemB': "Xb_ItemB"},
    {'itemA': "Cc_ItemA",  'itemB': "Xc_ItemB"},
  ];

  @override
  void initState() {
    super.initState();
    _foundItems = _lexiqueItems;
    // 初始若默认显示itemB，直接排序
    if (!_changeItemA_to_ItemB) {
      _sortItems();
    }
  }

原搜索过滤方法 #

void _runFilter(String enteredKeyword) {
    List<Map<String, String>> results = [];
    if (enteredKeyword.isEmpty) {
      results = _lexiqueItems;
    } else {
      results = _lexiqueItems
          .where((item) => _changeItemA_to_ItemB
              ? item["itemA"]!.toLowerCase().contains(enteredKeyword.toLowerCase())
              : item["itemB"]!.toLowerCase().contains(enteredKeyword.toLowerCase())
      ).toList();
    }

    setState(() {
      _foundItems = results;
    });
  }

原ListView代码 #

ListView.builder(
  itemCount: _foundItems.length,
  itemBuilder: (context, index) => Card(
    key: ValueKey(_changeItemA_to_ItemB ? _foundItems[index]["itemA"] : _foundItems[index]["itemB"]),
    color: Colors.indigo[100],
    elevation: 4,
    margin: const EdgeInsets.symmetric(vertical: 10),
    child: ListTile(
      title: Text(_changeItemA_to_ItemB ? _foundItems[index]["itemA"] : _foundItems[index]["itemB"]),
      subtitle: Text(_changeItemA_to_ItemB ? _foundItems[index]["itemB"] : _foundItems[index]["itemA"]),
    ),
  ),
)

修改方案 #

1. 添加排序方法 #

新增一个通用排序方法，根据当前显示状态决定排序字段：

void _sortItems([List<Map<String, String>>? items]) {
  final targetList = items ?? _foundItems;
  targetList.sort((a, b) {
    if (_changeItemA_to_ItemB) {
      // 显示itemA时可按itemA排序（可选，按需开启）
      return a["itemA"]!.toLowerCase().compareTo(b["itemA"]!.toLowerCase());
    } else {
      // 显示itemB时按itemB字母顺序排序
      return a["itemB"]!.toLowerCase().compareTo(b["itemB"]!.toLowerCase());
    }
  });
}

2. 修改搜索过滤方法 #

在得到过滤结果后立即排序：

void _runFilter(String enteredKeyword) {
  List<Map<String, String>> results = [];
  if (enteredKeyword.isEmpty) {
    results = _lexiqueItems;
  } else {
    results = _lexiqueItems
        .where((item) => _changeItemA_to_ItemB
            ? item["itemA"]!.toLowerCase().contains(enteredKeyword.toLowerCase())
            : item["itemB"]!.toLowerCase().contains(enteredKeyword.toLowerCase())
    ).toList();
  }

  // 对过滤结果排序
  _sortItems(results);

  setState(() {
    _foundItems = results;
  });
}

3. 处理显示状态切换 #

在切换按钮的点击方法中，触发重新排序并更新状态：

void _toggleDisplayMode() {
  setState(() {
    _changeItemA_to_ItemB = !_changeItemA_to_ItemB;
    // 切换后重新排序列表
    _sortItems();
  });
}

关键说明 #

• 排序时用toLowerCase()保证不区分大小写的排序逻辑，符合常规用户习惯
• 排序方法支持传入待排序列表，既可以处理初始数据，也能处理搜索结果
• 切换显示模式后必须重新排序，确保列表按新的主显示项字段排序

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