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

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


结束语
Flutter是一个由Google开发的开源UI工具包,它可以让您在不同平台上创建高质量、美观的应用程序,而无需编写大量平台特定的代码。我将学习和深入研究Flutter的方方面面。从基础知识到高级技巧,从UI设计到性能优化,欢饮关注一起讨论学习,共同进入Flutter的精彩世界!

上一篇:设计模式:合成复用原则(Composite Reuse Principle,CRP)介绍


下一篇:初学python记录:力扣2385. 感染二叉树需要的总时间