2-6.5.【DropdownButton】下拉选择按钮

基本属性

  DropdownButton({
    Key key,
    @required this.items, // 每一项的数据列
    this.selectedItemBuilder,
    this.value,  // 显示信息内容
    this.hint,   // 默认提示文本 当value = null时。
    this.disabledHint, // 禁用状态下的提示文本【没有onChanged事件】
    @required this.onChanged, // 选择的时候触发。
    this.onTap,  // 点击的时候触发。
    this.elevation = 8,
    this.style,  
    this.underline,  // 下划线
    this.icon,  // 下拉的图标 
    this.iconDisabledColor,  
    this.iconEnabledColor,
    this.iconSize = 24.0,  // 图标大小
    this.isDense = false,
    this.isExpanded = false,
    this.itemHeight = kMinInteractiveDimension,
    this.focusColor, // 
    this.focusNode,  // 
    this.autofocus = false,
    this.dropdownColor, // 点击后背景色。
  })

写了备注的都是我本人觉得比较用的上的。

基本用法

默认提示 && 禁用提示

DropdownButton(
   value: _DropdownButtonValue,  // 显示信息内容
   hint: Text('请选择具体项！'), // 默认提示文本
   disabledHint : Text("你无选择权！"), // 禁用状态下的提示文本【没有onChanged事件】
   style: TextStyle(
     fontFamily: "",
     color: Color(0xff333333),
   ),
   items: [ // 每一项的数据列
     DropdownMenuItem(
       child: Text("托尼", style: TextStyle(fontSize:  22.0 , fontWeight: FontWeight.w400 ) ), // 展示给用户看的信息。
       value:"乔巴" ,  // 匹配显示信息 输出信息
       onTap: (){
          print("乔巴被点击了，即将死亡！");
       },
     ), 
     DropdownMenuItem(child: Text("娜美", 
                                  style: TextStyle(
                                      inherit: false,
                                      fontSize:  22.0 , 
                                      fontWeight: FontWeight.w400 
                                    )
                                  ),
                             value:"娜美" ),
     DropdownMenuItem(child: Text("布鲁克",softWrap : false , style: TextStyle(fontSize:  22.0 , fontWeight: FontWeight.w400 )), value:"布鲁克" ),
     DropdownMenuItem(child: Text("路飞", style: TextStyle(fontSize:  22.0 , fontWeight: FontWeight.w400 )), value:"路飞" ),
     DropdownMenuItem(child: Text("索隆", style: TextStyle(fontSize:  22.0 , fontWeight: FontWeight.w400 )), value:"索隆" ),
   ],
   onTap: (){  // 点击的时候触发。
      print("123456123456");
   },
   onChanged: (e){  // 选择的时候触发。
      setState(() {
        _DropdownButtonValue = e;
        print(_DropdownButtonValue);
      });
   },
),

添加下划线

更改下拉箭头Icon

更改下拉背景色

这里会发现，娜美的字体颜色是白色的，是因为在Text()中将字体的继承关系取消了，所以是默认字体颜色【white】。

其余的属性看上面的属性描述。