Flutter单选按钮文本“kg”对齐问题？答案

【问题标题】：Flutter Radio button text "kg" align problem?Flutter单选按钮文本“kg”对齐问题？
【发布时间】：2021-09-19 20:22:33
【问题描述】：

如上图所示“kg”文字有很大的间隙。但是 height text field 小部件是完美的。它显示以下错误。

小部件库捕获的异常

ParentDataWidget 使用不正确。

请告诉我是什么问题

（我是 Flutter 新手）

      Material(
      elevation: 30.0,
      shadowColor: Colors.grey,
      child: Container(
        height: 100,
        width: 375,
        decoration: BoxDecoration(
          border: Border.all(
            color: Colors.blue,
          ),           
        ),
        alignment: Alignment.topCenter,
        child: SizedBox(
          height: 300,
          width: 500,
          child: Expanded(
            child: Row(
              mainAxisAlignment: MainAxisAlignment.center,
              children: [
                SizedBox(
                  width: 300,
                  child: SingleChildScrollView(
                    child: TextField(                         
                      controller: weightcon,
                      style: TextStyle(
                        color: Colors.black,
                        fontSize: 30,
                      ),
                      decoration: InputDecoration(
                        border: OutlineInputBorder(),
                        hintText: 'Weight',
                        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.redAccent[100],
                            color: Colors.black54,
                            width: 2.0,
                          ),
                        ),
                      ),
                      onChanged: (weightval) {
                        print('First text field: $weightval');
                        globals.weightvalue = 
                       double.parse(weightval);
                      },
                    ),
                  ),
                ),
                SizedBox(
                  width: 5,
                ),
                Container(
                  height: 130,
                  width: 30,
                  child: Column(
                    mainAxisAlignment: MainAxisAlignment.center,
                    children: <Widget>[
                      SizedBox(
                          width: 30,
                          height: 50,
                          child: Flexible(
                            child: SizedBox(
                                child: Radio(
                              value: 0,
                              groupValue: 1,
                              onChanged: (value) {},
                            )),
                          )),
                      SizedBox(
                        width: 30,
                      ),
                      SizedBox(
                          child: Flexible(
                        child: Text("KG"),
                      ),),
                      Flexible(
                        child: SizedBox(
                            width: 30,
                            height: 25,
                            child: Radio(
                              value: 1,
                              groupValue: 1,
                              onChanged: (value) {},
                            )),
                      ),
                      SizedBox(
                        width: 30,
                      ),
                      SizedBox(
                          child: Flexible(
                        child: Text("LB"),
                      ),),
                    ],
                  ),
                ),
              ],
            ),
          ),
        ),
      ),
    ),

【问题讨论】：

你能包含Material的父小部件吗？

标签： flutter dart text radio-button row

【解决方案1】：

去掉radioButton的sizedbox高度，高度占用多余空间

Column(
                        mainAxisAlignment: MainAxisAlignment.center,
                        children: <Widget>[
                          SizedBox(
                              width: 30,
                              child: Flexible(
                                child: SizedBox(
                                    child: Radio(
                                  value: 0,
                                  groupValue: 1,
                                  onChanged: (value) {},
                                )),
                              )),
                          SizedBox(
                            width: 30,
                          ),
                          SizedBox(
                              child: Flexible(
                            child: Text("KG"),
                          ),),
                          Flexible(
                            child: SizedBox(
                                width: 30,
                                child: Radio(
                                  value: 1,
                                  groupValue: 1,
                                  onChanged: (value) {},
                                )),
                          ),
                          SizedBox(
                            width: 30,
                          ),
                          SizedBox(
                              child: Flexible(
                            child: Text("LB"),
                          ),),
                        ],
                      ),
                    ),
                  ],
                ),

输出

【讨论】：

必须用行换行
很可能不需要
感谢您的回答，那么如何在没有 Row 小部件的文本字段中水平添加单选小部件？
列内绑定单选按钮和文本与行

【解决方案2】：

您以错误的方式使用了Expanded 小部件！它必须是 Flex 小部件 (Row, Column, ListView, GridView, Wrap,...) 的子级。如您所见，您写道：

Expanded(
child: Row( // this is where the error pointing at
),
),

因此，要修复它，请移除 Expanded 小部件并将其用作 Row 小部件内的小部件的父级。这是一个例子：

Row(
children: [
  Expanded( // Expanded Widget inside children parameter of Row Widget
child: Widget1(),
),
Expanded(
child: Widget2(),
),
],
),

【讨论】：