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

Question

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

我想DropdownButtonFormField从DB填充其项目。该字符串可以是任何动态长度。所以我决定是有一个固定的宽度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

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

图1：这是你得到的问题。

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

图3：现在在这里，我再次添加了SizedBox的136的宽度，并将SizedBox放在Container的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",
                    ),
                  ))
            ]),
      )

试试这个，让我知道这是否是问题（并已解决），请让我们更新您完成的任何其他解决方法。谢谢