对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、使用:导入放文件的位置
;
使用代码参考以上实例
对flutter中,ExpsionPanel的简单改造的更多相关文章
- 在Flutter中嵌入Native组件的正确姿势是...
引言 在漫长的从Native向Flutter过渡的混合工程时期,要想平滑地过渡,在Flutter中使用Native中较为完善的控件会是一个很好的选择.本文希望向大家介绍AndroidView的使用方式 ...
- Flutter 中 JSON 解析
本文介绍一下Flutter中如何进行json数据的解析.在移动端开发中,请求服务端返回json数据并解析是一个很常见的使用场景.Android原生开发中,有GsonFormat这样的神器,一键生成Ja ...
- 《ASP.NET MVC 5 破境之道》:第一境 ASP.Net MVC5项目初探 — 第三节:View层简单改造
第一境 ASP.Net MVC5项目初探 — 第三节:View层简单改造 MVC默认模板的视觉设计从MVC1到MVC3都没有改变,比较陈旧了:在MVC4中做了升级,好看些,在不同的分辨率下,也能工作得 ...
- mvp 在 flutter 中的应用
在 Android 应用程序开发过程中,我们经常会用到一些所谓的架构方法,如:mvp,mvvm,clean等.之所以这些方法会被推崇是因为他们可以大大的解耦我们的代码的功能模块,让我们的代码在项目中后 ...
- 理解 Flutter 中的 Key
概览 在 Flutter 中,大概大家都知道如何更新界面视图: 通过修改 Stata 去触发 Widget 重建,触发和更新的操作是 Flutter 框架做的. 但是有时即使修改了 State,Flu ...
- flutter 中的样式
flutter 中的样式 样式 值 width 320.0 height 240.0 color Colors.white,Colors.grey[300] textAlign TextAlign.c ...
- flutter中的异步机制Future
饿补一下Flutter中Http请求的异步操作. Dart是一个单线程语言,可以理解成物理线路中的串联,当其遇到有延迟的运算(比如IO操作.延时执行)时,线程中按顺序执行的运算就会阻塞,用户就会感觉到 ...
- Flutter中管理路由栈的方法和应用
原文地址:https://www.jianshu.com/p/5df089d360e4 本文首先讲的Flutter中的路由,然后主要讲下Flutter中栈管理的几种方法. 了解下Route和Navig ...
- Flutter中的日期插件date_format 中文 国际化 及flutter_cupertino_date_picker
今天我们来聊聊Flutter中的日期和日期选择器. Flutter中的日期和时间戳 //日期时间戳转换 var _nowTime = DateTime.now();//获取当前时间 print(_no ...
随机推荐
- cartographer 3D运行录制rosbag包
目录: 1.运行多线激光雷达: 2.运行IMU: 3.录制rosbag包: 4.配置cartographer: 5.查看地图: 1.运行多线激光雷达: 主要是测试雷达是否正在运行,确认雷达点云topi ...
- Paper | Adaptive Computation Time for Recurrent Neural Networks
目录 1. 网络资源 2. 简介 3. 自适应运算时间 3.1 有限运算时间 3.2 误差梯度 1. 网络资源 这篇文章的写作太随意了,读起来不是很好懂(掺杂了过多的技术细节).因此有作者介绍会更好. ...
- 模块基础实战之ATM和购物车系统分文件处理
目录 一.项目地址 二.功能需求 一.项目地址 https://github.com/nickchen121/atm 二.功能需求 FUNC_MSG = { '0': '注销', '1': '登录', ...
- oracle--共享磁盘挂载
01,查看挂载的磁盘 [root@SHLPDBWX01 ~]# fdisk -l Disk /dev/sda: bytes heads, sectors/track, cylinders Units ...
- electron内监控目标网站cookie的变化,查找指定的cookie
let cookieInstance = win.webContents.session.cookies; cookieInstance.on('changed', (e, cookie, cause ...
- [算法]LeetCode 152:乘积最大子序列
题目描述: 给定一个整数数组 nums ,找出一个序列中乘积最大的连续子序列(该序列至少包含一个数). 示例 1: 输入: [2,3,-2,4]输出: 6解释: 子数组 [2,3] 有最大乘积 6.示 ...
- Shell(2)—数组
Shell(2)-数组 常用的 Bash Shell 只支持一维数组,不支持多维数组. 一.概念 Shell 并且没有限制数组的大小,理论上可以存放无限量的数据.Shell 数组元素的下标也是从 0 ...
- pycharm 新建py文件写时有作者和时间
##!/usr/bin/python3 # -*- coding: utf-8 -*- ''' @Time : ${DATE} ${TIME} @Author : YourName @FileName ...
- idea使用心得
简单的概括如下: IntelliJ系中的 Project 相当于Eclipse系中的 Workspace : IntelliJ系中的 Module 相当于Eclipse系中的 Project ...
- 作用域,作用域链,垃圾收集,js解析
变量中包含基本数据类型和引用数据类型,基本类型指简单的数据值,引用类型由多个值构成的对象. 引用类型可以为其添加属性和方法,也可以改变和删除属性和方法. 复制变量值: 基本类型:一个变量向另一 ...