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 的项目默认是打开的。我想当我单击另一个项目时,当前项目将关闭。所以只有一项是永远打开的。我该怎么做?谢谢。
这个伟大的解决方案
\n\nimport \'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\nRun Code Online (Sandbox Code Playgroud)\n
| 归档时间: |
|
| 查看次数: |
10133 次 |
| 最近记录: |