fulutter展开组件的使用
flutter 提供的的 ExpansionTile
ExpansionTile(
maintainState: true,
tilePadding: EdgeInsets.only(
right: MediaQuery.of(context).size.width * 0.5 - 15,
),
title: Text("测试"),
initiallyExpanded: false,
onExpansionChanged: (isOpen) {
setState(() {
this.showLine = !isOpen;
});
},
children: [
Text('数据1'),
Text('数据2'),
Text('数据3'),
Text('数据4'),
Text('数据5'),
],
),
在项目中封装后的组件
/// radius -- card的角度
/// content card中间部分的内容
/// leftTitle 坐标的文字标题
/// showLine -- 标题下是否需要横线
/// titleHeight 标题的高度
/// rightTitle 右上标题
/// showTitle 是否需要标题
/// rightIcon 右边标题旁边的组件
/// rightOnTap 右标题的回调函数
/// isNeedExpand 添加是否展开功能
class CustomCard extends StatefulWidget {
final double radius;
final Widget content;
final String leftTitle;
final bool showLine;
final double titleHeight;
final String rightTitle;
final bool showTitle;
final Widget rightIcon;
final Function onTap;
final bool isNeedExpand;
const CustomCard(
{Key key,
this.radius,
this.content,
this.leftTitle,
this.showLine = true,
this.titleHeight,
this.rightTitle,
this.showTitle,
this.rightIcon,
this.onTap,
this.isNeedExpand = false})
: super(key: key);
@override
State<StatefulWidget> createState() => _CustomCard(
this.radius,
this.content,
this.leftTitle,
this.showLine,
this.titleHeight,
this.rightTitle,
this.showTitle,
this.rightIcon,
this.onTap,
this.isNeedExpand);
}
class _CustomCard extends State<CustomCard> {
final double radius;
final Widget content;
final String leftTitle;
bool showLine;
final double titleHeight;
final String rightTitle;
final bool showTitle;
final Widget rightIcon;
final Function onTap;
bool isNeedExpand;
_CustomCard(
this.radius,
this.content,
this.leftTitle,
this.showLine,
this.titleHeight,
this.rightTitle,
this.showTitle,
this.rightIcon,
this.onTap,
this.isNeedExpand);
@override
Widget build(BuildContext context) {
return Card(
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(radius ?? 15)),
child: Column(
children: [
showTitle
? Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: [
Container(
alignment: Alignment.center,
height: titleHeight ?? 40,
padding: EdgeInsets.only(
top: 15,
left: 15,
),
child: InkWell(
child: Text(
leftTitle ?? '',
style: TextStyle(
fontSize: 15,
),
),
),
),
Container(
padding: EdgeInsets.only(
right: 15,
top: 15,
),
child: InkWell(
onTap: onTap,
child: Row(
children: [
Container(
margin: EdgeInsets.only(right: 2),
child: Text(
rightTitle ?? '',
style: TextStyle(color: CustomColor.loginForm),
),
),
rightIcon ?? SizedBox(),
],
),
),
)
],
)
: SizedBox(
height: 0,
),
showLine == true
? Container(
padding: EdgeInsets.only(left: 15, right: 15, top: 10),
child: Line(),
)
: Text(''),
isNeedExpand
? Container(
child: ExpansionTile(
maintainState: true,
tilePadding: EdgeInsets.only(
right: MediaQuery.of(context).size.width * 0.5 - 15,
),
title: Text(""),
initiallyExpanded: false,
onExpansionChanged: (isOpen) {
setState(() {
this.showLine = !isOpen;
});
},
children: [
content,
],
),
)
: content,
],
),
);
}
}
总结
根据项目需要,展开的内容一般是放在Card
中的,所以将展开组件封装在Card
中,然后跟据属性配置就可以满足Card
的内容是否需要展开