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

,

Sunbet

www.tggzfm.com展望2019年,将用完善的服务体系,创新的技术应用,雄厚的资金实力,贴心的服务品质,成为Sunbet会员、代理的首选平台。

Allbet Gaming声明:该文看法仅代表作者自己,与阳光在线无关。转载请注明:投资热点:Flutter 系统是若何实现ExpansionPanelList的
发布评论

分享到:

绍兴论坛:泰州房产网:致景连系建行上线“百布金条”,银企打造财「富互联网」金融供职琐屑
2 条回复
  1. AllbetGmaing下载
    AllbetGmaing下载
    (2020-08-06 00:10:50) 1#

    www.allbetgaming.com欢迎进入欧博平台网站(www.aLLbetgame.us),www.aLLbetgame.us开放欧博平台网址、欧博注册、欧博APP下载、欧博客户端下载、欧博游戏等业务。看好这个哦

    1. AllbetGmaing客户端下载
      AllbetGmaing客户端下载
      (2020-08-23 12:58:05)     

      欧博亚洲客户端欢迎进入欧博亚洲客户端(Allbet Game):www.aLLbetgame.us,欧博官网是欧博集团的官方网站。欧博官网开放Allbet注册、Allbe代理、Allbet电脑客户端、Allbet手机版下载等业务。厉害了,我的文

发表评论

◎欢迎参与讨论,请在这里发表您的看法、交流您的观点。