class MyApp extends StatelessWidget { const MyApp({Key key}) : super(key: key); @override Widget build(BuildContext context) { return MaterialApp( title: 'DropdownButton下拉菜单按钮', home: Scaffold( appBar: AppBar( title: Text('DropdownButton下拉菜单按钮'), ), body: DemoPage(), ), ); } } class DemoPage extends StatefulWidget { DemoPage({Key key}) : super(key: key); @override _DemoPageState createState() => _DemoPageState(); } class _DemoPageState extends State<DemoPage> { String dropdownValue = 'One'; @override Widget build(BuildContext context) { return Center( child: ListTile( title: Text('下拉菜单按钮'), trailing: DropdownButton( value: dropdownValue, onChanged: (String value) { setState(() { dropdownValue = value; }); }, items: <String>['one', 'tow', 'three', 'four'].map<DropdownMenuItem<String>>((String value) { return DropdownMenuItem( value: value, child: Text(value), ); }).toList(), ), ), ); } }
Flutter笔记40:DropdownButton下拉框按钮
DropdownButton相当于html的select下拉框,注意它与PopupMenuButton的区别。下面是代码演示: