Flutter 如何动态更改文本字段的标签

Question

单击单选按钮后，我正在尝试更改文本字段的标签。

这是我的例子：

如果我单击私有单选按钮，则文本字段标签应更改。 如果我单击单选按钮，我会尝试更改变量。 变量的值改变但不更新标签。

这里是完整代码：

//check radio
List<bool> btn_radio = [true, false];

//field name
String? lable;

//controller
TextEditingController _controller_Name = new TextEditingController();

class DebugPage extends StatefulWidget {
  @override
  _DebugPage createState() => _DebugPage();
}

class _DebugPage extends State<DebugPage> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
        appBar: customSubAppBar("Debug", context),
        body: _body(context)); 
  }
}

//body
_body(context) {
  return Center(
    child: Column(
      mainAxisSize: MainAxisSize.max,
      children: [
        Container(height: MediaQuery.of(context).size.height * 0.3),
        BuildAppRadioButton(),
        BuildAppFieldName(),
      ],
    ),
  );
}

//radio button
class BuildAppRadioButton extends StatefulWidget {
  @override
  _BuildAppRadioButton createState() => _BuildAppRadioButton();
}

//radio button
class _BuildAppRadioButton extends State<BuildAppRadioButton> {
  @override
  Widget build(BuildContext context) {
    return Row(
      children: [
        //spacer
        Spacer(),

        //radio button
        Container(
          width: MediaQuery.of(context).size.width * 0.37,
          child: CustomRadioButtonRegister(
            isPressed: btn_radio[0],
            label: 'Private',
            padding: const EdgeInsets.symmetric(horizontal: 5.0),
            value: true,
            groupValue: btn_radio[0],
            onChanged: (bool newValue) {
              setState(() {
                btn_radio[0] = true;
                btn_radio[1] = false;

                lable = 'label';
              });
            },
          ),
        ),

        //spacer
        Spacer(),

        //radion button
        Container(
          width: MediaQuery.of(context).size.width * 0.37,
          child: CustomRadioButtonRegister(
            isPressed: btn_radio[1],
            label: "Company",
            padding: const EdgeInsets.symmetric(horizontal: 5.0),
            value: true,
            groupValue: btn_radio[1],
            onChanged: (bool newValue) {
              setState(() {
                btn_radio[1] = true;
                btn_radio[0] = false;
              });
            },
          ),
        ),

        //spacer
        Spacer(),
      ],
    );
  }
}

//name
class BuildAppFieldName extends StatefulWidget {
  @override
  _BuildAppFieldName createState() => _BuildAppFieldName();
}

//name
class _BuildAppFieldName extends State<BuildAppFieldName> {
  @override
  Widget build(BuildContext context) {
    return Container(
      width: MediaQuery.of(context).size.width * 0.8,
      height: MediaQuery.of(context).size.height * 0.09,
      child: TextFormField(
        //controller: _controller_companyName,
        style: TextStyle(
          color: Colors.black,
        ),
        decoration: InputDecoration(
          labelText: lable,
          labelStyle: TextStyle(
            color: Colors.black,
          ),
          enabledBorder: UnderlineInputBorder(
            borderSide: BorderSide(
              color: Colors.black,
            ),
          ),
        ),
        onChanged: (value) {},
      ),
    );
  }
}

任何人都知道我该怎么做。 非常感谢（：

Answer 1

如果没有完整的代码，我假设 BuildAppRadioButton 和 BuildAppFieldName 是更高层 Column() 或类似容器小部件中的兄弟姐妹。

您需要 RadioButton 小部件与 FieldName 小部件通信的方法。最简单的方法是使用回调通过父小部件状态。

在父状态小部件中，创建一个 String 变量来保存您的标签 String _textFieldLabel 和一个回调：

_onRadioButtonChange(String label) {
  setState(() {
    _textFieldLabel=label;
  });
}

将此回调作为Function onChanged; 传递给BuildAppRadioButton() - 即onChanged: _onRadioButtonChange,。将 _textFieldLabel 传递给 BuildAppFieldName()。

在您的 BuildAppRadioButton()->CustomRadioButtonRegister()->onChanged() 中使用正确的标签调用该回调：

onChanged: (bool newValue) {
  setState(() {
    btn_radio[1] = true;
    btn_radio[0] = false;
  });
  widget.onChanged("Label_for_field");
},