如何在 Flutter 中一次只创建一个 Expand 来创建 ExpansionTile？

Question

我必须创建多个按语法展开和折叠的 ExpansionTile。

意味着如果我展开其他ExpansionTile，则折叠当前展开的Tile。

Answer 1

请参考以下示例代码

import 'package:flutter/material.dart';
import 'dart:async';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      // Application name
      title: 'Flutter Hello World',
      // Application theme data, you can set the colors for the application as
      // you want
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      // A widget which will be started on application startup
      home: MyHomePage(),
    );
  }
}

class MyHomePage extends StatelessWidget {
  int activeMeterIndex; // Expansion Panel
  final StreamController activeMeterIndexStreamControl =
      StreamController.broadcast();
  Stream get onUpdateActiveIndex => activeMeterIndexStreamControl.stream;
  void updateExpansionTile() =>
      activeMeterIndexStreamControl.sink.add(activeMeterIndex);

  @override
  Widget build(BuildContext context) {
    final size = MediaQuery.of(context).size;
    return Scaffold(
      appBar: AppBar(
        // The title text which will be shown on the action bar
        title: Text("title"),
      ),
      body: ListView.builder(
          shrinkWrap: true,
          scrollDirection: Axis.vertical,
          physics: NeverScrollableScrollPhysics(),
          itemCount: 4,
          itemBuilder: (BuildContext context, int i) {
            return Padding(
              padding: const EdgeInsets.symmetric(
                vertical: 8.0,
                horizontal: 10.0,
              ),
              child: Container(
                decoration: BoxDecoration(
                    border: Border.all(
                  color: Colors.purple,
                )),
                child: StreamBuilder(
                    stream: onUpdateActiveIndex,
                    builder: (context, snapShot) {
                      return new ExpansionPanelList(
                        expandedHeaderPadding: EdgeInsets.zero,
                        expansionCallback: (int index, bool status) {
                          activeMeterIndex = snapShot.data == i ? null : i;
                          updateExpansionTile();
                        },
                        children: [
                          new ExpansionPanel(
                            canTapOnHeader: true,
                            isExpanded: snapShot.data == i,
                            headerBuilder:
                                (BuildContext context, bool isExpanded) {
                              return ListTile(
                                dense: true,
                                contentPadding: EdgeInsets.only(
                                  left: 15.0,
                                  top: 1.5,
                                  bottom: 1.5,
                                ),
                                leading: Container(
                                  width: 20,
                                  height: 20,
                                  decoration: BoxDecoration(
                                    borderRadius: BorderRadius.circular(15),
                                    color: Colors.grey,
                                  ),
                                  child: Icon(
                                    Icons.star,
                                    size: 10.0,
                                    color: Colors.yellow,
                                  ),
                                ),
                                title: Column(
                                  crossAxisAlignment: CrossAxisAlignment.start,
                                  children: [
                                    Text(
                                      "Name",
                                      style: TextStyle(
                                        color: Colors.black,
                                        fontSize: 14,
                                      ),
                                    ),
                                    RichText(
                                      text: TextSpan(children: <TextSpan>[
                                        TextSpan(
                                          text: "text",
                                          style: TextStyle(
                                            color: Colors.purple,
                                            fontSize: 14,
                                            fontWeight: FontWeight.w600,
                                          ),
                                        ),
                                        TextSpan(
                                          text: "text",
                                          style: TextStyle(
                                            color: Colors.purple,
                                            fontSize: 11.0,
                                            fontWeight: FontWeight.w600,
                                          ),
                                        ),
                                      ]),
                                    ),
                                    Text(
                                      "other details",
                                    ),
                                  ],
                                ),
                              );
                            },
                            body: new Container(
                              padding: EdgeInsets.symmetric(
                                vertical: 2.0,
                                horizontal: 2.13,
                              ),
                              child: Column(
                                crossAxisAlignment: CrossAxisAlignment.start,
                                children: [
                                  Container(
                                    padding: EdgeInsets.symmetric(
                                      horizontal: 2.3,
                                    ),
                                    child: Column(
                                      crossAxisAlignment:
                                          CrossAxisAlignment.start,
                                      children: [
                                        Text(
                                          "Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.",
                                        ),
                                        Text(
                                          "Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.",
                                        ),
                                      ],
                                    ),
                                  )
                                ],
                              ),
                            ),
                          ),
                        ],
                      );
                    }),
              ),
            );
          }),
    );
  }
}

Answer 2

抱歉，我晚了 2 年..但你可以使用该包：https://pub.dev/packages/expansion_tile_list 只需将您的 ExpansionTiles 添加为 ExpansionTileList 的子项

ExpansionTileList.radio(
  children: <ExpansionTile>[
    ExpansionTile(
      title: Text('Tile 1'),
      children: <Widget>[Text('Child 1')],
    ),
    ExpansionTile(
      title: Text('Tile 2'),
      children: <Widget>[Text('Child 2')],
    ),
  ],
);

Disclaimer: I am the Author