Flutter collapsebox 用来管理展开子组件的widget

最新推荐文章于 2025-01-26 17:12:53 发布

原创最新推荐文章于 2025-01-26 17:12:53 发布 · 535 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#Flutter #dart #折叠组件 #P #Provider

Android 同时被 2 个专栏收录

174 篇文章

订阅专栏

Flutter

2 篇文章

订阅专栏

博客介绍了collapsebox折叠组件，它用于管理展开子组件。详细说明了其在pubspec.yaml中的基础用法和自定义底部控件的用法，还可自定义设置底部控件，同时展示了运行截图，最后阐述了实现思路。

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,
          ),
        ),
      );
    },
  );
}

允许自定义设置底部控件.