因为项目有大量的下拉面板,而默认的组件(默认的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. 最热门的 10 个 Java 微服务框架

    1.Spring Boot Java 构建 Spring 应用程序已经有很长一段时间了,Spring Boot 是 Spring 的一个特定版本,它通过对配置细节的处理,使微服务构建更加简便.创建 S ...

  2. 【Oracle命令 】使用的sql语句之分组查询(group by)

    由于本人并未对oracle数据库进行深入了解,但是工作中又需要知道一些基础的sql,所以记录下操作的sql语句.方便日后查看 1.将序列号作为分组查询的条件,再将查询出来的结果进行筛选. select ...

  3. go语言使用go-sciter创建桌面应用(八) 窗口显示时,自动加载后端数据。

    有些时候我们需要在窗口创建并显示时,加载一些后端的配置,这就需要用到view提供的几个事件. https://sciter.com/docs/content/sciter/View.htm state ...

  4. 【agc028E】High Elements(动态规划,线段树,贪心)

    [agc028E]High Elements(动态规划,线段树,贪心) 题面 AtCoder 你有一个\([1,N]\)的排列\(P\). 一个长度为\(N\)的字符串\(S\)是好的,当且仅当: 两 ...

  5. solidity智能合约如何判断mapping值为空

    mapping值的判断问题 在Java这类编程语言中,我们可以获得Map里面的值然后与null或空来进行判断该key对应的值是否为空.可是在solidity中貌似并没有提供类似的判断.那么我们如果来进 ...

  6. 【LeetCode】2. 两数相加

    题目 给出两个 非空 的链表用来表示两个非负的整数.其中,它们各自的位数是按照 逆序 的方式存储的,并且它们的每个节点只能存储 一位 数字.   如果,我们将这两个数相加起来,则会返回一个新的链表来表 ...

  7. PlayJava Day010

    今日所学: /* 2019.08.19开始学习,此为补档. */ 1.继承补充: ①不要仅为了获取其他类中某个功能而去继承,而是要有所属关系. ②Super关键字: a.代表父类对象的引用,且main ...

  8. Java生鲜电商平台-商品分类表和商品类型表的区别与数据库设计

    Java生鲜电商平台-商品分类表和商品类型表的区别与数据库设计   二者服务的对象不一样 目的也是不一样的 商品分类是为商品服务的 用来管理商品 商品类型是为扩展属性服务的 用来管理属性 举例:[转] ...

  9. C++ 成员对象和封闭类

    01 成员对象与封闭类 类里有其他对象则该对象叫成员对象:有成员对象的类叫 封闭类: class CTyre // 轮胎类 { public: // 有参数构造函数 // 初始化成员变量m_radiu ...

  10. 关于vue项目中使用组件的一些心得

    在编写一个可能是共组件的情况下,尽量在组件内部只处理相关组件内部的逻辑,组件外的逻辑通过事件总线emit,否则一旦当前组件涉及其他组件的逻辑就会发生耦合,在一个新的组件里面使用的时候,就会造成后悔的情 ...