TextFormField 输入文本溢出与 DropdownButtonFormField, Flutter

Posted 2023-02-23

【中文标题】TextFormField 输入文本溢出与 DropdownButtonFormField, Flutter

【英文标题】：TextFormField input text overflow with 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;
                                          ,
                                        ),
                                      ),
                                    ],
                                  ),

提前感谢您的帮助！

【参考方案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 字段的大小，这就是我们看到错误的原因。