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

Flutter实现定制下拉框与InkWell替代按钮,

最新推荐文章于 2025-09-02 01:11:54 发布

原创

最新推荐文章于 2025-09-02 01:11:54 发布 · 2k 阅读

23 ·

CC 4.0 BY-SA版权

文章标签：

#flutter

本文介绍了如何在Flutter项目中使用DropdownButtonFormField2插件创建下拉框，以及如何用InkWell组件替代系统自带按钮以适应特殊样式和屏幕适配需求。作者还讨论了Flutter下拉框样式定制的局限性。

前言

1、下拉框

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

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

一、下拉框

DropdownButtonFormField和DropdownButtonFormField2插件相同点

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