Flutter中如何获取多级子菜单侧边栏的ListView与ListTile选中索引？

要实现多级子菜单侧边栏中ListTile的选中索引跟踪，可以通过存储选中路径的方式来实现，具体步骤如下：

1. 添加选中状态变量 #

在侧边栏的State类中，定义一个列表用于存储多级选中的索引路径：

class _SidebarState extends State<Sidebar> {
  // 存储选中的多级索引路径，例如[0,1]表示第一级第0项的第二级第1个子项
  List<int> selectedPath = [];

  // ... 原有build方法和其他代码
}

2. 修改ListView构建方式 #

将原有basictiles.map(buildTile).toList()改为ListView.builder，传递根级菜单的索引和初始路径：

Expanded(
  child: ListView.builder(
    itemCount: basictiles.length,
    itemBuilder: (context, index) {
      return buildTile(
        basictiles[index],
        parentIndex: index,
        currentPath: [index],
        leftPadding: 16,
      );
    },
  ),
)

3. 重构buildTile方法，添加点击逻辑和路径传递 #

修改buildTile方法，接收当前路径参数，点击叶子ListTile时更新选中路径：

// 需导入package:flutter/foundation.dart使用listEquals，或自行实现列表相等判断
import 'package:flutter/foundation.dart';

Widget buildTile(
  BasicTile tile, {
  required double leftPadding,
  required int parentIndex,
  required List<int> currentPath,
}) {
  if (tile.tiles.isEmpty) {
    // 判断当前项是否为选中状态
    final isSelected = listEquals(selectedPath, currentPath);
    return ListTile(
      leading: tile.icon,
      contentPadding: EdgeInsets.only(left: leftPadding),
      title: Text(
        tile.title,
        style: TextStyle(color: isSelected ? Colors.blue : Colors.black),
      ),
      selected: isSelected,
      onTap: () {
        setState(() {
          selectedPath = List.from(currentPath);
          // 这里可以处理选中后的逻辑，比如打印选中路径
          print("选中的多级索引路径：$selectedPath");
          // 若仅需叶子节点的索引，取currentPath.last即可
          print("叶子节点索引：${currentPath.last}");
        });
      },
    );
  } else {
    return ExpansionTile(
      tilePadding: EdgeInsets.only(left: leftPadding),
      leading: tile.icon,
      title: Text(tile.title),
      children: tile.tiles.asMap().entries.map((entry) {
        final childIndex = entry.key;
        final childTile = entry.value;
        // 构建子项的路径：父路径 + 当前子项索引
        final childPath = List.from(currentPath)..add(childIndex);
        return buildTile(
          childTile,
          leftPadding: 16 + leftPadding,
          parentIndex: childIndex,
          currentPath: childPath,
        );
      }).toList(),
    );
  }
}

方案说明 #

• 用selectedPath列表完整记录选中项的多级索引，能清晰定位到选中的叶子节点在整个菜单结构中的位置
• 点击叶子ListTile时，通过setState更新选中路径，同时可以触发后续业务逻辑（比如页面跳转、状态同步等）
• 若需要高亮选中项，通过listEquals对比当前路径和选中路径，动态修改ListTile的样式

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