Question

我认为我不太理解Flutter中的约束，所以请耐心等待！

我想DropdownButtonFormField从数据库中填充其项目。该字符串可以是任何动态长度。因此，我决定将DropdownButtonFormField设置为固定宽度，而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,
      );
  }
}

我收到溢出错误

但是当我单击DropdownButtonFormField时，DropdownMenuItem的列表被省略了。

如何摆脱“溢出”错误？我不能使用Flexible或Expanded DropDownButtonFormField，因为String的长度可以是动态的（可能长于合适的长度）。

Answer 1

我知道分享答案可能有点晚了，但是我发现了一个简单的解决方法。只需将isExpanded: true添加到DropdownButtonFormField中即可。

  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",
                ),
              ))
        ])

Before Adding isExpanded property After Adding isExpanded property

Answer 2

请参考所附图片，我添加了3张图片。

图片1：这就是您遇到的问题。

图片2：当我从width移除SizedBox时。现在，它显示3个框：1是提示文本，其他为空，第3个是下拉箭头。我认为溢出是由于第二个空白空间引起的。

图片3：现在，我再次在SizedBox的{{1}}中添加了一个宽度，并将136放在宽度固定为SizedBox（是下拉菜单中文本的宽度，它会根据宽度自动包装文本）。根据您提供的代码，这解决了溢出问题。

我认为您已经添加了一个自定义窗口小部件，而Container会导致此问题。可能还有其他解决方法，但这解决了问题。

尝试一下，让我知道这是否是问题所在（并已解决），请让我们随时了解您执行的其他任何解决方法。谢谢

Answer 3

那是因为您的列表中有一个包含太多字符的项目例如“ mooooorrrrreeeeee角色”之类的

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

3 个答案: