Flutter笔记40：DropdownButton下拉框按钮

DropdownButton相当于html的select下拉框，注意它与PopupMenuButton的区别。下面是代码演示：

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(),
        ),
      ),
    );
  }
}

部分素材资源来源网站，本站提供免费下载，如有侵权请联系站长马上删除！