【Flutter】Flutter 使用 dropdown_button2 实现自定义下拉菜单

### 如何在 Flutter 中使用 `DropdownButton2` 示例 为了创建一个带有自定义样式的下拉菜单，在 Flutter 应用程序中可以采用 `dropdown_button2` 这一插件[^2]。 #### 导入依赖项 首先，需确保项目中的 pubspec.yaml 文件已添加了对 `dropdown_button2` 插件的支持。接着执行命令来安装新的依赖关系： ```yaml dependencies: flutter: sdk: flutter dropdown_button2: ^0.3.0 # 版本号可能有所不同，请查阅最新文档获取确切版本 ``` #### 创建 DropdownButton2 小部件 下面是一个简单的例子展示如何构建并配置 `DropdownButton2`: ```dart import 'package:flutter/material.dart'; import 'package:dropdown_button2/dropdown_button2.dart'; class CustomDropDown extends StatefulWidget { @override _CustomDropDownState createState() => _CustomDropDownState(); } class _CustomDropDownState extends State<CustomDropDown> { String? selectedValue; List<String> items = ['Item1', 'Item2', 'Item3']; @override Widget build(BuildContext context) { return Scaffold( appBar: AppBar(title: Text('Dropdown Button Example')), body: Center( child: DropdownButtonFormField2( decoration: InputDecoration( isDense: true, contentPadding: EdgeInsets.zero, border: OutlineInputBorder(), ), hint: const Text('Select Item'), icon: Icon(Icons.arrow_drop_down), buttonHeight: 40, itemHeight: 40, onChanged: (value){ setState(() { selectedValue=value; }); }, onSaved: (newValue) {}, value: selectedValue, items: items.map((item) => DropdownMenuItem<String>( value: item, child: Text(item, style: TextStyle(fontSize: 14),), ) ).toList(), ), ), ); } } ``` 此代码片段展示了如何通过设置不同的属性来自定义外观以及行为方式，比如改变提示文字、图标样式等参数。