Flutter：如何跨Widget树分支通过按钮修改组件状态？

首先咱们梳理下你的问题核心：你有MemberSection和AdminSection两个兄弟组件，同属HomePage之下，想要点击AdminSection里的按钮，同时更新自身和MemberSection的文本内容。但原来的代码里，count是HomePage里的不可变常量，子组件只能接收不能修改，直接改widget.count自然行不通。

你提到觉得“在HomePage里实现方法再传递不可行”，其实这是Flutter里状态提升的标准解决方案，完全适配你的场景——两个子组件共享的状态（也就是count），最合适存放在它们的共同父组件HomePage里，通过回调函数让子组件触发父组件的状态更新，再把新状态传递给所有依赖的子组件即可。

下面是修改后的完整代码，我标注了关键改动点：

import 'package:flutter/material.dart';

void main() {
  runApp(
    MaterialApp(
      home: HomePage(),
    ),
  );
}

// 将HomePage改为StatefulWidget，用来管理共享的count状态
class HomePage extends StatefulWidget {
  @override
  _HomePageState createState() => _HomePageState();
}

class _HomePageState extends State<HomePage> {
  // 把count移到父组件的state中，变为可修改的状态
  int count = 0;

  // 实现增减逻辑，触发父组件setState以更新所有依赖count的子组件
  void incrementer() {
    setState(() {
      count++;
    });
  }

  void decrementer() {
    setState(() {
      count--;
    });
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Column(
        mainAxisAlignment: MainAxisAlignment.center,
        crossAxisAlignment: CrossAxisAlignment.center,
        children: <Widget>[
          // 向子组件传递当前的count值
          MemberSection(count: count),
          // 向AdminSection传递count值和回调方法
          AdminSection(
            count: count,
            onIncrement: incrementer,
            onDecrement: decrementer,
          ),
        ],
      ),
    );
  }
}

// MemberSection改为StatelessWidget，仅负责展示父组件传来的count
class MemberSection extends StatelessWidget {
  final int count;

  const MemberSection({Key? key, required this.count}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Text('${count} member(s)');
  }
}

// AdminSection改为StatelessWidget，接收count和回调，点击按钮时触发父组件的状态更新
class AdminSection extends StatelessWidget {
  final int count;
  final VoidCallback onIncrement;
  final VoidCallback onDecrement;

  const AdminSection({
    Key? key,
    required this.count,
    required this.onIncrement,
    required this.onDecrement,
  }) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Column(
      children: <Widget>[
        Text('${count} admin(s)'),
        ButtonBar(
          children: <Widget>[
            RaisedButton(
              child: Text('add a member'),
              onPressed: onIncrement, // 触发父组件的incrementer方法
            ),
            RaisedButton(
              child: Text('delete a member'),
              onPressed: onDecrement, // 触发父组件的decrementer方法
            ),
          ],
        ),
      ],
    );
  }
}

关键改动说明： #

1. 状态提升：把原本不可变的count从HomePage的Stateless常量，移到Stateful的_HomePageState中，变为可修改的状态。
2. 回调传递：给AdminSection传递onIncrement和onDecrement两个回调函数，点击按钮时触发父组件的setState，更新count值。
3. 子组件简化：两个子组件都改为Stateless（如果后续需要自身状态也可以保留Stateful，但当前场景不需要），只负责接收父组件传来的count和回调，专注于展示和触发事件。

这样修改后，点击AdminSection里的按钮，父组件的count会更新，MemberSection和AdminSection都会收到新的count值，从而同步更新文本内容，完美解决你的需求。

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