Flutter：如何在父组件中修改子组件TrackingElementState的属性？

要在_DetailPageState的function()方法中修改TrackingElementState的_counter和progress，最简单的方式是使用GlobalKey获取子组件的State实例，再通过调用State内部的方法来更新状态（避免直接操作State的私有属性，符合Flutter状态管理原则）。

具体步骤： #

1. 在_DetailPageState中定义GlobalKey列表，对应每个TrackingElement组件
2. 给每个TrackingElement分配对应的GlobalKey
3. 在TrackingElementState中添加一个用于重置状态的方法
4. 在function()中通过GlobalKey调用重置方法

修改后的关键代码： #

1. 更新_DetailPageState类

class _DetailPageState extends State<DetailPage> {
  // 定义GlobalKey列表，对应三个TrackingElement
  final List<GlobalKey<TrackingElementState>> trackingKeys = [
    GlobalKey(),
    GlobalKey(),
    GlobalKey(),
  ];

  @override
  Widget build(BuildContext context) {
    return Padding(
        padding: const EdgeInsetsDirectional.fromSTEB(32, 50, 32, 32),
        child: ListView(
          children: [
            Column(children: [
              Text(widget.headline, style: const TextStyle(fontSize:30, color: Colors.white)),
              // 给每个TrackingElement分配对应的key
              TrackingElement(
                key: trackingKeys[0],
                color: Colors.yellow, 
                text: "m", 
                icon: Icons.directions_run, 
                max: 5000, 
                headline: widget.headline
              ),
              TrackingElement(
                key: trackingKeys[1],
                color: Colors.blue, 
                text: "l", 
                icon: Icons.local_drink, 
                max: 3000, 
                headline: widget.headline
              ),
              TrackingElement(
                key: trackingKeys[2],
                color: Colors.red, 
                text: "kcal", 
                icon: Icons.fastfood, 
                max: 2500, 
                headline: widget.headline
              ),
              Padding(
                padding: const EdgeInsetsDirectional.fromSTEB(0, 30, 0, 0),
                child: ElevatedButton(
                  style:  ButtonStyle(
                    backgroundColor:
                        MaterialStateProperty.all<Color>(const Color.fromARGB(255, 0, 0, 0)),
                    foregroundColor:
                        MaterialStateProperty.all<Color>(const Color.fromARGB(255, 255, 255, 255))
                  ),
                  onPressed: () => function(widget.headline),
                  child: const Text('Löschen'),
                )),
            ],)
          ]));
  }

  function(String headline){
    // 遍历所有TrackingElement的key，调用重置方法
    for (var key in trackingKeys) {
      key.currentState?.resetCounter();
    }
  }
}

2. 在TrackingElementState中添加重置方法

class TrackingElementState extends State<TrackingElement> {
  int _counter = 0;
  double progress = 0;
  var now = DateTime.now();
  String _storageKey = "";
  String headline = "";

  // 新增重置方法，内部更新状态并同步到SharedPreferences
  void resetCounter() async {
    setState(() {
      _counter = 0;
      progress = 0;
    });
    (await prefs).setInt(_storageKey, 0);
  }

  void _incrementCounter()async{
    setState(() {
      _counter+=200;
      progress = _counter/widget.max;
    });
    (await prefs).setInt(_storageKey, _counter);
  }

  // 其余原有代码保持不变...
}

说明： #

• 使用GlobalKey可以安全地获取子组件的State实例，这是Flutter中父组件与子组件State交互的常用方式
• 让TrackingElementState自己维护状态更新逻辑（比如resetCounter方法），符合封装原则，避免外部直接修改私有属性
• 重置时同步更新SharedPreferences，确保数据一致性

内容的提问来源于stack exchange，提问作者Hans Müller