flutter - 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

您需要使用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;
                                          },
                                        ),
                                      ),
                                    ],
                                  ),

Answer 2

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

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