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 ?? '默认音乐';
    });
  }

  @override
  Widget 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 示例，可以根据需要对其进行定制和扩展，以满足特定的应用程序需求和设计准则。