collapsebox

collapsebox 用來管理展開子組件的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(// 展開時才會展示的區(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)擊展開");
      }

      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)思路