collapsebox
collapsebox 用來(lái)管理展開(kāi)子組件的widget.
使用方法
pubspec.yaml
dependencies:
flutter:
sdk: flutter
flutter_localizations:
sdk: flutter
...
collapsebox: ^1.0.0
collapsebox 基礎(chǔ)用法:
Widget buildColumnStretchedBoxWidget() {
return ColumnCollapseBoxWidget(
bottomArrowImageRes: 'images/image_down_expand.png',// 箭頭圖片資源
bottomBarColor: Colors.white,// 箭頭圖片所在空間背景顏色
// collapseboxState: CollapseBoxState.normal,// normal 默認(rèn)模式
alwaysShowChild: Container(// 總是顯示的區(qū)域
color: Colors.white,
child: Column(
children: normalList,
),
),
collapsedChild: Container(// 展開(kāi)時(shí)才會(huì)展示的區(qū)域
color: Colors.black12,
child: Column(
children: [...expandList],
),
),
);
}
collapsebox 自定義底部控件的用法:
Widget buildColumnCollapseBoxWidget() {
return ColumnCollapseBoxWidget(
...
bottomBarWidget: (context, collapseboxViewModel) {// 底部控件自定義配置
Widget text;
if (collapseboxViewModel?.isExpand() ?? false) {
text = Text("點(diǎn)擊折疊");
} else {
text = Text("點(diǎn)擊展開(kāi)");
}
return GestureDetector(
behavior: HitTestBehavior.opaque,
onTap: () {
collapseboxViewModel?.switchCollapseBoxMode();
},
child: Container(
height: 32,
width: double.infinity,
color: Colors.deepPurpleAccent,
child: Center(
child: text,
),
),
);
},
);
}
允許自定義設(shè)置底部控件.
運(yùn)行截圖:
查閱 案例.
實(shí)現(xiàn)思路
