Flutter中如何在onPressed与setState中正确使用If条件并联动下拉菜单

核心问题 #

你代码里的关键错误是：在FloatingActionButton的点击事件中，每次都新建了一个_DropdownButtonExampleState实例，而不是获取当前界面上正在显示的那个下拉菜单的真实状态。这导致你判断的永远是新实例的默认值Item 1，自然不会触发预期的文本切换。

推荐解决方案：状态提升（Flutter官方推荐） #

把下拉菜单的共享状态（选中值、选项列表）移到父组件MyHomePage中，让子组件DropdownButtonExample通过回调同步状态，这样父组件可以直接获取选中值进行判断。

修改后的完整代码

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
const MyApp({Key? key}) : super(key: key);
@override
Widget build(BuildContext context) {
    return MaterialApp(
    title: 'DropDownButton and FloatingActionButton',
    theme: ThemeData(
        primarySwatch: Colors.green,
    floatingActionButtonTheme: const FloatingActionButtonThemeData(
        splashColor: Colors.tealAccent,
        hoverColor: Colors.redAccent,
   ),
    ),
    home: const MyHomePage(),
    debugShowCheckedModeBanner: false,
    );
}
}

class MyHomePage extends StatefulWidget {
const MyHomePage({Key? key}) : super(key: key);

@override
_MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  
  int showText = 1;
  // 将下拉菜单的状态移到父组件
  String dropdownvalue = 'Item 1';
  final items = [
    'Item 1',
    'Item 2',
    'Item 3',
    'Item 4',
    'Item 5',
  ];
  
  @override
  Widget build(BuildContext context) {
    return Scaffold(
    appBar: AppBar(
      title: const Text("Geeksforgeeks"),
    ),
    body: Center(
      child: Column(
        mainAxisAlignment: MainAxisAlignment.start,
        children: [
          // 传递状态和回调给下拉组件
          DropdownButtonExample(
            value: dropdownvalue,
            items: items,
            onChanged: (newValue) {
              setState(() {
                dropdownvalue = newValue!;
              });
            },
          ),
          image(),
        ]
      )
    ),
    floatingActionButton: FloatingActionButton(
      backgroundColor: Colors.green,
      child: const Icon(Icons.navigation),
      onPressed: () {
          // 直接使用父组件中保存的选中值
          if(dropdownvalue == "Item 3"){
            setState((){
              showText = 1;
            });
          }else if (dropdownvalue == "Item 2") {
            setState((){
              showText = 2;
            });
          }else{
            setState((){
              showText = 3;
            });
        }
      }
    ),
   );
  }
  
  Widget image(){
     if (showText == 1){
          return const Text("Yo");
     } else if (showText == 2){
          return const Text("Hi");
     } else{
          return const Text("Hello");
     }
  }
}

// 改为无状态组件，接收外部传递的状态和回调
class DropdownButtonExample extends StatelessWidget {
  final String value;
  final List<String> items;
  final Function(String?) onChanged;

  const DropdownButtonExample({
    Key? key,
    required this.value,
    required this.items,
    required this.onChanged,
  }) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return DropdownButton(
            value: value,
            icon: const Icon(Icons.keyboard_arrow_down),
            items: items.map((String item) {
                return DropdownMenuItem(
                value: item,
                child: Text(item),
                );
            }).toList(),
            onChanged: onChanged,
    );
  }
}

临时方案：使用GlobalKey获取子组件状态（不推荐，适合小场景） #

如果不想重构组件，可以通过GlobalKey直接获取子组件的状态：

关键修改代码

class _MyHomePageState extends State<MyHomePage> {
  
  int showText = 1;
  // 创建GlobalKey
  final _dropdownKey = GlobalKey<_DropdownButtonExampleState>();
  
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      // ...其他代码不变
      body: Center(
        child: Column(
          children: [
            // 给下拉组件设置key
            DropdownButtonExample(key: _dropdownKey),
            image(),
          ]
        )
      ),
      floatingActionButton: FloatingActionButton(
        onPressed: () {
            // 通过key获取当前子组件的真实选中值
            final selectedValue = _dropdownKey.currentState?.dropdownvalue;
            if(selectedValue == "Item 3"){
              setState((){
                showText = 1;
              });
            }else if (selectedValue == "Item 2") {
              setState((){
                showText = 2;
              });
            }else{
              setState((){
                showText = 3;
              });
          }
        }
      ),
    );
  }
}

说明 #

状态提升是Flutter推荐的组件状态管理方式，它让组件间的状态流转更清晰，避免直接操作子组件状态带来的耦合问题。

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