Flutter如何回传子StatefulWidget单选按钮索引值到同页其他有状态组件

拿不到单选按钮选中值的核心原因是，记录选中状态的value变量是_MyStatefulWidgetState的内部私有属性，父组件（calculator页面、底部弹窗）没有权限直接访问子组件状态类的私有变量。另外你贴出的原始代码还有两处语法问题会直接导致编译失败：自定义单选按钮缺少child属性、底部弹窗的容器内没有布局组件包裹多个子元素。

通过值回调的方式把子组件的选中状态同步到父组件，由父组件持有选中值供计算逻辑调用，具体修改分两步：

1. 改造MyStatefulWidget组件，新增选中值变化回调 #

给组件增加一个接收选中值变更的回调参数，用户点击单选按钮更新内部状态的同时，把最新的选中索引通过回调抛给父组件：

class MyStatefulWidget extends StatefulWidget {
  // 新增回调：选中值变化时触发，入参为最新选中索引
  final ValueChanged<int> onSelectionChanged;
  const MyStatefulWidget({Key? key, required this.onSelectionChanged}) : super(key: key);
  @override
  State<MyStatefulWidget> createState() => _MyStatefulWidgetState();
}
 
class _MyStatefulWidgetState extends State<MyStatefulWidget> {
  int value = 0;
  Widget CustomRadioButton(String text, int index) {
    return OutlinedButton(
      onPressed: () {
        setState(() {
          value = index;
        });
        // 选中值更新时，通过回调同步给父组件
        widget.onSelectionChanged(value);
      },
      style: OutlinedButton.styleFrom(
        shape: RoundedRectangleBorder(borderRadius: BorderRadius.circular(5)),
        primary: Colors.white,
        backgroundColor: (value == index) ? Colors.deepOrange : Colors.white,
      ),
      // 补全原始代码缺失的文本child
      child: Text(text)
    );
  }

  @override
  Widget build(BuildContext context) {
    return Row(
      mainAxisAlignment: MainAxisAlignment.spaceEvenly,
      children: <Widget>[
        CustomRadioButton("Multiply", 1),
        CustomRadioButton("Divide", 2),
      ],
    );
  }
}

2. 改造父组件逻辑，接收子组件回传值 #

在_calculatorState中定义变量存储选中的运算类型索引，打开弹窗时重置选中状态，通过回调接收子组件回传的最新值，计算按钮直接读取该值做分支判断，同时修复原始弹窗代码的布局语法问题：

class calculator extends StatefulWidget {
  const calculator({Key? key}) : super(key: key);

  @override
  State<calculator> createState() => _calculatorState();
}

class _calculatorState extends State<calculator> {
  // 存储单选选中值，0为默认未选中状态
  int selectedOperation = 0;

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(/* 保留原有AppBar逻辑 */),
      body: Column(
        children: [
          // 保留页面原有其他组件
          ElevatedButton(
            onPressed: () {
              // 每次打开弹窗重置选中状态
              selectedOperation = 0;
              _showModalBottomSheet(context);
            }, 
            child: Text(
              'Calculate'.toUpperCase(),
              style: TextStyle(fontWeight: FontWeight.bold),
            ), 
          ),
        ],
      ),
    );
  }

  _showModalBottomSheet(context) {
    showModalBottomSheet(
      context: context,
      isScrollControlled: true,
      backgroundColor: Colors.transparent,
      builder: (BuildContext context) {
        // 用StatefulBuilder包裹弹窗内容，支持弹窗内局部状态刷新
        return StatefulBuilder(
          builder: (context, setModalState) {
            return Container(
              padding: EdgeInsets.all(16),
              decoration: BoxDecoration(
                color: Colors.white,
                borderRadius: BorderRadius.vertical(top: Radius.circular(12))
              ),
              child: Column(
                mainAxisSize: MainAxisSize.min,
                children: [
                  // 传入回调接收子组件回传的选中值
                  MyStatefulWidget(
                    onSelectionChanged: (newValue) {
                      setModalState(() {
                        selectedOperation = newValue;
                      });
                    },
                  ),
                  SizedBox(height: 20),
                  ElevatedButton(
                    onPressed: () {
                      if (selectedOperation == 1) {
                        multiply();
                        Navigator.of(context).pop();
                        Navigator.of(context).push(
                          MaterialPageRoute(builder: (context) => result())
                        );
                      } else if (selectedOperation == 2) {
                        divide();
                        Navigator.of(context).pop();
                        Navigator.of(context).push(
                          MaterialPageRoute(builder: (context) => result())
                        );
                      } else {
                        // 未选择运算类型时的提示，可按需删除
                        ScaffoldMessenger.of(context).showSnackBar(
                          SnackBar(content: Text("请先选择运算类型"))
                        );
                      }
                    }, 
                    child: Text(
                      'Calculate'.toUpperCase(),
                      style: TextStyle(fontWeight: FontWeight.bold),
                    ),
                    style: ElevatedButton.styleFrom(
                      primary: Colors.green
                    ),
                  ),
                  // 适配底部安全区
                  SizedBox(height: MediaQuery.of(context).padding.bottom)
                ],
              ),
            );
          }
        );
      }
    );
  }

  // 保留原有multiply、divide运算逻辑
  void multiply() {
    // 原有乘法计算代码
  }

  void divide() {
    // 原有除法计算代码
  }
}

• 弹窗部分必须用StatefulBuilder包裹：底部弹窗是独立的渲染节点，不用StatefulBuilder的话，弹窗内的状态更新不会触发UI重绘
• 如果后续要扩展单选选项，也可以直接把选中状态完全提升到父组件管理，子组件不再自己持有value变量，所有状态由父组件统一控制，逻辑会更易维护。

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