Flutter：如何最小化 DropdownButton 的宽度答案

【问题标题】：Flutter: How to minimize width of DropdownButtonFlutter：如何最小化 DropdownButton 的宽度
【发布时间】：2019-06-07 08:41:04
【问题描述】：

Flutter 中的 DropdownButton 根据其拥有的项目中最大的 DropdownMenuItem 设置其宽度。如果选择了一个小项目，则会在项目和箭头之间留下很多空白。如何使按钮缩放以适合所选项目的宽度？

我尝试使用Expanded，一些Flexible 的东西，但我仍然无法改变它的宽度。

DropdownButton(
    value: null,
    hint: Text("Small text"),
    items: ..., //Text widgets that have more text and are larger than the hint
)

我试图去掉hint 和箭头之间下划线的那个空格：

【问题讨论】：

您找到解决方案了吗？我也卡住了。它占用了最大下拉项的宽度。
这里有同样的问题。 DropdownButton 似乎占据了最大的项目。

标签： flutter flutter-layout

【解决方案1】：

宽度实际上由 selectedItemBuilder 参数提供的最宽项确定（如果未定义，它将使用这些项）。通过这个小技巧，我设法让它发挥作用：

    DropdownButton<T>(
      value: value,
      selectedItemBuilder: (ctx) => [for (final item in items) value], 
      items: items,
      onChanged: (value) => ... update value

示例中的 selectedItemBuilder 生成重复项的列表（对应于选定值的项）。您将需要一个有状态的小部件来处理该值。

【讨论】：

【解决方案2】：

用ButtonTheme 包裹下拉按钮并添加alignedDropdown = true 喜欢：

ButtonTheme(
  alignedDropdown: true,
  child: DropdownButton(...),
)

alignedDropdown 将菜单项的宽度与按钮匹配。然后我们需要特定的宽度，所以用 SizedBox 或 Container 包裹 ButtonTheme：

SizedBox(
  width: 25, // Your width for dropdowns
  child: ButtonTheme(...),
)

【讨论】：

【解决方案3】：

这行得通：

new Container(
            padding: const EdgeInsets.fromLTRB(10.0, 5, 10, 0),
            child: new Container(
              padding: const EdgeInsets.fromLTRB(10, 5, 5, 5),
              decoration: new BoxDecoration(
                  color: Colors.white,
                  borderRadius: new BorderRadius.only(
                      topLeft: const Radius.circular(5.0),
                      bottomLeft: const Radius.circular(5.0),
                      bottomRight: const Radius.circular(5.0),
                      topRight: const Radius.circular(5.0))),
              child: new Center(
                  child: new Column(children: [
                new DropdownButton(
                  underline: Text(''),
                  icon: Icon(Icons.keyboard_arrow_down),
                  hint: new Text('Small text'),
                  style: TextStyle(
                    color: Colors.white30,
                  ),
                  isExpanded: true,
                  value: _selectedLocation,
                  onChanged: (String newValue) {
                    setState(() {
                      _selectedLocation = newValue;
                    });
                  },
                  items: _locations.map((String location) {
                    return new DropdownMenuItem<String>(
                      value: location,
                      child: new Text(
                        location,
                        style: TextStyle(
                            color: myColour, fontWeight: FontWeight.bold),
                      ),
                    );
                  }).toList(),
                ),
              ])),
            ))

【讨论】：

【解决方案4】：

如果我正确理解了您的问题，那么我也遇到了它并且我有一个解决方案。只需将 Wrap 小部件作为 DropdownButton 的父级。它将使下拉菜单包装到值的大小（虽然不确定它会如何与空值反应）

Wrap(children: <Widget>[DropdownButton(
value: null,
hint: Text("Small text"),
items: //Text widgets that have more text and are larger than the hint
)])

【讨论】：

【解决方案5】：

到目前为止，我能够做到的方式是限制下拉菜单中项目的宽度。

【讨论】：

【解决方案6】：

使用 DropdownButtonHideUnderline 删除下线变形 Dropdown

【讨论】：

正如目前所写，您的答案尚不清楚。请edit 添加其他详细信息，以帮助其他人了解这如何解决所提出的问题。你可以找到更多关于如何写好答案的信息in the help center。