Flutter 如何在行中添加文本字段和单选按钮？答案

【问题标题】：Flutter How do add Text Field and Radio button in row?Flutter 如何在行中添加文本字段和单选按钮？
【发布时间】：2021-11-12 12:30:00
【问题描述】：

Row(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            Material(
              elevation: 30.0,
              shadowColor: Colors.grey,
              child: SizedBox(  
                width: 300,
                child: TextField(
                  controller: heightcon,
                  style: TextStyle(
                    color: Colors.black,
                    fontSize: 30,
                  ),
                  decoration: InputDecoration(
                    border: OutlineInputBorder(),
                    hintText: 'Height',

                    focusedBorder: OutlineInputBorder(
                      borderRadius: BorderRadius.circular(0.0),
                      borderSide: BorderSide(
                        color: Colors.black,
                        width: 2.0,
                      ),
                    ),
                   
                    enabledBorder: OutlineInputBorder(
                      borderRadius: BorderRadius.circular(0.0),
                      borderSide: BorderSide(
                       
                        color: Colors.black54,
                        width: 2.0,
                      ),
                    ),
                  ),
                  onChanged: (heightval) {
                    print('First text field: $heightval');
                    globals.heightvalue = double.parse(heightval);
                  },
                ),
              ),
            ),
            Column(
              mainAxisAlignment: MainAxisAlignment.center,
            
              children: <Widget>[
                Flexible(
                  child: SizedBox(
                      child: Radio(
                    value: 1,
                    groupValue: 1,
                    onChanged: (value) {},
                  )),
                ),
               
                SizedBox(
                  width: 10,
                ),
                
                SizedBox(
                    child: Flexible(
                  child: Text("Radio 1"),
                )),
                Flexible(
                  child: SizedBox(
                      child: Radio(
                    value: 1,
                    groupValue: 1,
                    onChanged: (value) {},
                  )),
                ),
                
                SizedBox(
                  width: 10,
                ),
                
                SizedBox(
                    child: Flexible(
                  child: Text("Radio 1"),
                ))

               
              ],
            ),
          ],
        ),

错误显示如下：

════════ 渲染库捕获的异常═══════════════════════════════ RenderBox 未布置：RenderFlex#c7c48 relayoutBoundary=up1 NEEDS-PAINT NEEDS-COMPOSITING-BITS-UPDATE 'package:flutter/src/rendering/box.dart': 断言失败：第 1930 行第 12 行：'hasSize'

相关的导致错误的小部件是脚手架 lib\main.dart:25 ══════════════════════════════════════════════════ ══════════════════════════════

【问题讨论】：

请向我们展示您的代码！错误来自错误消息所说的内容，您的行不知道它应该有多大！您可以将其放在 SizedBox 中并以像素为单位指定大小，或者您可以查看用 Expanded 小部件围绕您的 Row 是否有帮助
我只是编辑这个问题描述添加我的代码。
谢谢你 h8moss 我已经通过你的友好回答解决了我的问题
很高兴你解决了它！

标签： flutter visual-studio-code radio-button row textfield

【解决方案1】：

您可以查看图片和代码以供参考。您可以使用文本字段而不是文本。是的，当你使用文本字段时，用 Expanded 包装它。

Row(
        children: [
          const Text('Gender:  '),
          Radio(
            value: 0,
            groupValue: _radioVal,
            onChanged: (int? value) {
              if (value != null) {
                setState(() {
                  _radioVal = value;
                });
              }
            },
          ),
          const Text('Male '),
          Radio(
            value: 1,
            groupValue: _radioVal,
            onChanged: (int? value) {
              if (value != null) {
                setState(() {
                  _radioVal = value;
                });
              }
            },
          ),
          const Text('Female '),
        ],
      ),

【讨论】：

【解决方案2】：

  Container(
                    margin: EdgeInsets.symmetric(horizontal: 20),
                    width: MediaQuery.of(context).size.width / 2,
                    child: Row(
                      mainAxisAlignment: MainAxisAlignment.spaceEvenly,
                      children: [
                        Text("gender"),
                        Radio(
                            value: "male",
                            groupValue: 1,
                            onChanged: (onChanged) {})
                      ],
                    ),

【讨论】：

虽然这段代码可以解决问题，包括解释如何以及为什么解决问题将真正有助于提高您的帖子质量，并可能导致更多的赞成票。请记住，您正在为将来的读者回答问题，而不仅仅是现在提出问题的人。请edit你的答案添加解释。