按钮下拉框设计java_Flutter 74: 图解基本 DropdownButton 下拉选项框按钮

和尚对于 Flutter 并不系统，总是遇到问题才会准备尝试，今天和尚准备学习一下下拉选择框；Android 提供了便利的 Spinner 而 Flutter 对应的是 DropdownButton；

源码分析

DropdownButton({

Key key,

@required this.items, // 下拉选项列表

this.selectedItemBuilder, // 选项 item 构造器

this.value, // 选中内容

this.hint, // 启动状态下默认内容

this.disabledHint, // 禁用状态下默认内容

@required this.onChanged, // 选择 item 回调

this.elevation = 8, // 阴影高度

this.style, // 选项列表 item 样式

this.underline, // 按钮下划线

this.icon, // 下拉按钮图标

this.iconDisabledColor, // 禁用状态下图标颜色

this.iconEnabledColor, // 启动时图标颜色

this.iconSize = 24.0, // 图标尺寸

this.isDense = false, // 是否降低按钮高度

this.isExpanded = false, // 是否将下拉列表内容设置水平填充

})

const DropdownMenuItem({

Key key,

this.value, // 对应选中状态内容

@required this.child, // 下拉列表 item 内容

})

分析源码可知，items 和 onChanged 回调是必须参数，且在不同状态下，展示的效果不同；其中 items 或 onChanged 为 null 时为禁用状态，和尚接下来逐一分析各属性；

案例分析

items 为下拉选项列表，onChanged 为选中回调；两者其中一个为 null 时为按钮禁用状态，不可点击，默认下拉 icon 为灰色；items 不为空时，需为相同类型的 DropdownMenuItem 类型列表；

DropdownButton(items: null, onChanged: null);

DropdownButton(items: [

DropdownMenuItem(c