import 'package:flutter/material.dart';

/// Flutter code sample for [DropdownButton].

void main() => runApp(const DropdownButtonApp());

class DropdownButtonApp extends StatelessWidget {
  const DropdownButtonApp({super.key});

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(title: const Text('DropdownButton Sample')),
        body: const Center(
          child: DropdownButtonExample(),
        ),
      ),
    );
  }
}

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

  @override
  State<DropdownButtonExample> createState() => _DropdownButtonExampleState();
}

class _DropdownButtonExampleState extends State<DropdownButtonExample> {
  int dropdownValue = list.first;
  int? selectedValue;

  @override
  Widget build(BuildContext context) {
    /// use either option 1 or option 2

    /// options 1
    List<DropdownData> dropdownItems = [
      DropdownData(10, 'Small'),
      DropdownData(20, 'Medium'),
      DropdownData(30, 'Large'),
    ];

    /// options 2
    List<EnumSize> dropdownItems = [
      EnumSize.small,
      EnumSize.medium,
      EnumSize.large,
    ];

    return DropdownButton(
      value: selectedValue,
      items: dropdownItems
          .map<DropdownMenuItem<int>>((e) => DropdownMenuItem(
                value: e.value,
                child: Text(
                  e.label,
                  style: const TextStyle(
                    fontSize: 20,
                    fontFamily: 'Inconsolata',
                    fontWeight: FontWeight.bold,
                    color: Color(0xCBFDC4AB),
                  ),
                ),
              ))
          .toList(),
      dropdownColor: Colors.brown,
      underline: Container(
        height: 3,
        color: const Color(0xCBFDC4AB),
      ),
      icon: const Icon(Icons.arrow_downward),
      onChanged: (int? newValue) {
        setState(() {
          selectedValue = newValue!;
          print([newValue, newValue.runtimeType]);
        });
      },
    );
  }
}

class DropdownData {
  final int value;
  final String label;
  DropdownData(this.value, this.label);
}

enum EnumSize {
  small(10, 'Small'),
  medium(20, 'Medium'),
  large(30, 'Large');

  final int value;
  final String label;
  const EnumSize(this.value, this.label);
}

• 解释一下

DropdownButton(
    items : ... /// require `List<DropdownMenuItem<int>>`
)

• 所以基本上它是一个DropdownMenuItem的列表，值为int

DropdownButton(
    items : dropdownItems // loop through list `dropdownItems`
          .map<DropdownMenuItem<int>>((e) => DropdownMenuItem( /// return a `DropdownMenuItem`
                value: e.value, /// with value of `int`
                child: Text( /// and a child `Widget`
                  e.label, // label of child `Widget`
                  style: const TextStyle(
                    fontSize: 20,
                    fontFamily: 'Inconsolata',
                    fontWeight: FontWeight.bold,
                    color: Color(0xCBFDC4AB),
                  ),
                ),
              ))
          .toList(), because `.map()` return a `Iterable` but we need a `List`
)

• 了解更多：你应该伸出DropdownButton的文档。他们用视频提供了一个例子和解释。