Flutter依赖下拉菜单构建与组件值传递问题求助

你的问题核心在于状态管理的层级不对——原本Dropdown自己管理状态且用全局变量传递状态，导致父组件Filter无法感知变化而不刷新；同时子组件的选中值没法传递到父组件的按钮回调里。下面是完整的重构方案，一步解决两个问题：

核心思路：状态提升（State Lifting） #

把所有Dropdown的选中状态统一放到父组件Filter中管理，子组件Dropdown只负责渲染和把选中事件通知给父组件。这样父组件既能实时感知状态变化触发UI刷新，也能统一收集所有选中值供按钮使用。

修改后的代码 #

1. filter.dart（父组件，统一管理状态）

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

class Filter extends StatefulWidget {
  @override
  _FilterState createState() => _FilterState();
}

class _FilterState extends State<Filter> {
  // 用Map保存所有Dropdown的选中值，key对应Dropdown的标题，value是选中的选项
  final Map<String, String> _selectedOptions = {};

  // 子组件Dropdown选中变化时的回调，更新父组件状态
  void _onOptionSelected(String dropdownKey, String selectedValue) {
    setState(() {
      _selectedOptions[dropdownKey] = selectedValue;
    });
  }

  @override
  Widget build(BuildContext context) {
    return Card(
      elevation: 10,
      child: Container(
        height: (MediaQuery.of(context).size.height) / 2,
        padding: EdgeInsets.all(20),
        child: Column(
          mainAxisAlignment: MainAxisAlignment.spaceBetween,
          children: <Widget>[
            Column(
              children: <Widget>[
                // 传递标题、选项列表、已选中值和回调给Dropdown
                Dropdown(
                  title: 'Gender',
                  options: ['Female', 'Male'],
                  selectedValue: _selectedOptions['Gender'],
                  onSelected: (value) => _onOptionSelected('Gender', value),
                ),
                Dropdown(
                  title: 'Age',
                  options: ['<15', '15-20', '>20'],
                  selectedValue: _selectedOptions['Age'],
                  onSelected: (value) => _onOptionSelected('Age', value),
                ),
                Dropdown(
                  title: 'Favourite Animal',
                  options: ['Cat', 'Dog', 'Hamster'],
                  selectedValue: _selectedOptions['Favourite Animal'],
                  onSelected: (value) => _onOptionSelected('Favourite Animal', value),
                ),
                // 动态显示第四个Dropdown：只有选中Cat时才渲染
                if (_selectedOptions['Favourite Animal'] == 'Cat')
                  Dropdown(
                    title: 'Favourite cat-toy',
                    options: ['Toy-mouse', 'Ribbon', 'Ball'],
                    selectedValue: _selectedOptions['Favourite cat-toy'],
                    onSelected: (value) => _onOptionSelected('Favourite cat-toy', value),
                  ),
              ],
            ),
            RaisedButton(
              child: Text('Submit'),
              onPressed: () {
                // 这里可以直接获取所有Dropdown的选中值！
                print('提交的筛选条件：$_selectedOptions');
                // 示例：获取单个选项
                String userGender = _selectedOptions['Gender'];
                String favoriteCatToy = _selectedOptions['Favourite cat-toy'];
                // 执行你的提交逻辑（比如请求API、保存本地等）
              },
            ),
          ],
        ),
      ),
    );
  }
}

2. dropdown.dart（子组件，无状态，只负责渲染和传递事件）

import 'package:flutter/material.dart';

class Dropdown extends StatelessWidget {
  final String title;
  final List<String> options;
  final String selectedValue;
  final Function(String) onSelected;

  // 构造函数用命名参数更清晰
  Dropdown({
    @required this.title,
    @required this.options,
    this.selectedValue,
    this.onSelected,
  });

  @override
  Widget build(BuildContext context) {
    return Padding(
      padding: const EdgeInsets.symmetric(horizontal: 20, vertical: 5),
      child: DropdownButton<String>(
        hint: Text(title),
        value: selectedValue,
        icon: Icon(Icons.arrow_drop_down),
        iconSize: 24,
        isExpanded: true,
        items: options.map<DropdownMenuItem<String>>((String option) {
          return DropdownMenuItem<String>(
            value: option,
            child: Text(option),
          );
        }).toList(),
        onChanged: onSelected,
      ),
    );
  }
}

关键修改点说明 #

1. 解决动态显示/隐藏的问题 #

• 删掉了全局变量cat，改用父组件的_selectedOptions Map来判断状态，避免全局状态的混乱。
• 当用户选择Favourite Animal时，父组件通过setState更新状态，触发整个Filter组件重新build，第四个Dropdown会自动显示/隐藏，不需要手动热重载。

2. 解决传递选中值到按钮的问题 #

• 所有Dropdown的选中值都存在父组件的_selectedOptions里，在RaisedButton的onPressed回调中可以直接访问这个Map，获取任意一个Dropdown的选中值。
• 你可以直接把这些值用于业务逻辑，比如提交到后端、保存到本地存储等。

3. 代码优化 #

• 把Dropdown改成无状态组件（StatelessWidget），因为状态已经交给父组件管理，子组件只需要负责UI渲染，代码更简洁。
• 用命名参数替代位置参数，代码可读性更高。

内容的提问来源于stack exchange，提问作者Tara J