Flutter DropdownButton

最新推荐文章于 2025-11-14 11:21:36 发布

原创最新推荐文章于 2025-11-14 11:21:36 发布 · 8.5k 阅读

1 ·

CC 4.0 BY-SA版权

flutter 专栏收录该内容

23 篇文章

订阅专栏

本文详细介绍了Flutter中的DropdownButton组件，包括其用法、属性配置和自定义样式，帮助开发者实现高效的下拉菜单功能。

在这里插入图片描述

// DropdownButton
class DropdownButtonDemoPage extends StatefulWidget {
  @override
  _DropdownButtonDemoPageState createState() => _DropdownButtonDemoPageState();
}

class _DropdownButtonDemoPageState extends State<DropdownButtonDemoPage> {

  var selectItemValue = '北京';

  List<DropdownMenuItem> generateItemList() {
    final List<DropdownMenuItem> items = 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.add(item1);
    items.add(item2);
    items.add(item3);
    items.add(item4);
    return items;
  }

  @override
  Widget build(BuildContext context) {
    return DropdownButton(
      // 提示文本
      hint: Text('请选择一个城市'),
      // 下拉列表的数据
      items: generateItemList(),
      // 改变事件
      onChanged: (value) {
        setState(() {
          selectItemValue = value;
        });
      },
      // 是否撑满
      isExpanded: true,
      value: selectItemValue,
      // 图标大小
      iconSize: 48,
      // 下拉文本样式
      style: TextStyle(color: Colors.green),
    );
  }
}