下拉按钮显示文本截断 Flutter答案

【问题标题】：Dropdown button display text cut off Flutter下拉按钮显示文本截断 Flutter
【发布时间】：2021-08-09 15:16:32
【问题描述】：

您好，我有一个下拉按钮，其提示和选定值文本在太长时被截断：

应该显示“部门代码/部门编号”

代码：

DropdownButton<String> dropdownList(BuildContext context) {
  return new DropdownButton<String>(
    hint: new Text(
      "Department Code / Department Number", 
    ),
    value: selectedDept,
    isDense: true,
    onChanged: (String newValue) {
      //...
    },
    items: _item.map((Dept map) {
      return new DropdownMenuItem<String>(
        value: map.code,
        child:
            new Text(map.code, style: new TextStyle(color: Colors.black)),
      );
    }).toList(),
    isExpanded: true,
  );
}


 Widget build(BuildContext context) {
    return Scaffold(
        child: Column(
            children: <Widget>[
                Container(
                  padding: EdgeInsets.fromLTRB(
                      20, 20, 10, 20),
                  decoration: ShapeDecoration(
                    shape: RoundedRectangleBorder(
                      side: BorderSide(
                          width: 1.0,
                          style: BorderStyle.solid,
                          color: Colors.grey[400]),
                      borderRadius:
                          BorderRadius.all(
                              Radius.circular(
                                  15.0)),
                    ),
                  ),
                  child:
                      DropdownButtonHideUnderline(
                          child: dropdownList(
                              context)),
                )
            ]
        )

    )
}

知道如何修复显示吗？

【问题讨论】：

我能够复制您的问题的唯一方法是为保存下拉列表的Container 提供自定义边界。但是您提供的代码没有任何界限。尝试将width 和height 分配给Container，并根据需要调整它们以正确显示提示文本。
@Darshan 嗯，我没有提供整个脚手架布局，因为它太长了。好的，我试试，谢谢
尝试将文本小部件包装在水平列表视图中，文本的 maxLine 属性为 1。

标签： flutter flutter-layout dropdown

【解决方案1】：

如果您不想增加下拉菜单的大小，请将内容填充更改为适合您的内容。

DropdownButtonFormField(
        itemHeight: 50,
        decoration: InputDecoration(
            contentPadding:
                EdgeInsets.symmetric(vertical: 5, horizontal: 10),
           .
           .
           .

contentPadding 通常有一个默认值，它会切割你的文本。要访问输入装饰，您需要使用 DropdownButtonFromField

【讨论】：

【解决方案2】：

在 Container() 中，添加 BoxConstraints 并指定 minHeight 和 maxHeight

constraints: new BoxConstraints(
  minHeight: 50.0,
  maxHeight: 70.0,
)

【讨论】：

【解决方案3】：

只需添加填充以在您的内部内容之间留出空间。

 return DropdownMenuItem<String>(
                        value: value,
                        child: Padding(
                          padding: EdgeInsets.all(4),
                          child: Text(map.code, style: new TextStyle(color: Colors.black)),
                        ),
                      );

【讨论】：