Flutter下拉列表实现指南：基础实现与点击按钮触发（不使用DropdownButton组件）的方法

Hey there! Let's walk through your two Flutter dropdown-related questions with clear, working code examples.

The DropdownButton is Flutter's built-in, straightforward solution for basic dropdowns—it handles state management, option rendering, and user interactions out of the box. I've expanded the code snippet you provided into a complete, runnable implementation:

import 'package:flutter/material.dart';

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

  @override
  State<BasicDropdownExample> createState() => _BasicDropdownExampleState();
}

class _BasicDropdownExampleState extends State<BasicDropdownExample> {
  // 定义下拉选项列表和选中值变量
  final List<String> _locations = ['北京', '上海', '广州', '深圳'];
  String? _selectedLocation;

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: const Text('基础下拉列表示例')),
      body: Center(
        child: DropdownButton<String>(
          // 未选中任何选项时显示的提示文本
          hint: const Text('选择城市'),
          value: _selectedLocation,
          onChanged: (String? newValue) {
            setState(() {
              _selectedLocation = newValue;
            });
          },
          items: _locations.map((String location) {
            return DropdownMenuItem<String>(
              value: location,
              child: Text(location),
            );
          }).toList(),
        ),
      ),
    );
  }
}

关键细节说明： #

• We use a StatefulWidget because we need to update the UI when the user selects a new option.
• The hint property adds a user-friendly placeholder when no option is selected (optional but recommended).
• The onChanged callback updates the component state, which triggers a UI rebuild to show the selected value.
• Each DropdownMenuItem requires a value (used to track selections) and a child (the visible text for the option).

If you want a dropdown that only appears when a button is tapped, and you don't want to use DropdownButton, the PopupMenuButton is the perfect alternative. It's designed specifically for showing a menu of options on user tap, and it's highly customizable.

Here's a full, working example:

import 'package:flutter/material.dart';

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

  @override
  State<ButtonTriggeredDropdown> createState() => _ButtonTriggeredDropdownState();
}

class _ButtonTriggeredDropdownState extends State<ButtonTriggeredDropdown> {
  final List<String> _options = ['编辑', '删除', '分享', '收藏'];
  String? _selectedAction;

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: const Text('按钮触发下拉列表')),
      body: Center(
        // 自定义样式的触发按钮
        child: ElevatedButton(
          onPressed: () {},
          child: Row(
            mainAxisSize: MainAxisSize.min,
            children: [
              Text(_selectedAction ?? '选择操作'),
              const SizedBox(width: 8),
              const Icon(Icons.arrow_drop_down),
            ],
          ),
        ),
      ),
      // 另一种实现：用悬浮按钮触发下拉菜单
      floatingActionButton: PopupMenuButton<String>(
        // 自定义触发按钮的外观
        child: const FloatingActionButton(
          child: Icon(Icons.more_vert),
        ),
        onSelected: (String value) {
          setState(() {
            _selectedAction = value;
            // 选中选项后的逻辑，比如弹出提示
            ScaffoldMessenger.of(context).showSnackBar(
              SnackBar(content: Text('你选择了：$value')),
            );
          });
        },
        // 生成下拉选项
        itemBuilder: (BuildContext context) {
          return _options.map((String option) {
            return PopupMenuItem<String>(
              value: option,
              child: Text(option),
            );
          }).toList();
        },
      ),
    );
  }
}

关键细节说明： #

• PopupMenuButton only shows its menu when the trigger UI is tapped—exactly the behavior you're looking for.
• You can fully customize the trigger button (like using an ElevatedButton with a dropdown icon, or a FloatingActionButton as shown).
• The onSelected callback handles post-selection logic, including updating state and running any required business code.
• Unlike DropdownButton, the menu doesn't stay open by default—this gives you full control over when the dropdown is visible.

内容的提问来源于stack exchange，提问作者Eng abdulrhman alhamodi