zoukankan      html  css  js  c++  java
  • 对flutter中,ExpsionPanel的简单改造

    因为项目有大量的下拉面板,而默认的组件(默认的padding、颜色、大小)不是我们UI设计上想要的,但是每个地方都要去改又很麻烦。于是我就想,可以对这个组件进行定制化改造,传入一些颜色、参数、图标大小之类的参数(当然还有其他方法,比如继承默认组件,然后根据ui设计进行兼容开发),使其符合我们的UI设计,并且减少时间研究此组件的时间(因为项目分三个人开发)

    研究了下该组件的源码,对其进行了以下改造:

    ExpansionPanelCustomList(
              animationDuration: Duration(milliseconds: 500),
              expansionCallback: (panelIndex, isExpanded) {
                allPlanListBloc.caculateWholePlanHeight(panelIndex);
                isAllExpanded = isExpanded;
                eventBuses.fire(WholeExpanded(isExpanded));
                setState(() {
                  isHwolePanel = true;
                  currentPanelIndex =
                      (currentPanelIndex != panelIndex) ? panelIndex : -1;
                });
              },
             //就是传了个parms参数,如果不传都有默认值
              parms: {
                'type': 'custom',//用默认的,考虑到不影响默认的样式
                'backgroundcolor': 0xffff7200,//下拉的背景颜色
                'iconcolor': 0xffffffff,//下拉icon的颜色
                'iconsize': 36.0,//下拉icon的大小 
              },
              children: mList.map((i){
                    return ExpansionPanelCustom(
                      headerBuilder: (context,isExpanded){
                         return Container();
                      },
                      body:Container(),
                      isExpanded: currentPanelIndex==i,
                    );
                  }).toList(),
                
    ),

      

    改造完的效果图:

    以下是详细的做法:

    1、去组件库拷贝这两个文件到ui/widgets下

    2、根据具体ui设计修改源码

    3、使用:导入放文件的位置

    使用代码参考以上实例

  • 相关阅读:
    几个常见的在线评测系统,及我的点评
    信息学奥赛培训教材推荐
    致,青春
    文明小博客,管理员及网址列表
    NOIP2013,复赛及同步赛,报名及比赛,专题页面
    浅谈浏览器兼容性问题-(1)产生、看待与思考
    前端经典笔试题(腾讯前端,三栏布局)
    浅谈web语义化
    浅谈表现与数据分离
    浅谈w3c标准
  • 原文地址:https://www.cnblogs.com/qiufang/p/11303597.html
Copyright © 2011-2022 走看看