ExpansionTiles可用于生成两级或多级列表。

    Android screenshot
    Android截图

    这个应用程序用ExpansionTiles显示分层数据。点击一个标题会展开或折叠其子视图。

    当它显示在一个可滚动的组件中时，如使用ListView.builder()创建列表，这时ExpansionTiles可能非常有用，特别是对于Material Design中的“展开/折叠”列表。

    通过flutter create命令创建一个新项目，并用下面的代码替换lib/main.dart的内容来尝试运行一下。

    1. // Copyright 2017 The Chromium Authors. All rights reserved.
    2. // Use of this source code is governed by a BSD-style license that can be
    3. // found in the LICENSE file.
    5. import 'package:flutter/material.dart';
    7. class ExpansionTileSample extends StatelessWidget {
    8.   @override
    9.   Widget build(BuildContext context) {
    10.     return new MaterialApp(
    11.       home: new Scaffold(
    12.         appBar: new AppBar(
    13.           title: const Text('ExpansionTile'),
    14.         ),
    15.         body: new ListView.builder(
    16.           itemBuilder: (BuildContext context, int index) => new EntryItem(data[index]),
    17.           itemCount: data.length,
    18.         ),
    19.       ),
    20.     );
    21.   }
    22. }
    24. // One entry in the multilevel list displayed by this app.
    25. class Entry {
    26.   Entry(this.title, [this.children = const <Entry>[]]);
    27.   final String title;
    28.   final List<Entry> children;
    29. }
    31. // The entire multilevel list displayed by this app.
    32. final List<Entry> data = <Entry>[
    33.   new Entry('Chapter A',
    34.     <Entry>[
    35.       new Entry('Section A0',
    36.         <Entry>[
    37.           new Entry('Item A0.1'),
    38.           new Entry('Item A0.2'),
    39.           new Entry('Item A0.3'),
    40.         ],
    41.       ),
    42.       new Entry('Section A1'),
    43.       new Entry('Section A2'),
    44.     ],
    45.   ),
    46.   new Entry('Chapter B',
    47.     <Entry>[
    48.       new Entry('Section B0'),
    49.       new Entry('Section B1'),
    50.     ],
    51.   ),
    52.   new Entry('Chapter C',
    53.     <Entry>[
    54.       new Entry('Section C0'),
    55.       new Entry('Section C1'),
    56.       new Entry('Section C2',
    57.         <Entry>[
    58.           new Entry('Item C2.0'),
    59.           new Entry('Item C2.1'),
    60.           new Entry('Item C2.2'),
    61.           new Entry('Item C2.3'),
    62.         ],
    63.       ),
    64.     ],
    65.   ),
    66. ];
    68. // Displays one Entry. If the entry has children then it's displayed
    69. // with an ExpansionTile.
    70. class EntryItem extends StatelessWidget {
    71.   const EntryItem(this.entry);
    73.   final Entry entry;
    75.   Widget _buildTiles(Entry root) {
    76.     if (root.children.isEmpty)
    77.       return new ListTile(title: new Text(root.title));
    78.     return new ExpansionTile(
    79.       key: new PageStorageKey<Entry>(root),
    80.       title: new Text(root.title),
    81.       children: root.children.map(_buildTiles).toList(),
    82.     );
    83.   }
    85.   @override
    86.   Widget build(BuildContext context) {
    87.     return _buildTiles(entry);
    88.   }
    89. }
    91. void main() {
    92.   runApp(new ExpansionTileSample());
    93. }

    也可以看看: