Flutter如何通过mainWidget点击修改connectedStatusText的状态

问题原因 #

你之前的方案失效主要有两个原因：

1. 定义了GlobalKey但没有绑定到实际渲染的connectedStatusText组件实例上，导致key.currentState为null，赋值操作根本不生效
2. 直接修改State类的内部变量status没有触发setState，connectedStatus组件不会触发重绘，界面自然不会更新

实现方案 #

方案1：正确使用GlobalKey（适合简单场景）

1. 首先在共同父组件MyHomePageState中定义GlobalKey，并绑定到connectedStatusText实例：

class MyHomePageState extends State<MyHomePage> {
  // 定义key
  final GlobalKey<connectedStatus> connectedKey = GlobalKey<connectedStatus>();

  @override
  Widget build(BuildContext context) {
    double screenWidth = MediaQuery.of(context).size.width;
    return Scaffold(
        backgroundColor: bgColor,
        body: ListView(
          children: <Widget>[
            Stack(
              alignment: Alignment.topCenter,
              children: <Widget>[
                // 把key传给mainWidget方便调用
                mainWidget(connectedKey: connectedKey),
              ],
            ),
            // 绑定key到组件实例
            connectedStatusText(key: connectedKey),
          ],
        ));
  }
}

2. 在connectedStatus类中新增公开的状态修改方法，内部触发setState：

class connectedStatus extends State<connectedStatusText> {
  String status = "IDLE";

  // 新增公开方法修改状态
  void updateStatus(String newStatus) {
    setState(() {
      status = newStatus;
    });
  }

  @override
  Widget build(BuildContext context) {
    return Align(
      alignment: Alignment.center,
          child: RichText(
            textAlign: TextAlign.center,
            text: TextSpan(text: 'Status:', style: connectedStyle, children: [
              TextSpan(text: status, style: disconnectedRed)
            ]),
          ),
    );
  }
}

3. 在mainWidget中接收key，点击时调用更新方法：

class mainWidget extends StatefulWidget {
  final GlobalKey<connectedStatus> connectedKey;
  const mainWidget({super.key, required this.connectedKey});

  MyED createState() => new MyED();
}


class MyED extends State<mainWidget> {
  @override
  Widget build(BuildContext context) {
    return GestureDetector(
      onTap: () {
        // 调用方法更新状态
        widget.connectedKey.currentState?.updateStatus("CONNECTED");
      },
      // 剩余布局代码
    );
  }
}

方案2：状态提升（更符合Flutter设计规范，推荐）

将共享状态status放到共同父组件MyHomePageState中管理，通过回调修改状态，通过参数向下传递给子组件：

1. 父组件中管理状态，传递参数和回调：

class MyHomePageState extends State<MyHomePage> {
  // 管理共享状态
  String _currentStatus = "IDLE";

  // 修改状态的方法
  void _updateStatus(String newStatus) {
    setState(() {
      _currentStatus = newStatus;
    });
  }

  @override
  Widget build(BuildContext context) {
    double screenWidth = MediaQuery.of(context).size.width;
    return Scaffold(
        backgroundColor: bgColor,
        body: ListView(
          children: <Widget>[
            Stack(
              alignment: Alignment.topCenter,
              children: <Widget>[
                // 传递点击回调给mainWidget
                mainWidget(onStatusTap: () => _updateStatus("CONNECTED")),
              ],
            ),
            // 传递当前状态给文本组件
            connectedStatusText(status: _currentStatus),
          ],
        ));
  }
}

2. 修改connectedStatusText接收状态参数：

// 可以直接改成无状态组件，不需要自己管理状态
class connectedStatusText extends StatelessWidget {
  final String status;
  const connectedStatusText({super.key, required this.status});

  @override
  Widget build(BuildContext context) {
    return Align(
      alignment: Alignment.center,
          child: RichText(
            textAlign: TextAlign.center,
            text: TextSpan(text: 'Status:', style: connectedStyle, children: [
              TextSpan(text: status, style: disconnectedRed)
            ]),
          ),
    );
  }
}

3. 修改mainWidget接收回调：

class mainWidget extends StatefulWidget {
  final VoidCallback onStatusTap;
  const mainWidget({super.key, required this.onStatusTap});

  MyED createState() => new MyED();
}


class MyED extends State<mainWidget> {
  @override
  Widget build(BuildContext context) {
    return GestureDetector(
      onTap: widget.onStatusTap,
      // 剩余布局代码
    );
  }
}

内容的提问来源于stack exchange，提问作者Cassiano José