Flutter应用下拉菜单设计DropdownButtonFormField控件介绍

在这里插入图片描述

文章目录

DropdownButtonFormField介绍
使用方法
- 重点代码说明
- 属性解释
注意事项

DropdownButtonFormField介绍

Flutter 中的 DropdownButtonFormField 是一个用于在表单中选择下拉菜单的控件。它是 DropdownButton 和 TextFormField 的组合，允许用户从一组选项中选择一个值，并将所选值作为表单字段的值。

使用方法

要使用 DropdownButtonFormField，首先需要在 Flutter 项目中添加 flutter/material.dart 包，然后在需要的地方导入它。

import 'package:flutter/material.dart';

然后，在 Flutter 组件中使用 DropdownButtonFormField。以下是一个简单示例：

import 'package:flutter/material.dart';class MusicSettingsPage extends StatefulWidget {const MusicSettingsPage({Key? key}) : super(key: key);@override_MusicSettingsPageState createState() => _MusicSettingsPageState();
}class _MusicSettingsPageState extends State<MusicSettingsPage> {// 存储每个音乐类型的选择String _selectedExerciseMusic = '默认音乐';String _selectedRestMusic = '默认音乐';String _selectedFinishMusic = '默认音乐';// 可选音乐列表List<String> _exerciseMusics = ['默认音乐', '音乐1', '音乐2', '音乐3'];List<String> _restMusics = ['默认音乐', '音乐1', '音乐2', '音乐3'];List<String> _finishMusics = ['默认音乐', '音乐1', '音乐2', '音乐3'];// 下拉菜单更新选择void _updateExerciseMusic(String? value) {setState(() {_selectedExerciseMusic = value ?? '默认音乐';});}void _updateRestMusic(String? value) {setState(() {_selectedRestMusic = value ?? '默认音乐';});}void _updateFinishMusic(String? value) {setState(() {_selectedFinishMusic = value ?? '默认音乐';});}@overrideWidget build(BuildContext context) {return Scaffold(appBar: AppBar(title: Text('音乐设置'),),body: Padding(padding: const EdgeInsets.all(16.0),child: Column(children: <Widget>[// 运动音乐选择DropdownButtonFormField<String>(value: _selectedExerciseMusic,items: _exerciseMusics.map((String music) {return DropdownMenuItem<String>(value: music,child: Text(music),);}).toList(),onChanged: _updateExerciseMusic,decoration: InputDecoration(labelText: '运动音乐',),),SizedBox(height: 16.0),// 休息音乐选择DropdownButtonFormField<String>(value: _selectedRestMusic,items: _restMusics.map((String music) {return DropdownMenuItem<String>(value: music,child: Text(music),);}).toList(),onChanged: _updateRestMusic,decoration: InputDecoration(labelText: '休息音乐',),),SizedBox(height: 16.0),// 结束音乐选择DropdownButtonFormField<String>(value: _selectedFinishMusic,items: _finishMusics.map((String music) {return DropdownMenuItem<String>(value: music,child: Text(music),);}).toList(),onChanged: _updateFinishMusic,decoration: InputDecoration(labelText: '结束音乐',),),],),),);}
}

重点代码说明

              items: _exerciseMusics.map((String music) {return DropdownMenuItem<String>(value: music,child: Text(music),);}).toList(),

这段代码是使用 _exerciseMusics 列表中的元素来生成 DropdownMenuItem 列表，用于填充 DropdownButtonFormField 的下拉菜单选项。

_exerciseMusics.map((String music) { … })：
这里使用了列表 _exerciseMusics 的 map 方法。map 方法会将列表中的每个元素都映射为另一个值，返回一个新的迭代器。
(String music) 是一个参数，表示 map 方法中的每个元素都会作为 music 变量传递给后续的函数。

return DropdownMenuItem<String>(value: music, child: Text(music),)：

在 map 方法的每次迭代中，针对列表中的每个 music 元素，会生成一个 DropdownMenuItem 对象。
value: music：这里将 DropdownMenuItem 的 value 属性设置为当前音乐元素的值。在用户选择此选项时，DropdownButtonFormField 将使用这个值。
child: Text(music)：这里将 DropdownMenuItem 的 child 属性设置为一个 Text 组件，显示当前音乐元素的文本内容。
.toList()：
map 方法返回一个迭代器，通过调用 .toList()，将迭代器转换为一个新的列表。
这个新的列表包含了 DropdownMenuItem 对象，每个对象都代表了 _exerciseMusics 列表中的一个元素对应的下拉菜单选项。
因此，整个代码段的作用是将 _exerciseMusics 列表中的每个音乐元素转换为 DropdownMenuItem 对象，这些对象构成了一个 `List

，可以用作 DropdownButtonFormField的items` 属性，用于显示下拉菜单中的选项。

属性解释

value: 当前选定的值。在组件初始化时，可以将其设置为表单字段的初始值。
items: 下拉菜单中显示的选项列表。这是一个 List <String>，每个元素都是一个 DropdownMenuItem<String> 对象，包含一个值和显示在下拉菜单中的文本部分。

onChanged: 当用户选择新值时触发的回调函数。可以在这里更新 value，以便在用户进行更改时更新表单字段的值。
decoration: 用于设置表单字段的装饰，比如添加标签文本、边框等。

注意事项

DropdownButtonFormField 可以嵌套在 Form 中，这样可以与其他表单字段一起使用，并且可以利用表单验证功能。
如果希望在选择列表中显示更复杂的项目，可以使用自定义 DropdownMenuItem。
可以根据需要设置 icon、iconSize、isExpanded 等属性来定制下拉菜单的外观和行为。
这是一个基本的 DropdownButtonFormField 示例，可以根据需要对其进行定制和扩展，以满足特定的应用程序需求和设计准则。