如何修复 Flutter 下拉按钮溢出问题？答案

【问题标题】：How to fix Flutter dropdown button overflow issue?如何修复 Flutter 下拉按钮溢出问题？
【发布时间】：2019-04-12 06:18:42
【问题描述】：

我创建了一个 Flutter 表单，并使用 Flutter 构建了一个下拉按钮。我正在将本地儿子数据丢失到下拉列表中。我的一些下拉按钮中的项目很长。我使用 SafeArea 和 ListView 并且我在右边得到溢出。

其他问题中没有提到的部分解决方案，我在这里得到答案。

知道怎么解决吗？

 // TODO: BUILD RUN
        return new Scaffold(
            key: _scaffoldKey,
            body: new SafeArea(
                top: false,
                bottom: false,
                child: new Form(
                    key: _formKey,
                    child: new ListView(
                      padding: const EdgeInsets.symmetric(
                          horizontal: 16.0, vertical: 32.0),
                      children: <Widget>[
                        //TODO: CURRENCY 
                        new FormField<String>(
                          builder: (FormFieldState<String> state) {
                            return InputDecorator(
                              decoration: InputDecoration(
                                labelText: 'CHOOSE CURRENCY',
                                labelStyle: TextStyle(
                                    fontSize: 18.0,
                                    fontWeight: FontWeight.bold,
                                    color: Colors.green.shade700),
                                errorText: state.hasError ? state.errorText : null,
                              ),
                              isEmpty: _mySelectedCurrency == '',
                              child: new DropdownButtonHideUnderline(
                                child: new DropdownButton<String>(
                                  style: TextStyle(
                                    fontSize: 14.0,
                                    color: Colors.black,
                                    fontWeight: FontWeight.w500,
                                  ),
                                  value: _mySelectedCurrency,
                                  isDense: true,
                                  onChanged: (String newValue) {
                                    setState(() {
                                      _mySelectedCurrency = newValue;
                                      state.didChange(newValue);
                                    });
                                  },
                                  items: _itemsName,
                                ),
                              ),
                            );
                          },
                          validator: (val) {
                            return val != '' ? null : 'Choose Currency...';
                          },
                        ),
                      ],
                    ))));

【问题讨论】：

Flutter - DropdownButton overflow in ListView的可能重复
是的，类似...而且似乎 GitHub 问题尚未解决。问题是解决方法不会为我解决，下拉菜单项有时会超过 3 行...寻找固定和封闭的解决方案，谢谢

标签： dart flutter overflow dropdown

【解决方案1】：

虽然我已将问题标记为possible duplicate，但另一个问题中未提及的部分解决方案是使用isExpanded 属性为DropDownButton。

              child: new DropdownButton<String>(
                isExpanded: true,
                ...

【讨论】：

谢谢，它工作正常，没有出现任何错误或溢出。但我需要问。 “部分解决方案”是什么意思？
嗯，看了 Github issue 的最后一条评论，我不得不同意发帖者的看法。它有效，但可能并非在所有情况下都有效。
谢谢，仍在寻找最终解决方案，我修改了我的菜单项，所以目前我没有问题...
这确实对我帮助很大！谢谢

【解决方案2】：

在大多数情况下，除了展开之外，将其设置为椭圆也是很好的。步骤 1 和 2。如果不是椭圆，它将使其换行到下一行，如果组件不支持多行它会截断文本。

DropdownButton(
    isExpanded: true, //Step 1
    items: [
        new DropdownMenuItem(
            child: Text("Long text that overflow the size.. wrapped or ellipsized", 
            overflow: TextOverflow.ellipsis),  //Step 2
        ),
    ],
    onChanged: (val) { }
)

【讨论】：