我想要第一个 ExpansionTile 的项目默认是打开的。我想当我单击另一个项目时,当前项目将关闭。我该怎么做?

Far*_*DIN 5 expansion dart flutter flutter-layout flutter-animation

 body: Container(color: Colors.white,
          child: SingleChildScrollView(
              child : Column( 
                children : [
                  Padding(padding: EdgeInsets.only(left : 23.0, top: 23.0, right: 23.0, bottom: 5.0), 
                              child : Text("Title", style: MyTextStyles.textNormal,)),

                  ListView.builder(
                      padding: EdgeInsets.only(left: 13.0, right: 13.0, bottom: 25.0),
                      shrinkWrap: true,
                      physics: NeverScrollableScrollPhysics(),
                      itemCount: PersonModel.icData.length,
                      itemBuilder: (context, index) {
                        PersonModel _model = PersonModel.icData[index];
                        return Column(
                          children: <Widget>[
                            Divider(
                              height: 17.0,
                              color: MyColors.white,
                            ), 
                                  ExpansionTile(
                                        key:  PageStorageKey<String>(index.toString()),
                                        initiallyExpanded: false,
                                        leading: 
                                        new ClipOval(
                                                child: SvgPicture.asset(
                                                    _model.picture,
                                                    height: 57.0,
                                                    width: 57.0,
                                                ),
                                            ),

                                        title: Text(_model.title,style: TextStyle(color: Color(0xFF09216B), fontFamily: 'ProximaNova-Bold')), 
                                        subtitle: Text(_model.subtitle, style: TextStyle(color: Colors.black, fontSize: 13.0,),),
                                        children: <Widget>[                                       
                                          Padding(padding: EdgeInsets.only(left: 20.0, top: 15.0), 
                                                      child : Text(_model.title + ' ' +_model.detail,)
                                                      ) 
                                        ],
                                        onExpansionChanged: ((newState){
                                             print(' is now : ' + newState.toString());
                                        })
                                      ),

                              ]
                              //trailing: 
                            );
                      },
                        )
                ]
                    ),
          )           
        ),
Run Code Online (Sandbox Code Playgroud)

例子

我尝试在 Flutter 中使用 ExpansionTile 创建人员列表。人员列表具有属性和详细信息。我想要第一个 ExpansionTile 的项目默认是打开的。我想当我单击另一个项目时,当前项目将关闭。所以只有一项是永远打开的。我该怎么做?谢谢。

Far*_*DIN 7

这个伟大的解决方案

\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\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,title: Text(\'ExpansionTile Collapse\', style: TextStyle(color: Colors.white, fontWeight: FontWeight.bold)),\n      ),\n      body: Container(color: Colors.white,\n          child: SingleChildScrollView(\n              child : Column( \n                children : [                  \n                  ListView.builder(\n\n                      key: Key(\'builder ${selected.toString()}\'), //attention\n\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(\n                          children: <Widget>[\n                            Divider(\n                              height: 17.0,\n                              color: Colors.white,\n                            ), \n                                  ExpansionTile(  \n\n                                        key: Key(index.toString()), //attention                                                                  \n                                        initiallyExpanded : index==selected, //attention\n\n                                        leading: Icon(Icons.person, size: 50.0, color: Colors.black,),\n                                        title: Text(\'Faruk AYDIN ${index}\',style: TextStyle(color: Color(0xFF09216B), fontSize: 17.0, fontWeight: FontWeight.bold)), \n                                        subtitle: Text(\'Software Engineer\', style: TextStyle(color: Colors.black, fontSize: 13.0, fontWeight: FontWeight.bold),),\n                                        children: <Widget>[                                       \n                                          Padding(padding: EdgeInsets.all(25.0), \n                                                      child : Text(\'DETA\xc4\xb0L ${index} \\n\' + \'It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout. The point of using Lorem Ipsum is that it has a more-or-less normal distribution of letters, as opposed to using "Content here, content here", making it look like readable English.\',)\n                                                      ) \n                                        ],\n                                        onExpansionChanged: ((newState){\n                                            if(newState)\n                                                setState(() {\n                                                  Duration(seconds:  20000);\n                                                  selected = index; \n                                                });\n                                                else setState(() {\n                                                  selected = -1; \n                                                });        \n                                        })\n                                      ),\n\n                              ]\n                            );\n                      },\n                        )\n                ]\n                    ),\n          )           \n        )\n    );\n  }\n}\n\n
Run Code Online (Sandbox Code Playgroud)\n

  • 感谢您的回答,但是有没有一种方法可以在不丢失动画的情况下做到这一点? (2认同)