flutter - 使用 radio 从 child 更新 parent 表格

Question

我正在开发一个包含11个多项选择题的表格。
香港专业教育学院创建了一个有状态的小部件，它接收问题并与3个单选按钮一起显示如下。
每个问题都需要更新父窗口小部件中定义的模型中的不同属性。
例如:

RadioQuestionWidget("What colour is the sky?", model.ColourOfSky),
RadioQuestionWidget("What colour is the grass?", model.ColourOfGrass)

以下是我的RadioQuestionWidget

import 'package:flutter/material.dart';

class RadioQuestionWidget extends StatefulWidget {
  RadioQuestionWidget({Key key, this.question}) : super(key: key);
  final String question;

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

class _RadioQuestionWidgetState extends State<RadioQuestionWidget> {
  String question;
  var _radioValue;

  @override
  void initState() {
    super.initState();
    question = widget.question;
  }

  @override
  Widget build(BuildContext context) {
    return Container(
      child: Column(
        mainAxisAlignment: MainAxisAlignment.center,
        children: <Widget>[
          new Text(
            question,
            style: new TextStyle(
                fontSize: 16.0,
                color: Colors.black,
                fontWeight: FontWeight.bold),
          ),
          Padding(
            padding: const EdgeInsets.all(8.0),
            child: Row(
              children: <Widget>[
                Radio(
                  value: "Yes",
                  groupValue: _radioValue,
                  onChanged: (val) {
                    setState(() {
                      _radioValue = val;
                    });
                  },
                  activeColor: Colors.green,
                  focusColor: Colors.black,
                ),
                new Text(
                  'Yes',
                  style: new TextStyle(fontSize: 16.0, color: Colors.black),
                ),
                Radio(
                  value: "No",
                  groupValue: _radioValue,
                  onChanged: (val) {
                    setState(() {
                      _radioValue = val;
                    });
                  },
                  activeColor: Colors.green,
                  focusColor: Colors.black,
                ),
                new Text(
                  'No',
                  style: new TextStyle(fontSize: 16.0, color: Colors.black),
                ),
                Radio(
                  value: "Three",
                  groupValue: _radioValue,
                  onChanged: (val) {
                    setState(() {
                      _radioValue = val;
                    });
                  },
                  activeColor: Colors.red,
                  focusColor: Colors.black,
                ),
                new Text(
                  'Not applicable',
                  style: new TextStyle(fontSize: 16.0, color: Colors.black),
                ),
              ],
            ),
          ),
        ],
      ),
    );
  }
}

Answer 1

首先，在父窗口小部件中定义一个带有必需参数(即您的问题编号和答案)的函数。

void _updateProperty(int que_num, String ans) {
    //update property according to your question number and ans
}

现在，将您的函数作为Constructor参数传递给子控件。

RadioQuestionWidget(question : "What colour is the sky?", updatePropertyHandler : _updateProperty)

如下所示在子小部件中接收您的功能。

class RadioQuestionWidget extends StatefulWidget {
  RadioQuestionWidget({Key key, this.question, this.updatePropertyHandler}) : super(key: key);
  final String question;
  final Function updatePropertyHandler;

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

现在，在回答问题时，在您的子小部件中，根据需要调用_updateUi函数。

Radio(
      value: "Yes",
      groupValue: _radioValue,
      onChanged: (val) {
            setState(() {
                _radioValue = val;
                //here questionNum is int value you need to handle question no
                widget.updatePropertyHandler(questionNum, _radioValue);
            });
      },
         activeColor: Colors.green,
         focusColor: Colors.black,
     )