Dart DropdownButtonFormField，具有固定宽度但动态文本项

我想我不太理解颤振中的约束，所以请容忍我

我想要

DropdownButtonFormField

，它从数据库中填充其项。字符串可以是任何动态长度。因此，我决定使用固定宽度的

dropdownbutonformfield

，

DropdownMenuItem

将省略

Text

这是我试过的

SizedBox(
  width: 136.0,
  child: DropdownButtonFormField<int>(
    hint: Text("hintText")
    decoration: InputDecoration(
        contentPadding: const EdgeInsets.all(0.0),
        enabledBorder: UnderlineInputBorder(
          borderSide: BorderSide(color: Colors.white),
        ),
        isDense: true),
    items: [
        DropdownMenuItem<int>(
            value: 0,
            child: TextOneLine(
              "less character",
            ),
        ),
        DropdownMenuItem<int>(
            value: 0,
            child: TextOneLine(
              "mooooorrrrreeee character",
            ),
        )
    ]
  ),
);

class TextOneLine extends StatelessWidget {
  final String data;
  final TextStyle style;
  final TextAlign textAlign;
  final bool autoSize;

  TextOneLine(
    String data, {
    Key key,
    this.style,
    this.textAlign,
    this.autoSize = false,
  })  : this.data = data,
        assert(data != null),
        super(key: key);

  @override
  Widget build(BuildContext context) {
    return Text(
        data,
        style: style,
        textAlign: textAlign,
        maxLines: 1,
        overflow: TextOverflow.ellipsis,
      );
  }
}

SizedBox(
宽度：136.0，
子项：DropdownButtonFormField(
提示：文本（“hintText”）
装饰：输入装饰(
contentPadding:const EdgeInsets.all（0.0），
enabledBorder:UnderlineInputBorder(
borderSide:borderSide（颜色：Colors.white），
),
isDense：是的，
项目：[
下拉菜单项(
值：0，
孩子：TextOneLine(
“更少的字符”，
),
),
下拉菜单项(
值：0，
孩子：TextOneLine(
“moooorrrreee角色”，
),
)
]
),
);
类TextOneLine扩展了无状态小部件{
最终字符串数据；
最终文本样式；
最终文本对齐文本对齐；
最终bool自动调整大小；
TextOneLine(
字符串数据{
关键点，
这种风格，
这个.textAlign，
this.autoSize=false，
})：this.data=数据，
断言（数据！=null），
超级（键：键）；
@凌驾
小部件构建（构建上下文）{
返回文本(
数据，
风格：风格，
textAlign:textAlign，
maxLines:1，
溢出：TextOverflow.省略号，
);
}
}

• 我得到溢出错误

• 但是当我点击

  dropdownbutonformfield

  时，

  DropdownMenuItem

  的列表被省略了

---

如何消除溢出错误？我无法使用灵活或扩展的DropDownButtonFormField，因为字符串长度可能是动态的（可能比适合的长度长）。

请参考附件中的图像，我添加了3个图像

图1：这就是你遇到的问题

图2：当我从

SizedBox

中删除

width

时。现在显示3个框1为提示文本，另一个为空，第3个为下拉箭头。我认为溢出是由于第二个空格造成的

图3：在这里，我再次为

136

的

SizedBox

添加了一个宽度，并将

SizedBox

放在一个

容器中，容器的固定宽度大小为
100
（是下拉列表中文本的宽度，它肯定会按照宽度包装文本）。这根据您给出的代码解决了溢出问题

我认为您添加了一个自定义小部件，它是导致问题的
TextOneLine
。可能还有其他解决办法，但这解决了问题

SizedBox(
        width: 136,
        child: DropdownButtonFormField<int>(
            hint: Text("hintText"),
            decoration: InputDecoration(
                contentPadding: const EdgeInsets.all(0.0),
                enabledBorder: UnderlineInputBorder(
                  borderSide: BorderSide(color: Colors.white),
                ),
                isDense: true),
            items: [
              DropdownMenuItem<int>(
                value: 0,
                child: Container(
                  width: 100,
                  child: TextOneLine(
                    "less character",
                  ),
                ),
              ),
              DropdownMenuItem<int>(
                  value: 0,
                  child: Container(
                    width: 100,
                    child: TextOneLine(
                      "mooooorrrrreeee character",
                    ),
                  ))
            ]),
      )

SizedBox(
宽度：136，
子项：DropdownButtonFormField(
提示：文本（“hintText”），
装饰：输入装饰(
contentPadding:const EdgeInsets.all（0.0），
enabledBorder:UnderlineInputBorder(
borderSide:borderSide（颜色：Colors.white），
),
isDense：是的，
项目：[
下拉菜单项(
值：0，
子：容器(
宽度：100，
孩子：TextOneLine(
“更少的字符”，
),
),
),
下拉菜单项(
值：0，
子：容器(
宽度：100，
孩子：TextOneLine(
“moooorrrreee角色”，
),
))
]),
)


尝试一下，让我知道这是否是问题（并已解决），请随时向我们更新您所做的任何其他解决方法。谢谢
这是因为列表中的项目包含太多字符
比如“moooorrrreee角色”之类的，我知道分享答案可能有点晚了，但我找到了一个简单的解决办法。只需在DropDownButtonForm字段中添加一个
isExpanded:true

  DropdownButtonFormField<int>(
        hint: Text("hintText"),
        isExpanded: true,
        decoration: InputDecoration(
            contentPadding: const EdgeInsets.all(0.0),
            enabledBorder: UnderlineInputBorder(
              borderSide: BorderSide(color: Colors.white),
            ),
            isDense: true),
        items: [
          DropdownMenuItem<int>(
            value: 0,
            child: Container(
              width: 100,
              child: TextOneLine(
                "less character",
              ),
            ),
          ),
          DropdownMenuItem<int>(
              value: 0,
              child: Container(
                width: 100,
                child: TextOneLine(
                  "mooooorrrrreeee character",
                ),
              ))
        ])

DropdownButtonFormField(
提示：文本（“hintText”），
是的，
装饰：输入装饰(
contentPadding:const EdgeInsets.all（0.0），
enabledBorder:UnderlineInputBorder(
borderSide:borderSide（颜色：Colors.white），
),
isDense：是的，
项目：[
下拉菜单项(
值：0，
子：容器(
宽度：100，
孩子：TextOneLine(
“更少的字符”，
),
),
),
下拉菜单项(
值：0，
子：容器(
宽度：100，
孩子：TextOneLine(
“moooorrrreee角色”，
),
))
])


使用-
FittedBox
小部件-我尝试将
FittedBox
包装在
SizedBox
周围-溢出错误不会发生。我可以看到文本大小在减小，但正如我所说的，错误仍然存在。您能否生成该问题的最小可复制代码？完成。现在请勾选有意义的问题的大小框。这是一个非常简单的解决方案。我现在觉得自己很笨！！谢谢你。