TextFormField 输入文本溢出与 DropdownButtonFormField, Flutter答案

【问题标题】：TextFormField input text overflow with DropdownButtonFormField, FlutterTextFormField 输入文本溢出与 DropdownButtonFormField, Flutter
【发布时间】：2022-01-22 03:17:28
【问题描述】：

我有布局问题，因为您选择的下拉菜单中的文本无法放入 TextFormField 中，而且我似乎无法解决此问题。我已经尝试添加 overflow: TextOverflow.ellipsis 属性，但这只会更改下拉标签，当我选择一个时，它们仍然无法放入 TextFormField。

当你按下下拉按钮时，它显示如下：

并使用 TextOverflow.elipsis 属性：

这很好，但我仍然有布局问题，因为选择的文本现在显示在 textformfield 中：

如何将相同的属性添加到 TextFormField 或任何解决此问题的方法？代码：

Row(
                                    children: [
                                      Expanded(
                                        child: DropdownButtonFormField<String>(
                                          decoration:
                                              kTextFieldDecoration.copyWith(
                                            hintText: 'Legal status',
                                            labelText: 'Legal status',
                                          ),
                                          value: _legalStatus,
                                          items: [
                                            'Sole proprietorship',
                                            'Partnerships',
                                            'Limited Liability Company (LLC)',
                                            'Corporation',
                                            'Small Business Corporation (S-Corporation)'
                                          ]
                                              .map((label) => DropdownMenuItem(
                                                    child: Text(
                                                      label.toString(),
                                                    ),
                                                    value: label,
                                                  ))
                                              .toList(),
                                          onChanged: (value) {
                                            setState(() {
                                              _legalStatus = value;
                                              print(value);
                                            });
                                          },
                                          validator: (thisValue) {
                                            if (thisValue == null) {
                                              return 'Please choose your legal status';
                                            }
                                            return null;
                                          },
                                        ),
                                      ),
                                      SizedBox(
                                        width: 16.0,
                                      ),
                                      Container(
                                        width: 120.0,
                                        child: DropdownButtonFormField<String>(
                                          decoration:
                                              kTextFieldDecoration.copyWith(
                                            hintText: 'Year established',
                                            labelText: 'Year established',
                                          ),
                                          value: _yearEstablished,
                                          items: items // a list of numbers that are Strings
                                              .map((label) => DropdownMenuItem(
                                                    child:
                                                        Text(label.toString()),
                                                    value: label,
                                                  ))
                                              .toList(),
                                          onChanged: (value) {
                                            setState(() {
                                              _yearEstablished = value;
                                              print(value);
                                            });
                                          },
                                          validator: (thisValue) {
                                            if (thisValue == null) {
                                              return 'Please choose your company year of establishment';
                                            }
                                            return null;
                                          },
                                        ),
                                      ),
                                    ],
                                  ),

提前感谢您的帮助！

【问题讨论】：

标签： flutter mobile flutter-layout flutter-textformfield

【解决方案1】：

您需要使用selectedItemBuilder 参数来控制所选项目在按钮上的显示方式。然后，TextOverflow.ellipsis 将按预期与您合作。使用方法如下：

selectedItemBuilder: (BuildContext context) {
      return items.map<Widget>((String item) {
        return Text(item, overflow: TextOverflow.ellipsis,);
      }).toList();
    },

【讨论】：

【解决方案2】：

您需要使用 DropDownFormField 的 isExpanded 属性来解决此错误。

Row(
                                    children: [
                                      Expanded(
                                        child: DropdownButtonFormField<String>(
                                          isExpanded: true,
                                          decoration:
                                              kTextFieldDecoration.copyWith(
                                            hintText: 'Legal status',
                                            labelText: 'Legal status',
                                          ),
                                          value: _legalStatus,
                                          items: [
                                            'Sole proprietorship',
                                            'Partnerships',
                                            'Limited Liability Company (LLC)',
                                            'Corporation',
                                            'Small Business Corporation (S-Corporation)'
                                          ]
                                              .map((label) => DropdownMenuItem(
                                                    child: Text(
                                                      label.toString(),
                                                    ),
                                                    value: label,
                                                  ))
                                              .toList(),
                                          onChanged: (value) {
                                            setState(() {
                                              _legalStatus = value;
                                              print(value);
                                            });
                                          },
                                          validator: (thisValue) {
                                            if (thisValue == null) {
                                              return 'Please choose your legal status';
                                            }
                                            return null;
                                          },
                                        ),
                                      ),
                                      SizedBox(
                                        width: 16.0,
                                      ),
                                      Container(
                                        width: 120.0,
                                        child: DropdownButtonFormField<String>(
                                          decoration:
                                              kTextFieldDecoration.copyWith(
                                            hintText: 'Year established',
                                            labelText: 'Year established',
                                          ),
                                          value: _yearEstablished,
                                          items: items // a list of numbers that are Strings
                                              .map((label) => DropdownMenuItem(
                                                    child:
                                                        Text(label.toString()),
                                                    value: label,
                                                  ))
                                              .toList(),
                                          onChanged: (value) {
                                            setState(() {
                                              _yearEstablished = value;
                                              print(value);
                                            });
                                          },
                                          validator: (thisValue) {
                                            if (thisValue == null) {
                                              return 'Please choose your company year of establishment';
                                            }
                                            return null;
                                          },
                                        ),
                                      ),
                                    ],
                                  ),

【讨论】：

是的，这解决了布局问题。是否有可能实施类似TextOverflow.ellipsis 的解决方案？我只是认为拥有Limited Liability ... 而不是文本的扩展视图会更好。感谢您的帮助！
我当然会。您可能对我在上面的评论中提出的问题有解决方案吗？
TextOverflow.ellipsis 在这里不起作用，因为问题是当您打开下拉菜单时，它会增加 DropDown 字段的大小，这就是我们看到错误的原因。