class MyApp extends StatelessWidget { @override Widget build(BuildContext context) { return MaterialApp( title: 'DropdownButton', home: Scaffold( appBar: AppBar( title: Text('DropdownButton'), ), body: DropdownButtonDemo(), )); } } class DropdownButtonDemo extends StatefulWidget { DropdownButtonDemo({Key key}) : super(key: key); @override _DropdownButtonDemoState createState() => _DropdownButtonDemoState(); } class _DropdownButtonDemoState extends State<DropdownButtonDemo> { var selectItemValue = '北京'; List<DropdownMenuItem> generateItemList() { final List<DropdownMenuItem> items = new List(); final DropdownMenuItem item1 = DropdownMenuItem( child: Text('北京'), value: '北京', ); final DropdownMenuItem item2 = DropdownMenuItem( child: Text('上海'), value: '上海', ); final DropdownMenuItem item3 = DropdownMenuItem( child: Text('广州'), value: '广州', ); final DropdownMenuItem item4 = DropdownMenuItem( child: Text('深圳'), value: '深圳', ); items.addAll([item1, item2, item3, item4]); return items; } @override Widget build(BuildContext context) { return DropdownButton( //提示文本 hint: Text('请选择一个城市'), //下拉列表项 items: generateItemList(), //默认值 value: selectItemValue, //下拉三角大小 iconSize: 48.0, //阴影大小 elevation: 1, //是否和父容器宽度保持一致(默认false,占一般左右),通常用这个设置宽度 isExpanded: true, //下拉文本样式 style: TextStyle(color: Colors.green), //下拉改变事件 onChanged: (value) { setState(() { this.selectItemValue = value; }); }, ); } }
Flutter笔记9:DropdownButton下拉框组件
Flutter的DropdownButton下拉框组件和html的select下拉选择框非常类似,使用也非常简单,属性不多,代码如下: