如何从父Widget设置指定同类型子Widget的状态？

我有一个Widget 'A'，用于显示Text(currentPlayerStatus)。该Widget被另一个Widget 'B'调用10次，为列表中的每个玩家显示其状态，初始时所有玩家状态相同。
在Widget 'B'中，有供用户交互的下拉框、按钮或GestureDetector。当用户选择某个玩家或点击GestureDetector时，对应该玩家的Widget 'A'需将状态从"not-set"更新为"set"。
我尝试通过传递globalKey并调用key.currentState?.setStatus(status)来触发Widget A中的setStatus方法，但key.currentState?始终返回null，导致方法无法执行。
请问如何从父Widget设置同类型指定子Widget的状态？

完整代码示例 #

主入口代码 #

import 'package:flutter/material.dart';

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

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

 @override
 State<MyApp> createState() => _MyAppState();
}

class _MyAppState extends State<MyApp> {
 @override
 Widget build(BuildContext context) {
   return MaterialApp(
     debugShowCheckedModeBanner: false,
     home: Scaffold(body: Center(child: B())),
   );
 }
}

Widget A代码 #

// Class A
class A extends StatefulWidget {
  A({super.key, required this.status, required this.player});
  String status;
  Player player;

  @override
  State<A> createState() => _AState(status);
}

class _AState extends State<A> {
  _AState(this.currentStatus);
  String currentStatus;

  void setStatus(String status) {
    currentStatus = status;
  }

  @override
  Widget build(BuildContext context) {
    return Text(currentStatus);
  }
}

Widget B与Player类代码 #

// Player model
class Player {
  String name;
  String id;

  Player({required this.name, required this.id});
}

//Class B
class B extends StatefulWidget {
  @override
  State<B> createState() => _BState();
}

class _BState extends State<B> {
  List<Player> players = [];
  List<String> statuses = [];
  String placeholder = "This One";

  @override
  void initState() {
    players = List.generate(
      10,
      (index) => Player(name: "Player $index", id: index.toString()),
    );
    statuses = List.generate(players.length, (index) => "not-set");
    super.initState();
  }

  @override
  Widget build(BuildContext context) {
    return Column(
      children:
          players.map((player) {
            return Padding(
              padding: EdgeInsets.all(8),
              child: Row(
                children: [
                  GestureDetector(
                    child: Text(player.name),
                    onTapDown: (onTap) {
                      // Set only this player status to 'set'
                      // The placeholder is only for attention.
                      setState(() {
                        placeholder = "only selected player's status should change";
                      });
                    },
                  ),

                  SizedBox(width: 20),
                  A(player: player, status: statuses[players.indexOf(player)]),
                  SizedBox(width: 20),
                  Text(placeholder),
                ],
              ),
            );
          }).toList(),
    );
  }
}

在Flutter中，不推荐直接通过GlobalKey调用子Widget的状态方法，更符合框架设计的方式是将状态统一托管在父Widget中，子Widget仅负责根据传入的数据渲染UI。针对你的场景，具体修改步骤如下：

1. 重构Widget A为无状态Widget
   既然状态由父Widget管理，Widget A不需要自己维护状态，直接使用父Widget传递的status即可：

   class A extends StatelessWidget {
     const A({super.key, required this.status, required this.player});
     final String status;
     final Player player;
   
     @override
     Widget build(BuildContext context) {
       return Text(status);
     }
   }
   

2. 在Widget B中处理状态更新逻辑
   点击玩家时，找到对应玩家在statuses列表中的索引，更新该位置的状态，然后调用setState()触发UI重建：

   // 修改B中的onTapDown回调
   onTapDown: (onTap) {
     setState(() {
       final index = players.indexOf(player);
       statuses[index] = "set";
       placeholder = "only selected player's status should change";
     });
   },
   

3. 原方法失效的原因

   • 你创建_AState时直接传入status，未关联widget.status，导致子Widget状态与父传参脱节；
   • 父Widget调用setState()重建时，子Widget可能被重新创建，导致GlobalKey关联的状态实例失效；
   • Flutter的核心设计是数据驱动UI，直接操作子Widget状态违背了这一原则。

如果后续业务复杂度提升，也可以考虑使用Provider、Riverpod等状态管理工具，但当前场景下，父Widget托管状态已足够解决问题。

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