高中数学01——基本初等函数的图形及其性质

是什么

DropdownButton2 是第三方库 dropdown_button2 提供的组件，用法与 DropdownButton 类似，但提供了更多的自定义能力：

• ✅ 更灵活的样式控制（宽高、内边距、图标等）
• ✅ 下拉菜单可以自定义 dropdownStyle（背景、阴影、圆角等）
• ✅ 支持滚动、搜索、自适应等高级功能
• ✅ 更好地支持 Form 和 validator

入门案例

安装

flutter pub add dropdown_button2

代码

import 'package:flutter/material.dart';
import 'package:dropdown_button2/dropdown_button2.dart';

void main() {
  runApp(const MaterialApp(home: MyDropdownDemo()));
}

class MyDropdownDemo extends StatefulWidget {
  const MyDropdownDemo({super.key});

  @override
  State<MyDropdownDemo> createState() => _MyDropdownDemoState();
}

class _MyDropdownDemoState extends State<MyDropdownDemo> {
  final List<String> items = ['苹果', '香蕉', '橙子', '葡萄'];

  String? selectedValue;

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: const Text('DropdownButton2 示例')),
      body: Center(
        child: DropdownButton2<String>(
          // hint: 是下拉框的提示文本
          hint: const Text('请选择水果'),
          // value: 是当前选中的值
          value: selectedValue,
          // items: 是下拉菜单的选项列表
          items: items
              .map((item) => DropdownMenuItem(value: item, child: Text(item)))
              .toList(),
          // onChanged: 当用户选择一个新选项时调用
          onChanged: (value) {
            setState(() {
              selectedValue = value;
            });
          },

          // ↓↓↓ 这些是 DropdownButton2 的常用扩展属性 ↓↓↓

          // buttonStyleData: 按钮样式
          buttonStyleData: const ButtonStyleData(
            height: 50,
            width: 200,
            padding: EdgeInsets.symmetric(horizontal: 16),
            decoration: BoxDecoration(
              borderRadius: BorderRadius.all(Radius.circular(8)),
              border: Border.fromBorderSide(BorderSide(color: Colors.grey)),
              color: Colors.amber,
            ),
          ),
          // dropdownStyleData: 下拉菜单样式
          dropdownStyleData: DropdownStyleData(
            // 设置最大高度，内容多时会滚动
            maxHeight: 200,
            // 设置边框和圆角
            decoration: BoxDecoration(
              borderRadius: BorderRadius.circular(8),
              color: Colors.white,
            ),
          ),
          // menuItemStyleData: 菜单项样式
          menuItemStyleData: const MenuItemStyleData(
            height: 40,
            // 选中项的背景色
            overlayColor: WidgetStatePropertyAll(Colors.blueAccent),
          ),
        ),
      ),
    );
  }
}

menuItemStyleData.overlayColor 只能对 支持鼠标悬浮状态（hover）和按下状态（pressed） 的平台生效，比如 网页（Web）或桌面端（Windows / macOS / Linux）。

在 Flutter 移动端（Android/iOS），是 没有鼠标悬浮状态 的，所以你用 overlayColor，不会有任何颜色变化。

平台	overlayColor 悬浮高亮	点击水波纹高亮
Web / 桌面端	✅ 支持	✅ 支持
移动端	❌ 不支持（无悬浮）	✅ 支持（按下）

常用属性

属性名	说明
items	下拉选项列表（必须）
value	当前选中值
onChanged	选择值改变时的回调
hint	没选中任何值时显示的提示文字
buttonStyleData	控制按钮部分的样式（宽、高、内边距、边框等）
dropdownStyleData	控制下拉菜单的样式（最大高度、圆角、阴影、滚动条等）
menuItemStyleData	控制下拉菜单中每一项的样式（高度、内边距等）
iconStyleData	控制下拉箭头图标的样式（大小、颜色等）
isExpanded	是否撑满父容器宽度
underline	设置为 SizedBox() 可以移除默认下划线

ButtonStyleData 常用属性（按钮样式）

控制 DropdownButton2 主按钮区域（未展开状态）的样式。

属性名	类型	说明
width	double?	按钮宽度
height	double?	按钮高度
padding	EdgeInsetsGeometry?	按钮内边距
decoration	BoxDecoration?	背景颜色、边框、圆角等
elevation	double?	阴影
overlayColor	Color?	按下时的覆盖色
alignment	AlignmentGeometry?	内容对齐方式

DropdownStyleData 常用属性（下拉菜单样式）

控制展开后的整个下拉菜单容器。

属性名	类型	说明
maxHeight	double?	下拉列表最大高度
width	double?	下拉列表宽度（默认跟按钮一致）
decoration	BoxDecoration?	背景颜色、边框、圆角等
elevation	int?	阴影
offset	Offset?	下拉菜单相对按钮的偏移
scrollPadding	EdgeInsetsGeometry?	滚动区域内边距
openInterval	Duration?	打开动画时长

MenuItemStyleData 常用属性（菜单项样式）

属性名	类型	说明
height	double?	每个菜单项高度
padding	EdgeInsetsGeometry?	每个菜单项内边距
overlayColor	WidgetStatePropertyAll<Color?>?	点击/悬停颜色
customHeights	List<double>?	为每个项分别设置高度
alignment	AlignmentGeometry?	项内容对齐方式