Flutter中如何将变量作为参数传给第二个Widget修改后返回值给第一个Widget

问题根因 #

你的当前实现无法生效的核心原因有两个：

• SecondWidget中修改的widget.variable只是FirstWidget传递过来的值的临时拷贝，修改该值不会影响FirstWidget中存储的源变量
• FirstWidget没有监听该值的变化，即便值发生改动也不会触发重新build刷新界面展示

正确实现方案 #

通过回调函数实现子组件向父组件回传修改后的值，父组件接收值后调用setState更新自身状态触发刷新，完整代码如下：

import 'package:flutter/material.dart';

class FirstWidget extends StatefulWidget {
  @override
  _FirstWidgetState createState() => _FirstWidgetState();
}

class _FirstWidgetState extends State<FirstWidget> {
  String c = 'start';

  @override
  Widget build(BuildContext context) {
    return Column(
      children: [
        // 增加文本组件直观展示变量变化效果
        Text('当前值：$c'),
        SecondWidget(
          variable: c,
          onVariableChanged: (newValue) {
            // 接收子组件回传的新值，调用setState更新本地状态
            setState(() {
              c = newValue;
            });
          },
        ),
      ],
    );
  }
}

class SecondWidget extends StatefulWidget {
  final String variable;
  // 新增回调参数，用于向父组件回传修改后的字符串值
  final ValueChanged<String> onVariableChanged;

  const SecondWidget({
    Key? key,
    required this.variable,
    required this.onVariableChanged,
  }) : super(key: key);

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

class _SecondWidgetState extends State<SecondWidget> {
  @override
  Widget build(BuildContext context) {
    return Container(
      // 若使用旧版本Flutter可将ElevatedButton替换为你原本的RaisedButton
      child: ElevatedButton(
        child: const Text('Change it'),
        onPressed: () {
          // 不直接修改widget属性，通过回调把新值传给父组件处理
          widget.onVariableChanged('end');
        },
      ),
    );
  }
}

修改要点说明 #

• 给SecondWidget新增ValueChanged<String>类型的回调参数，专门用来向父组件传递修改后的值
• 父组件FirstWidget传入回调函数，在回调中调用setState更新自身存储的源变量，触发UI重新渲染
• 子组件点击按钮时直接调用回调方法传入新值即可，不需要修改自身的widget属性

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