collapsebox
collapsebox 用来管理展开子组件的widget.
使用方法
pubspec.yaml
dependencies:
flutter:
sdk: flutter
flutter_localizations:
sdk: flutter
...
collapsebox: ^1.0.0
collapsebox 基础用法:
Widget buildColumnStretchedBoxWidget() {
return ColumnCollapseBoxWidget(
bottomArrowImageRes: 'images/image_down_expand.png',// 箭头图片资源
bottomBarColor: Colors.white,// 箭头图片所在空间背景颜色
// collapseboxState: CollapseBoxState.normal,// normal 默认模式
alwaysShowChild: Container(// 总是显示的区域
color: Colors.white,
child: Column(
children: normalList,
),
),
collapsedChild: Container(// 展开时才会展示的区域
color: Colors.black12,
child: Column(
children: [...expandList],
),
),
);
}
collapsebox 自定义底部控件的用法:
Widget buildColumnCollapseBoxWidget() {
return ColumnCollapseBoxWidget(
...
bottomBarWidget: (context, collapseboxViewModel) {// 底部控件自定义配置
Widget text;
if (collapseboxViewModel?.isExpand() ?? false) {
text = Text("点击折叠");
} else {
text = Text("点击展开");
}
return GestureDetector(
behavior: HitTestBehavior.opaque,
onTap: () {
collapseboxViewModel?.switchCollapseBoxMode();
},
child: Container(
height: 32,
width: double.infinity,
color: Colors.deepPurpleAccent,
child: Center(
child: text,
),
),
);
},
);
}
允许自定义设置底部控件.
运行截图:
查阅 案例.
实现思路
