flutter的DropdownButton示例

这段代码实现了一个Flutter应用的首页，其中包含一个DropdownButton，用于通过下拉菜单选择一个字符串值。选择的值会显示在页面上，并通过_onItemSelected函数更新_selectedValue状态变量。容器带有默认的Material Design主题。

import 'package:flutter/material.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: DropdownDemo(),
    );
  }
}

class DropdownDemo extends StatefulWidget {
  @override
  _DropdownDemoState createState() => _DropdownDemoState();
}

class _DropdownDemoState extends State<DropdownDemo> {
  String _selectedValue = 'One'; // 默认选中的值

  // 定义一个字符串列表，作为下拉菜单的选项
  final List<String> _items = ['One', 'Two', 'Three', 'Four'];

  void _onItemSelected(String? value) {
    // 检查value是否为null，虽然对于DropdownButton来说，如果items列表中的值不是null，
    // 那么onChanged回调中传递的值也不会是null。但这里为了示例的完整性，我们还是进行检查。
    if (value != null) {
      setState(() {
        _selectedValue = value;
      });
    }
    // 如果确定value永远不会为null，你也可以直接赋值，但通常最好进行检查。
    // setState(() {
    //   _selectedValue = value!; // 使用!运算符表示你知道value不是null
    // });
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('DropdownButton Demo'),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            // 显示当前选中的值
            Text('Selected: $_selectedValue'),
            // DropdownButton
            DropdownButton<String?>(
              value: _selectedValue,
              icon: Icon(Icons.arrow_downward),
              iconSize: 24,
              elevation: 16,
              style: TextStyle(color: Colors.deepPurple),
              underline: Container(
                height: 2,
                color: Colors.deepPurpleAccent,
              ),
              onChanged: _onItemSelected, // 这里直接传递你的函数，无需其他修改
              items: _items.map((String value) {
                // 注意：这里的value是String类型，不是String?，因为_items是String列表
                // DropdownButton会自动处理null值的情况，但在这里我们不需要显式地传递null
                return DropdownMenuItem<String?>(
                  value:
                      value, // 这里使用String类型作为value，但泛型是String?以兼容onChanged的签名
                  child: Text(value),
                );
              }).toList(),
            ),
          ],
        ),
      ),
    );
  }
}

以下是对这段代码的分析：
一、整体结构
这段代码是一个使用 Flutter 框架构建的应用程序，主要展示了一个带有下拉菜单（DropdownButton）的界面，用户可以从下拉菜单中选择一个选项，界面会显示当前选中的选项值。

二、代码详细分析
导入部分
import ‘package:flutter/material.dart’;：导入了 Flutter 的 Material 设计库，以便使用其中的各种 UI 组件。

main函数
void main() { runApp(MyApp()); }：应用程序的入口点，调用runApp函数启动应用，并传入MyApp实例。

MyApp类
继承自StatelessWidget，表示这是一个无状态的组件。
build方法中返回一个MaterialApp，将DropdownDemo作为应用的首页。

DropdownDemo类
继承自StatefulWidget，表示这是一个有状态的组件。
createState方法返回一个_DropdownDemoState实例，用于管理该组件的状态。

_DropdownDemoState类
定义了一个状态变量_selectedValue，初始值为 ‘One’，用于存储当前选中的下拉菜单选项值。
定义了一个字符串列表_items，作为下拉菜单的选项。
_onItemSelected方法：当下拉菜单的选项发生改变时被调用。接收一个可选的字符串参数value， 如果value不为null，则通过setState方法更新_selectedValue的值。

build方法：
返回一个Scaffold，构建了应用的基本布局结构。
appBar是一个应用栏，显示应用的标题为 “DropdownButton Demo”。
body是一个居中的Column布局：
包含一个Text组件，显示当前选中的值，即 “Selected: $_selectedValue”。

DropdownButton<String?>：
value属性设置为当前选中的值_selectedValue。
icon和iconSize设置下拉按钮的图标和大小。
elevation设置下拉菜单的阴影效果。
style设置下拉菜单文本的颜色。
underline设置下拉菜单下划线的样式。
onChanged属性设置为_onItemSelected方法，用于处理选项改变的事件。
items属性通过遍历_items列表，创建一个包含DropdownMenuItem<String?>的列表，每个 DropdownMenuItem对应一个选项，显示相应的文本。

三、功能总结
这个应用程序在 Windows 平台上创建了一个界面，通过有状态组件管理下拉菜单的状态。用户可以从下拉菜单中选择一个选项，界面会实时显示当前选中的选项值。下拉菜单具有自定义的样式，包括图标、颜色、阴影和下划线等。这种方式可以方便地在应用中提供选项选择功能，并实时更新界面显示以反映用户的选择。