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

作为前端程序媛，学习flutter还是有一些不习惯的。由于项目需求，需要一个下拉筛选的功

能，找了很多demo,唯独发现咸鱼有类似的功能，但是并没有开源，于是开始自己摸索着写了一下。

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

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

先看一下实现效果：

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

1、Stack 布局：

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

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

当时我的布局结构如下：

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

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

原因是找到了，但是并没有找到解决方案，于是就想可能是我的布局结构有些问题，换一种布局方式，就应该可以避免用到overflow:visible。

于是我修改了布局如下：

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

2、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: 

1、通过状态管理（Bloc）记录所有筛选条件，用Chips方式实现；

2、感觉动画有点卡顿，需优化；

转载于:https://juejin.im/post/5c73ad886fb9a049d61e2cd3