Flutter下拉框使用和可替换按钮的组件

前言

1、下拉框

在使用flutter框架完成项目的时候，有一个下拉框选择排序条件的需求，需要将下拉的选择内容，放在下拉按钮的下面，如Unity的Dropdown。下图是完整的需求。但是flutter系统自带的DropdownButtonFormField，他的选择内容面板是不固定的，并不在下面，研究了一下，因为时间比较紧，就直接使用别人已经封装好的插件DropdownButtonFormField2。这个插件符合需求标准

2、替代按钮
这里需要代替按钮的原因有两个，一个是特殊的自定义样式不好调整，还有一个是flutter系统自带的按钮，都有内边距，在进行屏幕适配的时候，不是很方便，会致使排版看起来比较混乱，所以在此使用了InkWell组件替换按钮功能。当然GestureDetector组件也是可以的，包含了点击事件，一般都是可以的。也可以自定义点击组件。

一、下拉框

DropdownButtonFormField和DropdownButtonFormField2插件相同点

字段	用途
items	下拉内容面板中的各个属性
onChanged	点击事件
value	在界面上显示的值
decoration	点击的下拉框样式
style	显示的文字样式
hint	没有数据时，显示的提示信息

不同点

DropdownButtonFormField2字段	用途
iconStyleData	下拉框中右侧显示的icon设置，可以自定义
menuItemStyleData	展开下拉框面板后的选中样式

下拉框中右侧显示的icon

DropdownButtonFormField字段	用途
icon	下拉框中右侧显示的icon
iconEnabledColor	icon的颜色
iconSize	icon的大小

flutter的下拉框中，貌似没有选中的样式调整，需要自己进行搭建。

简单使用

DropdownButtonFormField<String>(  
          value: 'Select an option',  
          onChanged: (value) {  
            print('Selected: $value');  
          },  
          items: <Widget>[  
            DropdownMenuItem<String>(  
              value: 'Option 1',  
              child: Text('Option 1'),  
            ),  
            DropdownMenuItem<String>(  
              value: 'Option 2',  
              child: Text('Option 2'),  
            ),  
            DropdownMenuItem<String>(  
              value: 'Option 3',  
              child: Text('Option 3'),  
            ),  
          ],  
        ),  

二、可替换按钮的组件InkWell

原因： 为何有这个呢，因为 这也是我第一次接触flutter，并且使用他完成一个项目，在项目完成，测试的时候，美术那边对于一些界面的适配，摆放位置，存在争议，在代码中确实是严按照美术那边给的数据对界面进行适配的。可是按钮他有自己隐形的内边距，在IconButton按钮中，内边距无法进行修改，但是其他的按钮内边距是可以修改的。
比如ElevatedButton按钮。
可是在这个需求中，是需要图标按钮，使用可以修改内边距的按钮无法使用。

在这个前提条件下，我将项目中的IconButton，全部换成成了InkWell，他们的字段有一些不一样。

InkWell字段	用途
onTap	InkWell的点击事件，相当于IconButton的onPressed
child	图标的样式

IconButton字段	用途
onPressed	按钮点击事件
icon	图标的样式