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

 更新时间:2020年05月08日 09:01:46   作者:老孟Flutter  
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内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家!

相关文章

  • Android实现关机与重启的几种方式(推荐)

    Android实现关机与重启的几种方式(推荐)

    这篇文章主要介绍了Android实现关机与重启的几种方式(推荐)的相关资料,非常不错,具有参考借鉴价值,需要的朋友可以参考下
    2016-07-07
  • Android实现疯狂连连看游戏之状态数据模型(三)

    Android实现疯狂连连看游戏之状态数据模型(三)

    这篇文章主要为大家详细介绍了Android实现疯狂连连看游戏之状态数据模型,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2017-03-03
  • Kotlin fun函数使用方法

    Kotlin fun函数使用方法

    函数是执行特定任务的一组相互关联的代码块。函数用于将程序分解为不同的子模块。它使代码可重用,并使程序更易于管理,这篇文章主要介绍了Kotlin fun函数使用方法
    2022-12-12
  • AndroidView与Compose框架交互实现介绍

    AndroidView与Compose框架交互实现介绍

    Android Compose自推出正式版本后,google 就一直推荐使用Compose来开发。正好疫情期间,作为一个 Android 摸鱼达人,就来摸索一下Compose的开发。说实话开发了2天感觉对Android 开发人员来说变化是巨大的,但是作为从业者我们还必须学习和学会,才能不被甩开
    2022-09-09
  • android @override 报错解决方案

    android @override 报错解决方案

    android @override 报错:就是说Java 1.5的编译器默认对父类的方法进行覆盖,采用@Override进行说明;但1.6已经扩展到对接口的方法;所以如果还是以Java 1.5的编译器来编译的话,会出现错误
    2012-12-12
  • Android画图实现MPAndroidchart折线图示例详解

    Android画图实现MPAndroidchart折线图示例详解

    这篇文章主要为大家介绍了Android画图实现MPAndroidchart折线图示例详解,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪
    2022-07-07
  • android sharedUserId 使用知识盲点解析

    android sharedUserId 使用知识盲点解析

    这篇文章主要为大家介绍了android sharedUserId使用的知识盲点解析,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪
    2023-02-02
  • RecyclerView的使用之HelloWorld

    RecyclerView的使用之HelloWorld

    RecyclerView是伴随Android 5.0发布的新控件,是一种列表容器,Google意在用新的RecyclerView来取代老旧的ListView和GridView,它的使用灵活性和性能都要优于ListView,通过本文给大家介绍RecyclerView的使用之HelloWorld,需要的朋友参考下
    2016-03-03
  • Android实现异步加载图片

    Android实现异步加载图片

    这篇文章主要为大家详细介绍了Android实现异步加载图片的相关资料,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2017-05-05
  • Android切换前后台点击通知进入当前页面

    Android切换前后台点击通知进入当前页面

    这篇文章主要介绍了Android切换前后台点击通知进入当前页面,主要讲述当App退出到后台的后,怎么点击通知回到原来按下HOME键之前的前台页面,需要的朋友可以参考下
    2023-03-03

最新评论