Flutter DropdownButton


简介

Dropdown button “用于从项目列表中进行选择的按钮”

  • 参数类型 T 是下拉菜单表示的值的类型。给定菜单中的所有条目必须表示具有一致类型的值。通常,使用枚举。每个DropdownMenuItem在项目必须专门与同类型的说法;

基本用法

此示例显示一个包含四个项目的菜单

实例演示

import 'package:flutter/material.dart';

/*
* DropdownButton 默认按钮的实例
* isDisabled:是否是禁用,isDisabled 默认为true
* */
var selectItValue;
var selectItemValue;

class DropdownButtonDefault extends StatelessWidget {
   List<DropdownMenuItem> generateItemList() {
    final List<DropdownMenuItem> items =  List();
    final DropdownMenuItem item1 =  DropdownMenuItem(
        value: '张三', child:  Text('张三'));
    final DropdownMenuItem item2 =  DropdownMenuItem(
        value: '李四', child:  Text('李四'));
    final DropdownMenuItem item3 =  DropdownMenuItem(
        value: '王二', child:  Text('王二'));
    final DropdownMenuItem item4 =  DropdownMenuItem(
        value: '麻子', child:  Text('麻子'));
    items.add(item1);
    items.add(item2);
    items.add(item3);
    items.add(item4);
    return items;
  }

  @override
  Widget build(BuildContext context) {
    return DropdownButton(
        hint:  Text('下拉菜单选择一个人名'),
        //设置这个value之后,选中对应位置的item,
        //再次呼出下拉菜单,会自动定位item位置在当前按钮显示的位置处
        value: selectItValue,
        items: generateItemList(),
        onChanged: (T){
//          setState(() {
//          selectItemValue=T;
//          });
        },
    );
  }
}

List<DropdownMenuItem> getListData(){
  List<DropdownMenuItem> items= List();
  DropdownMenuItem dropdownMenuItem1= DropdownMenuItem(
    child: Text('1'),
    value: '1',
  );
  items.add(dropdownMenuItem1);
  DropdownMenuItem dropdownMenuItem2= DropdownMenuItem(
    child: Text('2'),
    value: '2',
  );
  items.add(dropdownMenuItem2);
  DropdownMenuItem dropdownMenuItem3= DropdownMenuItem(
    child: Text('3'),
    value: '3',
  );
  items.add(dropdownMenuItem3);
  DropdownMenuItem dropdownMenuItem4= DropdownMenuItem(
    child: Text('4'),
    value: '4',
  );
  items.add(dropdownMenuItem4);
  DropdownMenuItem dropdownMenuItem5= DropdownMenuItem(
    child: Text('5'),
    value: '5',
  );
  items.add(dropdownMenuItem5);
  DropdownMenuItem dropdownMenuItem6= DropdownMenuItem(
    child: Text('6'),
    value: '6',
  );
  items.add(dropdownMenuItem6);
  DropdownMenuItem dropdownMenuItem7= DropdownMenuItem(
    child: Text('7'),
    value: '7',
  );
  items.add(dropdownMenuItem7);
  DropdownMenuItem dropdownMenuItem8= DropdownMenuItem(
    child: Text('8'),
    value: '8',
  );
  items.add(dropdownMenuItem8);
  DropdownMenuItem dropdownMenuItem9= DropdownMenuItem(
    child: Text('9'),
    value: '9',
  );
  items.add(dropdownMenuItem9);
  DropdownMenuItem dropdownMenuItem10= DropdownMenuItem(
    child: Text('10'),
    value: '10',
  );
  items.add(dropdownMenuItem10);
  return items;
}

/*
* DropdownButton 自定义的实例
* */
class DropdownButtonCustom extends StatelessWidget {
  final widget;
  final parent;
  const DropdownButtonCustom([this.widget,this.parent])
      : super();

  @override
  Widget build(BuildContext context) {
    return DropdownButton(
        items: getListData(),
        //当没有默认值的时候可以设置的提示
        hint:Text('下拉选择你想要的数据'),
        //下拉菜单选择完之后显示给用户的值
        value: selectItemValue,
        //下拉菜单item点击之后的回调
        onChanged: (T){
          if (parent.mounted) {
            parent.setState(() {
              selectItemValue = T;
            });
          }
        },
        //设置阴影的高度
        elevation: 24,
        style: TextStyle(//设置文本框里面文字的样式
            color: Colors.red
        ),
        // isDense: true,//减少按钮的高度。默认情况下,此按钮的高度与其菜单项的高度相同。如果isDense为true,则按钮的高度减少约一半。 这个当按钮嵌入添加的容器中时,非常有用
        // 将下拉列表的内部内容设置为水平填充其父级
        isExpanded:true,
        iconSize: 50.0,//设置三角标icon的大小
    );
  }
}