如何在flutter中创建子ListTile或某种子列表

时间:2018-08-25 18:54:53

标签: dart flutter navigation-drawer

从抽屉中单击选项后,如何创建子列表。该子列表应显示另一组选项。 enter image description here

1 个答案:

答案 0 :(得分:1)

使用扩展图块。

    import 'package:flutter/material.dart';

    class ExpansionTileSample extends StatelessWidget {
      @override
      Widget build(BuildContext context) {
        return MaterialApp(
          home: Scaffold(
            appBar: AppBar(
              title: const Text('ExpansionTile'),
            ),
            drawer: Container(
              color: Colors.white,
              width: 200.0,
              child: ListView.builder(
                itemBuilder: (BuildContext context, int index) =>
                    EntryItem(data[index]),
                itemCount: data.length,
              ),
            ),
            body: Text("hhelo World"),
          ),
        );
      }
    }

    // One entry in the multilevel list displayed by this app.
    class Entry {
      Entry(this.title, [this.children = const <Entry>[]]);

      final String title;
      final List<Entry> children;
    }

    // The entire multilevel list displayed by this app.
    final List<Entry> data = <Entry>[
      Entry(
        'Chapter A',
        <Entry>[
          Entry(
            'Section A0',
            <Entry>[
              Entry('Item A0.1'),
              Entry('Item A0.2'),
              Entry('Item A0.3'),
            ],
          ),
          Entry('Section A1'),
          Entry('Section A2'),
        ],
      ),
      Entry(
        'Chapter B',
        <Entry>[
          Entry('Section B0'),
          Entry('Section B1'),
        ],
      ),
      Entry(
        'Chapter C',
        <Entry>[
          Entry('Section C0'),
          Entry('Section C1'),
          Entry(
            'Section C2',
            <Entry>[
              Entry('Item C2.0'),
              Entry('Item C2.1'),
              Entry('Item C2.2'),
              Entry('Item C2.3'),
            ],
          ),
        ],
      ),
    ];

    // Displays one Entry. If the entry has children then it's displayed
    // with an ExpansionTile.
    class EntryItem extends StatelessWidget {
      const EntryItem(this.entry);

      final Entry entry;

      Widget _buildTiles(Entry root) {
        if (root.children.isEmpty) return ListTile(title: Text(root.title));
        return ExpansionTile(
          key: PageStorageKey<Entry>(root),
          title: Text(root.title),
          children: root.children.map(_buildTiles).toList(),
        );
      }

      @override
      Widget build(BuildContext context) {
        return _buildTiles(entry);
      }
    }

    void main() {
      runApp(ExpansionTileSample());
    }