Flutter ExpansionPanel 可展开的收缩控件
文档:https://api.flutter.dev/flutter/material/ExpansionPanel-class.html
demo:
import 'package:flutter/material.dart'; class ExpansionPanelItem { final String headerText; final Widget body; bool isExpanded; ExpansionPanelItem({ this.headerText, this.body, this.isExpanded, }); } class ExpansionPanelDemo extends StatefulWidget { @override _ExpansionPanelDemoState createState() => _ExpansionPanelDemoState(); } class _ExpansionPanelDemoState extends State<ExpansionPanelDemo> { List<ExpansionPanelItem> _expansionPanelItems; @override void initState() { super.initState(); _expansionPanelItems = <ExpansionPanelItem>[ ExpansionPanelItem( headerText: 'Panel A', body: Container( padding: EdgeInsets.all(16.0), width: double.infinity, child: Text('Content for Panel A.'), ), isExpanded: false, ), ExpansionPanelItem( headerText: 'Panel B', body: Container( padding: EdgeInsets.all(16.0), width: double.infinity, child: Text('Content for Panel B.'), ), isExpanded: false, ), ExpansionPanelItem( headerText: 'Panel C', body: Container( padding: EdgeInsets.all(16.0), width: double.infinity, child: Text('Content for Panel C.'), ), isExpanded: false, ), ]; } @override Widget build(BuildContext context) { return Scaffold( appBar: AppBar( title: Text('ExpansionPanelDemo'), elevation: 0.0, ), body: Container( padding: EdgeInsets.all(16.0), child: Column( mainAxisAlignment: MainAxisAlignment.center, children: <Widget>[ ExpansionPanelList( expansionCallback: (int panelIndex, bool isExpanded) { setState(() { _expansionPanelItems[panelIndex].isExpanded = !isExpanded; }); }, children: _expansionPanelItems.map( (ExpansionPanelItem item) { return ExpansionPanel( isExpanded: item.isExpanded, body: item.body, headerBuilder: (BuildContext context, bool isExpanded) { return Container( padding: EdgeInsets.all(16.0), child: Text( item.headerText, style: Theme.of(context).textTheme.title, ), ); }, ); } ).toList(), ), ], ), ), ); } }
效果:
最后,关注【码上加油站】微信公众号后,有疑惑有问题想加油的小伙伴可以码上加入社群,让我们一起码上加油吧!!!
posted on 2019-08-10 19:52 LoaderMan 阅读(1839) 评论(0) 编辑 收藏 举报