Flutter 系统是如何实现ExpansionPanelList的示例代码

在了解ExpansionPanelList实现前,先来了解下MergeableMaterial,它展示多个MergeableMaterialItem组件,当子组件发生变化时,以动画的方式打开或者关闭子组件,MergeableMaterial的父控件需要在主轴方向是一个没有限制的控件,比如SingleChildScrollView、Row、Column等。

基本用法如下:

SingleChildScrollView(
 child: MergeableMaterial(
 children: [
  MaterialSlice(
   key: ValueKey(1),
   child: Container(
   height: 45,
   color: Colors.primaries[1 % Colors.primaries.length],
   )),
  MaterialGap(key: ValueKey(2)),
  MaterialSlice(
   key: ValueKey(3),
   child: Container(
   height: 45,
   color: Colors.primaries[1 % Colors.primaries.length],
   )),
  MaterialGap(key: ValueKey(4)),
  MaterialSlice(
   key: ValueKey(5),
   child: Container(
   height: 45,
   color: Colors.primaries[1 % Colors.primaries.length],
   )),
 ],
 ),
)

效果如下:

MergeableMaterial的子控件只能是MaterialSlice和MaterialGap,MaterialSlice是带子控件的控件,显示实际内容,MaterialGap用于分割,只能放在MaterialSlice中间。

静态情况下,看不出具体的效果,动态改变子组件用法如下:

List<MergeableMaterialItem> items = [];
List.generate(_count, (index) {
 items.add(MaterialSlice(
  key: ValueKey(index * 2),
  child: Container(
  height: 45,
  color: Colors.primaries[index % Colors.primaries.length],
  )));
});

return SingleChildScrollView(
 child: MergeableMaterial(
 children: items,
 ),
)

效果如下:

主要看增加/删除子组件时的动画效果。

增加分割线和阴影:

MergeableMaterial(
 hasDividers: true,
 elevation: 24,
 children: items,
)

效果如下:

阴影值不能随便设置,只能设置如下值:1, 2, 3, 4, 6, 8, 9, 12, 16, 24

此控件可以实现什么样的效果呢?看下面效果:

实现代码:

bool _expand = false;

@override
Widget build(BuildContext context) {
 return Column(
 children: <Widget>[
  Container(
  height: 45,
  color: Colors.green.withOpacity(.3),
  alignment: Alignment.centerRight,
  child: IconButton(
   icon: Icon(Icons.arrow_drop_down),
   onPressed: () {
   setState(() {
    _expand = !_expand;
   });
   },
  ),
  ),
  _expand
   ? MergeableMaterial(
    hasDividers: true,
    elevation: 24,
    children: [
    MaterialSlice(
     key: ValueKey(1),
     child: Container(
      height: 200,
      color: Colors.green.withOpacity(.3),
     ))
    ],
   )
   : Container(),
  Container(
  height: 45,
  color: Colors.red.withOpacity(.3),
  ),
 ],
 );
}

看到这个效果是否想到了ExpansionPanelList呢?系统控件ExpansionPanelList就是使用此控件实现的。

交流

Flutter博客地址(近200个控件用法):http://laomengit.com

总结

到此这篇关于Flutter 系统是如何实现ExpansionPanelList的示例代码的文章就介绍到这了,更多相关Flutter 实现ExpansionPanelList内容请搜索我们以前的文章或继续浏览下面的相关文章希望大家以后多多支持我们!

(0)

