TextFormField输入文本溢出与DropdownButtonFormField，Flutter

Question

我有布局问题，因为您选择的下拉菜单中的文本无法放入 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;
                                          },
                                        ),
                                      ),
                                    ],
                                  ),

在此先感谢您的帮助！

Answer 1

您需要使用 isExpanded 属性 of DropDownFormField 来解决这个错误。

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;
                                          },
                                        ),
                                      ),
                                    ],
                                  ),

Answer 2

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

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

TextFormField输入文本溢出与DropdownButtonFormField，Flutter

TextFormField input text overflow with DropdownButtonFormField, Flutter

mobile

flutter

flutter-layout

flutter-textformfield