首页 > 解决方案 > Flutter单选按钮文本“kg”对齐问题?

问题描述

图片链接

正如您在上图中看到的“kg”文字有很大的差距。但高度 text field小部件是完美的。它显示以下错误。

小部件库捕获的异常

ParentDataWidget 的使用不正确。

请让我知道有什么问题

(我是新来的颤振)

      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"),
                      ),),
                    ],
                  ),
                ),
              ],
            ),
          ),
        ),
      ),
    ),

标签: flutterdarttextradio-buttonrow

解决方案


去掉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"),
                          ),),
                        ],
                      ),
                    ),
                  ],
                ),

输出

在此处输入图像描述


推荐阅读