Flutter的可收缩面板ExpandPanel
2019-10-10 本文已影响0人
王俏
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> {
bool _isExpand = false;
List<ExpansionPanelItem> _expansionPanelItems;
@override
void initState() {
// TODO: implement 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: (panelIndex, isExpanded) {
setState(() {
_expansionPanelItems[panelIndex].isExpanded =
!_expansionPanelItems[panelIndex].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(),
),
],
),
),
);
}
}