flutter学习---下拉筛选组建

做为前端程序媛，学习flutter仍是有一些不习惯的。因为项目需求，须要一个下拉筛选的功

能，找了不少demo,惟独发现咸鱼有相似的功能，可是并无开源，因而开始本身摸索着写了一下。

开始找错了方向，看到有DropdownButton, 功能相似，可是并无扩展入口去修改内部菜单的样式，以及位置。

其实写完了发现，也没有多难，仍是不太熟练，嘿嘿。

先看一下实现效果：

下面说一下用到的知识点：

一、Stack 布局：

习惯了前端用css定位元素，flutter中的有一个单独的类Positioned, 能够用它来实现定位。可是这里有一点须要注意，Positioned在使用中，必须做为Stack的子元素出现；

使用Stack布局遇到一个问题，和你们分享一下：当Stack设置overflow属性为visible的时候，这个意思就是将超出的部分显示。

当时个人布局结构以下：

那么问题就来了，当你点击GestureDetector元素的时候，没有触发onTap事件！

查了不少资料，发现flutter issues里边也有不少提问，可是并无找到什么解决方案；后来问安卓的同窗，说是由于"渲染机制还有触摸事件这些机制都是相似于一个树结构，从根节点循环遍历，先到父布局，而后才到子布局。由于子布局位置超出了父布局边界限制，因此父布局根本没获取到事件，因此无法造成一个闭环"(复制了咱们的聊天记录，嘿嘿)。

缘由是找到了，可是并无找到解决方案，因而就想多是个人布局结构有些问题，换一种布局方式，就应该能够避免用到overflow:visible。

因而我修改了布局以下：

这样终于实现了我想要的效果～～！开心～～～

二、Animation的实现：

开始想到用DropdownButton也是没有系统看flutter的动画怎么实现；原本几行css就行的事，到flutter还须要控制器。可是没办法，虽然有点抵触，可是没办法啊，我就硬着头皮看了一天animation的官方文档，发现其实也没那么难嘛！

实现动画的方式有好几种，我这里就用到了最简单的一种方式；

这里边也有一个坑，就是我注释的那句

setState(() {});复制代码

开始看官方demo的时候觉得这里边是空也没什么用，就给删了，而后就发现动画没有效果，直接到了最终的状态，后来查了一下才发现是这个问题。（查到的竟然是同事写的一篇文章，果真大神在身边啊）

下面附上个人源码：源码

做为前端学习flutter仍是了解的不是很深刻，若是有什么写的不对的地方，请各位大神多多指教啊！

-----------------2019.3.4日更新----------------------------------------

将上边的例子应用到项目，提取成组件的过程当中，进行了一下扩展，发现以前的布局逻辑有点问题；

以前：每一个下拉按钮，都对应一个下拉列表，问题：每一个下拉列表的定位都是相对于按钮定位的，很难达到都靠左全屏显示的效果；

优化：全部的按钮下拉都是同一个列表，替换里边的数据；

下拉菜单新增了几个参数：

buttons： 按钮数组 数据类型FilterButtonModel
otherWidget： 除了筛选按钮部分Widget复制代码

新增数据格式：FilterButtonModel ： 参数以下：String title; //按钮titleList contents; //下拉列表String type; //下拉筛选类型 'Column'、'Row'Function callback; //按钮点击回调，能够自定义回调，如跳转页面等String direction; //下拉箭头方向复制代码

效果展现以下：

TODO: 

一、经过状态管理（Bloc）记录全部筛选条件，用Chips方式实现；

二、感受动画有点卡顿，需优化；