因为项目有大量的下拉面板,而默认的组件(默认的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、使用:导入放文件的位置

使用代码参考以上实例

对flutter中,ExpsionPanel的简单改造的更多相关文章

  1. 在Flutter中嵌入Native组件的正确姿势是...

    引言 在漫长的从Native向Flutter过渡的混合工程时期,要想平滑地过渡,在Flutter中使用Native中较为完善的控件会是一个很好的选择.本文希望向大家介绍AndroidView的使用方式 ...

  2. Flutter 中 JSON 解析

    本文介绍一下Flutter中如何进行json数据的解析.在移动端开发中,请求服务端返回json数据并解析是一个很常见的使用场景.Android原生开发中,有GsonFormat这样的神器,一键生成Ja ...

  3. 《ASP.NET MVC 5 破境之道》:第一境 ASP.Net MVC5项目初探 — 第三节:View层简单改造

    第一境 ASP.Net MVC5项目初探 — 第三节:View层简单改造 MVC默认模板的视觉设计从MVC1到MVC3都没有改变,比较陈旧了:在MVC4中做了升级,好看些,在不同的分辨率下,也能工作得 ...

  4. mvp 在 flutter 中的应用

    在 Android 应用程序开发过程中,我们经常会用到一些所谓的架构方法,如:mvp,mvvm,clean等.之所以这些方法会被推崇是因为他们可以大大的解耦我们的代码的功能模块,让我们的代码在项目中后 ...

  5. 理解 Flutter 中的 Key

    概览 在 Flutter 中,大概大家都知道如何更新界面视图: 通过修改 Stata 去触发 Widget 重建,触发和更新的操作是 Flutter 框架做的. 但是有时即使修改了 State,Flu ...

  6. flutter 中的样式

    flutter 中的样式 样式 值 width 320.0 height 240.0 color Colors.white,Colors.grey[300] textAlign TextAlign.c ...

  7. flutter中的异步机制Future

    饿补一下Flutter中Http请求的异步操作. Dart是一个单线程语言,可以理解成物理线路中的串联,当其遇到有延迟的运算(比如IO操作.延时执行)时,线程中按顺序执行的运算就会阻塞,用户就会感觉到 ...

  8. Flutter中管理路由栈的方法和应用

    原文地址:https://www.jianshu.com/p/5df089d360e4 本文首先讲的Flutter中的路由,然后主要讲下Flutter中栈管理的几种方法. 了解下Route和Navig ...

  9. Flutter中的日期插件date_format 中文 国际化 及flutter_cupertino_date_picker

    今天我们来聊聊Flutter中的日期和日期选择器. Flutter中的日期和时间戳 //日期时间戳转换 var _nowTime = DateTime.now();//获取当前时间 print(_no ...

随机推荐

  1. Codeforces Round #597 (Div. 2) E. Hyakugoku and Ladders 概率dp

    E. Hyakugoku and Ladders Hyakugoku has just retired from being the resident deity of the South Black ...

  2. python做中学(六)os.getcwd() 的用法

    概述 os.getcwd() 方法用于返回当前工作目录. 语法 getcwd()方法语法格式如下: os.getcwd() 参数 无 返回值 返回当前进程的工作目录. 实例 以下实例演示了 getcw ...

  3. LeetCode 705:设计哈希集合 Design HashSet

    题目: 不使用任何内建的哈希表库设计一个哈希集合 具体地说,你的设计应该包含以下的功能 add(value):向哈希集合中插入一个值. contains(value) :返回哈希集合中是否存在这个值. ...

  4. 【shell脚本语法】判断、流程控制语句

    目录 判断用户参数 流程控制语句 一.判断用户参数 1.1 文件判断参数 PS:$?代表上一个命令的返回值,为0表示正确执行,非0表示错误执行.详情可参考我另一篇博客:https://www.cnbl ...

  5. 关于WIN7下IE8IE7浏览器无法安装微信支付商户证书的解决方案

    关于WIN7下IE8IE7浏览器无法安装微信支付商户证书的解决方案 解决方案就是使用 chrome浏览器 默认的chorme浏览器  打开微信商户平台 会提示让安装控件  然后反复安装 其实要解决这个 ...

  6. python web框架Flask——后台登录

    项目搭建 创建一个项目之后,需要在手动创建几个包(含有__init__.py文件的目录)和文件 1.在主目录下创建配置文件:config.py 2.在主目录下创建扩展文件:exts.py 3.在主目录 ...

  7. C#如何将DataTable中的列名复制到另一个DataTable

    C#如何将DataTable中的列名复制到另一个DataTable? 仅复制列名,不复制列下的数据: var newDt = new DataTable(); newDt = oldDataTable ...

  8. Unity API学习笔记(1)

    首先创建测试项目: 这里我选择了2D,其实都可以,之后可以在项目中修改. 修改方法: 进入正题. 首先看一下官方提供的>手册和>脚本API文档. 创建C#脚本文件并打开: 默认的脚本文件为 ...

  9. Jquery选择器个人总结

    1.选择第一级子节点 通过> 或者children方法实现 $('#XtraTabPage8>.datagrid-ftable') $('#XtraTabPage8').children( ...

  10. [转]Redis之(一)初识Redis

    原文地址:http://blog.csdn.net/u012152619/article/details/52550315 Redis之(一)初识Redis 标签: Redisredis-server ...