Flutter: 如何最小化DropdownButton的宽度

Question

在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和箭头之间下划线标出的空格:

- Jovanovski

---

你找到解决方案了吗？我也卡住了。它正在获取最大下拉项的宽度。 - Chirag Mittal

同样的问题在这里。DropdownButton 似乎会选择最大的项目。 - ch271828n

Answer 1

实际上，宽度是由selectedItemBuilder参数提供的最宽的项目（如果未定义，则使用items）确定的。通过这个小技巧，我设法使其工作：

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

在示例中，selectedItemBuilder会生成一个重复项的列表（与所选值对应的值）。您需要使用有状态的小部件来处理该值。

- Marco

---

虽然selectedItemBuilder构建的项目仍然占据下拉菜单的宽度... - undefined

Answer 2

使用ButtonTheme包装下拉按钮，并添加alignedDropdown = true，如：

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

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

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

- willypede

Answer 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(),
                ),
              ])),
            ))

- Lucas Matos

Answer 4

我通过定义 alignment: Alignment.centerRight 成功去除了空白。默认情况下，对齐方式设置为 Alignment.centerStart，这会强制文本从开头对齐，而图标则从结尾对齐。因此，通过将文本居中右对齐，可以填充出现在文本和图标之间的空白。完整代码示例：

DropdownButton(
    alignment: Alignment.centerRight,
    child: .....
     )

- Nengha

---

只有在文本左侧没有任何内容时，这才有效。 - undefined

Answer 5

使用DropdownButtonHideUnderline来移除下划线换行的下拉菜单。

- Umar Farooqq

---

目前你的回答不够清晰，请编辑并添加更多细节，以帮助其他人理解它如何回答问题。你可以在帮助中心找到有关如何编写好答案的更多信息。 - Community

Answer 6

如果我正确理解了您的问题，那么我也遇到过类似的情况，并且我有解决方案。只需将Wrap小部件作为DropdownButton的父级即可。它会使下拉菜单的大小适应于值（不确定在null值情况下会如何反应）。

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

- Nadav Porat