如何在 Flutter 中单击另一个扩展图块后折叠已打开的扩展图块？

Question

我在我的应用程序中使用多个扩展图块。我需要在单击另一个图块后关闭已打开的图块。我尝试过使用默认情况下具有该功能的扩展面板。但我需要重新设计扩展瓷砖，所以我使用扩展瓷砖。如何在扩展磁贴中实现该功能

Answer 1

GitHub 中的这个答案应该可以解决问题。

\n

这是示例：

\n

import \'package:flutter/material.dart\';\n\nvoid main() => runApp(MyApp());\n\nclass MyApp extends StatelessWidget {\n  @override\n  Widget build(BuildContext context) {\n    return MaterialApp(\n      title: \'ExpansionTile Collapse\',\n      theme: ThemeData(\n        primarySwatch: Colors.blue,\n      ),\n      home: MyHomePage(title: \'ExpansionTile Collapse\'),\n    );\n  }\n}\n\nclass MyHomePage extends StatefulWidget {\n  MyHomePage({Key key, this.title}) : super(key: key);\n\n  final String title;\n\n  @override\n  _MyHomePageState createState() => _MyHomePageState();\n}\n\nclass _MyHomePageState extends State<MyHomePage> {\n  // selected\'s value = 0. For default first item is open.\n  int selected = 0; //attention\n\n  @override\n  Widget build(BuildContext context) {\n    return Scaffold(\n      appBar: AppBar(\n        centerTitle: true,\n        title: Text(\'ExpansionTile Collapse\',\n            style: TextStyle(color: Colors.white, fontWeight: FontWeight.bold)),\n      ),\n      body: Container(\n        color: Colors.white,\n        child: SingleChildScrollView(\n          child: Column(children: [\n            ListView.builder(\n              key: Key(\'builder ${selected.toString()}\'), //attention\n              padding: EdgeInsets.only(left: 13.0, right: 13.0, bottom: 25.0),\n              shrinkWrap: true,\n              physics: NeverScrollableScrollPhysics(),\n              itemCount: 5,\n              itemBuilder: (context, index) {\n                return Column(children: <Widget>[\n                  Divider(\n                    height: 17.0,\n                    color: Colors.white,\n                  ),\n                  ExpansionTile(\n                    key: Key(index.toString()), //attention\n                    initiallyExpanded: index == selected, //attention\n\n                    leading: Icon(\n                      Icons.person,\n                      size: 50.0,\n                      color: Colors.black,\n                    ),\n                    title: Text(\'ExpansionTile ${index}\',\n                        style: TextStyle(\n                            color: Color(0xFF09216B),\n                            fontSize: 17.0,\n                            fontWeight: FontWeight.bold)),\n                    subtitle: Text(\n                      \'Software Engineer\',\n                      style: TextStyle(\n                          color: Colors.black,\n                          fontSize: 13.0,\n                          fontWeight: FontWeight.bold),\n                    ),\n                    children: <Widget>[\n                      Padding(\n                        padding: EdgeInsets.all(25.0),\n                        child: Text(\n                          \'DETA\xc4\xb0L ${index} \\n\' + \'Expanded\',\n                        ),\n                      )\n                    ],\n                    onExpansionChanged: ((newState) {\n                      if (newState)\n                        setState(() {\n                          Duration(seconds: 20000);\n                          selected = index;\n                        });\n                      else\n                        setState(() {\n                          selected = -1;\n                        });\n                    }),\n                  ),\n                ]);\n              },\n            )\n          ]),\n        ),\n      ),\n    );\n  }\n}\n

\n

实际输出：

\n

\n