如何在不使用索引的情况下添加第二个带多ListTile的ExpansionTile

你不需要用索引，直接在ListView的children数组里添加第二个ExpansionTile组件就可以了。如果后续要加更多，同样直接追加就行。

另外，为了避免重复代码、方便维护，建议把重复的部分封装成可复用组件，比如子项的ListTile，或者整个ExpansionTile模板。

修改后的完整代码 #

import 'package:flutter/material.dart';

class ExerciseScreen extends StatefulWidget {
  const ExerciseScreen({Key? key}) : super(key: key);

  @override
  State<ExerciseScreen> createState() => _ExerciseScreenState();
}

class _ExerciseScreenState extends State<ExerciseScreen> {
  // 封装子项ListTile的复用方法
  Widget _buildSubItem(String level, String title, String subtitle) {
    return ListTile(
      leading: CircleAvatar(
        child: Text(level),
      ),
      title: Text(title),
      subtitle: Text(subtitle),
    );
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('Table of Contents CEFR'),
      ),
      body: ListView(
        children: [
          // 第一个ExpansionTile
          ExpansionTile(
            leading: Padding(
              padding: const EdgeInsets.all(8.0),
              child: CircleAvatar(
                backgroundColor: const Color.fromARGB(255, 0, 182, 91),
                child: const Text(
                  'A1',
                  style: TextStyle(fontSize: 15, color: Colors.white),
                ),
              ),
            ),
            title: const Text(
              'To be: is, am, are',
              style: TextStyle(fontSize: 21, color: Colors.black),
            ),
            children: [
              _buildSubItem('A1', 'Affirmative ideas', 'Singular and plural subjects'),
              _buildSubItem('A1', 'Are: plural verb', 'Positive ideas using plural subjects'),
              _buildSubItem('A1', 'Is : singular verb', 'Positive ideas using singular subjects'),
              _buildSubItem('A1', 'Questions', 'Interrogative ideas - subject/verb/switch '),
              _buildSubItem('A1', 'Questions', 'Closed questions (yes/no)'),
            ],
          ),
          // 第二个ExpansionTile
          ExpansionTile(
            leading: Padding(
              padding: const EdgeInsets.all(8.0),
              child: CircleAvatar(
                backgroundColor: const Color.fromARGB(255, 0, 123, 255),
                child: const Text(
                  'A2',
                  style: TextStyle(fontSize: 15, color: Colors.white),
                ),
              ),
            ),
            title: const Text(
              'Past Simple: was, were',
              style: TextStyle(fontSize: 21, color: Colors.black),
            ),
            children: [
              _buildSubItem('A2', 'Affirmative past', 'Singular and plural subjects'),
              _buildSubItem('A2', 'Negative past', 'Using "was not/weren\'t"'),
              _buildSubItem('A2', 'Past questions', 'Yes/no questions with was/were'),
            ],
          ),
          // 后续可以继续添加更多ExpansionTile
        ],
      ),
    );
  }
}

说明 #

1. 添加第二个ExpansionTile：直接在ListView的children数组里新增一个ExpansionTile组件，设置不同的标题、leading样式和子项即可，完全不需要索引。
2. 封装复用组件：用_buildSubItem方法封装重复的ListTile，减少代码冗余，后续修改子项样式只需要改这一处。
3. 自定义样式：第二个ExpansionTile的leading用了不同的背景色，你可以根据需求调整颜色、标题、子项内容等。

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