Flutter：如何在表单内的“行”内对齐两个元素？答案

【问题标题】：Flutter: how to align two elements inside a "row" inside a form?Flutter：如何在表单内的“行”内对齐两个元素？
【发布时间】：2020-07-21 21:12:19
【问题描述】：

我正在用 Flutter 开发一个应用程序。为用户创建一个注册表单。我希望两个元素在基线级别对齐的同一行中，如下所示：

但在我的应用中它看起来像这样：

这是我的特定行的代码：

                            Row(
                                  mainAxisAlignment: MainAxisAlignment.end,
                                  verticalDirection: VerticalDirection.down,
                                  crossAxisAlignment: CrossAxisAlignment.end,
                                  children: <Widget>[
                                    DropdownButton(
                                      hint: Text('Cod.'),
                                      items: codeList,
                                      value: selectedcode,
                                      onChanged: (value) {
                                        setState(() {
                                          selectedcode = value;
                                        });
                                      },
                                      style: TextStyle(
                                          color: Colors.grey[600],
                                          fontSize: scalador.setSp(22) * 2.63),
                                    ),
                                    SizedBox(
                                      width: scalador.setWidth(275) * 2.41,
                                      child: TextFormField(
                                          onChanged: (val) {
                                            setState(() {
                                              telefono = val;
                                            });
                                          },
                                          decoration: InputDecoration(
                                              hintText: "Telefono"),
                                          keyboardType: TextInputType.phone,
                                          style: TextStyle(
                                              color: Colors.grey[600],
                                              fontSize:
                                                  scalador.setSp(22) * 2.63),
                                          validator: (value) {
                                            if (value.isEmpty) {
                                              return 'Por favor ingrese su telefono';
                                            } else {
                                              if (value.length < 8)
                                                return 'El numero de telefono debe tener mas de 8 digitos';
                                            }
                                            return null;
                                          }),
                                    ),
                                  ],
                                ),

我该如何解决这个问题？

编辑：

按照下面的一些答案中的建议，实现这种将 Dropdownbutton 添加到 textformfield 的方式

TextFormField(
                                    onChanged: (val) {
                                      setState(() {
                                        telefono = val;
                                      });
                                    },
                                    decoration: InputDecoration(
                                        hintText: "Telefono",
                                        prefix: DropdownButton(
                                          hint: Text('Cod.'),
                                          items: codeList,
                                          value: selectedcode,
                                          onChanged: (value) {
                                            setState(() {
                                              selectedcode = value;
                                            });
                                          },
                                          style: TextStyle(
                                              color: Colors.grey[600],
                                              fontSize:
                                                  scalador.setSp(22) * 2.63),
                                        )),
                                    keyboardType: TextInputType.phone,
                                    style: TextStyle(
                                        color: Colors.grey[600],
                                        fontSize: scalador.setSp(22) * 2.63),
                                    validator: (value) {
                                      if (value.isEmpty) {
                                        return 'Por favor ingrese su telefono';
                                      } else {
                                        if (value.length < 8)
                                          return 'El numero de telefono debe tener mas de 8 digitos';
                                      }
                                      return null;
                                    })

但是现在它看起来像这样，当你渲染界面时

DropdownButton 在界面中不可见，但它确实占用了您的空间。 De esta manera;

【问题讨论】：

标签： flutter flutter-layout

【解决方案1】：

您可以通过 Expanded 捕获 TextField。或者通过 Container 并将宽度设置为屏幕宽度的 80/90% 并为按钮执行此操作，但对于按钮设置宽度为屏幕宽度的 10/20%。

【讨论】：

【解决方案2】：

TextForField 为您提供功能时为什么要使用一行

TextFormField(
                decoration: InputDecoration(
                  prefix: //implement the drop down here
                ),
              )

【讨论】：

我实现了它，但现在的细节是，当我渲染选择时，它看起来不可见，我必须触摸它才能显示它。看问题的版本