相关推荐

  • Flutter 系统是如何实现ExpansionPanelList的示例代码

    在了解ExpansionPanelList实现前,先来了解下MergeableMaterial,它展示多个MergeableMaterialItem组件,当子组件发生变化时,以动画的方式打开或者关闭子组件,MergeableMaterial的父控件需要在主轴方向是一个没有限制的控件,比如SingleChildScrollView.Row.Column等. 基本用法如下: SingleChildScrollView( child: MergeableMaterial( children: [ Ma

  • Flutter实现自定义搜索框AppBar的示例代码

    目录 介绍 效果图 实现步骤 完整源码 总结 介绍 开发中,页面头部为搜索样式的设计非常常见,为了可以像系统AppBar那样使用,这篇文章记录下在Flutter中自定义一个通用的搜索框AppBar记录. 功能点: 搜索框.返回键.清除搜索内容功能.键盘处理. 效果图 实现步骤 首先我们先来看下AppBar的源码,实现了PreferredSizeWidget类,我们可以知道这个类主要是控制AppBar的高度的,Scaffold脚手架里的AppBar的参数类型就是PreferredSizeWidge

  • Flutter实现笑嘻嘻的动态表情的示例代码

    目录 前言 AnimatedContainer 介绍 组件结构 细节实现 总结 前言 身在孤岛有很多无奈,比如说程序员属于比较偏门的职业.尤其是早些年,在行业里跳过几次槽后,可能你就已经认识整个圈子的人了.然后,再跳槽很可能就再次“偶遇”前同事了,用大潘的口头语来说就是:“好尴尬呀”.因此, 问起职业,往往只能是回答是搞计算机的.结果可能更尴尬,问的人可能笑嘻嘻地瞅着你,像看怪物一样看着你,接着突然冒出一句灵魂拷问:“我家电脑坏了,你能修不?”不过也不奇怪,那个时候在岛上重装一个 Windows

  • Flutter 实现酷炫的3D效果示例代码

    此文讲解3个酷炫的3D动画效果. 下面是要实现的效果: Flutter 中3D效果是通过 Transform 组件实现的,没有变换效果的实现: class TransformDemo extends StatelessWidget { @override Widget build(BuildContext context) { return Scaffold( appBar: AppBar( title: Text('3D 变换Demo'), ), body: Container( alignm

  • Flutter仿钉钉考勤日历的示例代码

    本文主要介绍了Flutter仿钉钉考勤日历的示例代码,分享给大家,具体如下: 效果 原型 开发 1. 使用 // 考勤日历 DatePickerDialog( initialDate: DateTime.now(), firstDate: DateTime(2020), lastDate: DateTime(2030), onDateChanged: onDateChanged, // 0:无状态,1:正常考勤 2:异常考情,迟到,早退, // 若不满一个月,日历会自动用0补满一个月 check

  • Flutter实现仿微信分享功能的示例代码

    目录 1.首先去pub官网 2 在微信开放平台注册开发者账号以及创建你的应用程序 3 在分享页面 3.1 初始化 3.2 检测微信是否安装 3.3 分享微信消息 总结 本文设计到的知识点有 主要问题 Flutter 用来快速开发 Android iOS平台应用,在Flutter 中,通过 fluwx或者fluwx_no_pay 插件来实现微信分享功能 主要还是看自己的需求,本示例我将按照没有支付的实现.至于为什么,主要是ios打包提审比较麻烦. 那么接下来就看一下如何实现吧, 1.首先去pub官

  • Flutter实现牛顿摆动画效果的示例代码

    目录 前言 实现步骤 1.绘制静态效果 2.加入动画 两个关键点 完整源码 总结 前言 牛顿摆大家应该都不陌生,也叫碰碰球.永动球(理论情况下),那么今天我们用Flutter实现这么一个理论中的永动球,可以作为加载Loading使用. - 知识点:绘制.动画曲线.多动画状态更新 效果图: 实现步骤 1.绘制静态效果 首先我们需要把线和小圆球绘制出来,对于看过我之前文章的小伙伴来说这个就很简单了,效果图: 关键代码: // 小圆球半径 double radius = 6; /// 小球圆心和直线终

  • 基于Flutter实现转场动效的示例代码

    目录 前言 CupertinoFullscreenDialogTransition CupertinoPageTransition DecoratedBoxTransition FadeTransition PositionedTransition RotationTransition ScaleTransition SizeTransition SlideTransition 前言 动画经常会用于场景切换,比如滑动,缩放,尺寸变化,为应对这样的场景转换需要,Flutter 提供了 Transi

  • Flutter实现编写富文本Text的示例代码

    目录 SuperText富文本设计方案 RichText原理 方案设计 解析 代码设计 节点定义 Span构造器定义 SuperText定义 可以修改TextStyle的Span构造器 效果展示 结语 SuperText富文本设计方案 Flutter中要实现富文本,需要使用RichText或者Text.rich方法,通过拆分成List<InlineSpan>来实现,第一感觉上好像还行,但实际使用了才知道,有一个很大的问题就是对于复杂的富文本效果,无法准确拆分出具有实际效果的spans.因此想设

  • android系统分享的自定义功能的示例代码

    分享功能是app中特别常见的功能,国内的app基本都支持分享到微信 QQ等主流的社交应用.至于分享功能的实现大多是使用第三方的share sdk一步到位,或者分享的app比较少比如就一个微信 那通常使用微信sdk的分享模块即可.但其实android系统就给我们提供过一种分享的实现方式,代码也比较简单如下 Intent share = new Intent(Intent.ACTION_SEND); share.setType("text/plain"); share.putExtra(I

随机推荐