如何在 ExpansionTile 中获取 ListTile 索引？

问题描述

展开列表然后单击子项后，我希望单击的行更改颜色。此时，索引所有时间为 0，这会导致所有子项突出显示。如何获取正确的索引以便仅突出显示单击的行？

当前状态：

Image

车辆类别：

class Vehicle {
  final String title;
  List<String> contents = [];
  final IconData icon;

  Vehicle(this.title,this.contents,this.icon);
}

对象列表：

List<Vehicle> vehicles = [
  Vehicle(
    'Bike',['Vehicle no. 1','Vehicle no. 2','Vehicle no. 7','Vehicle no. 10'],Icons.motorcycle,),Vehicle(
    'Cars',['Vehicle no. 3','Vehicle no. 4','Vehicle no. 6'],Icons.directions_car,];

小工具：

class CreateNewViewPage extends StatefulWidget {
  @override
  State<StatefulWidget> createState() => _CreateNewViewPage();
}

class _CreateNewViewPage extends State<CreateNewViewPage> {
  int _selectedindex;

  @override
  void initState() {
    super.initState();
  }

  @override
  Widget build(BuildContext context) {

    return Scaffold(
      backgroundColor: const Color(0xFF000624),appBar: AppBar(
        elevation: 0,backgroundColor: Colors.transparent,title: Text(
          'Example',style: TextStyle(color: Colors.white),leading: IconButton(
          icon: Icon(Icons.arrow_back),onpressed: () {
            Navigator.pop(context);
          },body: Column(
        children: <Widget>[
          Divider(
            color: Colors.white,Expanded(
            child: Container(
              width: MediaQuery.of(context).size.width / 1.4,child: ListView.builder(
                itemCount: 2,itemBuilder: (context,index) {
                  return Card(
                    child: ExpansionTile(
                      title: Text(vehicles[index].title,style: TextStyle(fontSize: 20.0,fontWeight: FontWeight.bold,fontStyle: FontStyle.italic),children: <Widget>[
                        Column(
                          children: _buildExpandableContent(vehicles[index],index),],);
                },)
        ],);
  }

  _buildExpandableContent(Vehicle vehicle,index) {
    List<Widget> columnContent = [];

    for (String content in vehicle.contents)
      columnContent.add(
        ListTile(
          title: Text(content,style: new TextStyle(fontSize: 18.0),leading: Icon(vehicle.icon),tileColor: _selectedindex == index ? Colors.blue : null,onTap: () {
            setState(() {
              _selectedindex = index;
            });
          },);

    return columnContent;
  }
}

解决方法

更新您的 _buildExpandableContent 方法，如以下代码所示：

 List<Widget> _buildExpandableContent(Vehicle vehicle,index) {
        return List.generate(vehicle.contents.length,(index) {
          return ListTile(
            title: Text(
              vehicle.contents[index],style: new TextStyle(fontSize: 18.0),),leading: Icon(vehicle.icon),tileColor: _selectedIndex == index ? Colors.blue : null,onTap: () {
              setState(() {
                print('Selected Index : $index');// printing selected value to console
                _selectedIndex = index;
              });
            },);
        });
      }

控制台输出：

I/flutter ( 9502): Selected Index : 0
I/flutter ( 9502): Selected Index : 1
I/flutter ( 9502): Selected Index : 2
I/flutter ( 9502): Selected Index : 3
I/flutter ( 9502): Selected Index : 0
I/flutter ( 9502): Selected Index : 1
I/flutter ( 9502): Selected Index : 2

用户界面输出：

现在您将在点击 ListTile 内的 ExpansionTile 时获得正确的索引。

,

在对其子项使用 ExpansionTile 索引时出现问题：

您正在通过列表视图构建器生成 ExpansionTile，并将索引传递给 _buildExpandableContent 方法。因此，ExpansionTile 的所有子项的索引都相同。所以，ExpansionTile 中选择的所有子项。您需要从 Vehicle.contents 中获取索引。我已经按照我的方法尝试过了。修改了 _buildExpandableContent 如下。

    _buildExpandableContent(Vehicle vehicle,index) {
    return List.generate(vehicle.contents.length,(index) {
      return ListTile(
        title: Text(
          vehicle.contents[index],onTap: () {
          setState(() {
            _selectedIndex = index;
          });
        },);
    });
  }

为了供您参考，我在下面附上了具有可运行状态的示例图片。

Demo Picture