Flutter 系统是如何实现ExpansionPanelList的

栏目: IT技术 · 发布时间: 4年前

内容简介:老孟导读:Flutter组件有一个很大的特色,那就是很多复杂的组件都是通过一个一个小组件拼装而成的,今天就来说说系统的ExpansionPanelList是如何实现的。在了解ExpansionPanelList实现前,先来了解下MergeableMaterial,它展示多个MergeableMaterialItem组件,当子组件发生变化时,以动画的方式打开或者关闭子组件,MergeableMaterial的父控件需要在主轴方向是一个没有限制的控件,比如SingleChildScrollView、Row、Co

Flutter 系统是如何实现ExpansionPanelList的

老孟导读: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],
          )),
    ],
  ),
)

效果如下:

Flutter 系统是如何实现ExpansionPanelList的

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,
  ),
)

效果如下:

Flutter 系统是如何实现ExpansionPanelList的

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

增加分割线和阴影:

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

效果如下:

Flutter 系统是如何实现ExpansionPanelList的

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

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

Flutter 系统是如何实现ExpansionPanelList的

实现代码:

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交流群(微信:laomengit)、关注公众号【老孟Flutter】:

Flutter 系统是如何实现ExpansionPanelList的 Flutter 系统是如何实现ExpansionPanelList的

以上所述就是小编给大家介绍的《Flutter 系统是如何实现ExpansionPanelList的》,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对 码农网 的支持!

查看所有标签

猜你喜欢:

本站部分资源来源于网络,本站转载出于传递更多信息之目的,版权归原作者或者来源机构所有,如转载稿涉及版权问题,请联系我们

松本行弘的程式世界

松本行弘的程式世界

松本行弘 / 鄧瑋敦 / 博碩 / 2010年07月27日

讓Ruby之父教您大師級的程式思考術! 本書以松本行弘先生對程式本質的深層認知、各種技術之優缺點的掌握,闡述Ruby這套程式語言的設計理念,並由此延伸讓您一窺程式設計的奧妙之處。本書內含許多以Ruby、Lisp、Smalltalk、Erlang、JavaScript等動態語言所寫成的範例,從動態語言、函數式程式設計等領域開展您的學習視野。 本書精華: ‧物件導向與抽象化 ‧......一起来看看 《松本行弘的程式世界》 这本书的介绍吧!

图片转BASE64编码
图片转BASE64编码

在线图片转Base64编码工具

SHA 加密
SHA 加密

SHA 加密工具

Markdown 在线编辑器
Markdown 在线编辑器

Markdown 在线编辑器