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

前言

1、下拉框

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

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

一、下拉框

DropdownButtonFormField和DropdownButtonFormField2插件相同点

不同点

下拉框中右侧显示的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'),  
            ),  
          ],  
        ),  
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20

二、可替换按钮的组件InkWell

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

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