在Flutter中实现带有下拉箭头的全宽度DropdownButton

Question

我需要在Flutter中添加具有完整宽度并调整下拉箭头图标的DropdownButton。但是，我已经尝试了多种方法，但它无法扩展其完整宽度。

这是我的DropdownButton代码：

new Expanded(
    child: new Column(
    children: <Widget>[
        new DropdownButton(
            items: [
                new DropdownMenuItem(child: new Text("Abc")),
                new DropdownMenuItem(child: new Text("Xyz")),
            ],
            hint: new Text("Select City"),
            onChanged: null
          )
       ]
    ),
    flex: 1,
)

- Sandip Patel

Answer 1

只需将 isExpanded:true 添加到 DropdownButton

  Widget example() {
    return DropdownButton(
          isExpanded: true,
            items: const [
               DropdownMenuItem(child: Text("Abc")),
               DropdownMenuItem(child: Text("Xyz")),
            ],
            hint: const Text("Select City"),
            onChanged: null
        );
  }

- Pablo Cegarra

---

别忘了在DropDownButton容器外添加固定宽度容器或Expanded Widget，否则" isExpanded: true "属性将无法正常工作并在控制台中显示错误。感谢提问。 - Kamlesh

这很有道理，但我没有测试这个变量，因为我认为它意味着下拉菜单本身会被展开/打开。 - mauriii

Answer 2

尝试在您所拥有的列中添加以下内容...

Column(
  crossAxisAlignment: CrossAxisAlignment.stretch,
  ...
)

你不需要使用 Expanded widget，因为它会尝试填充垂直空间而不是水平（宽度）空间。

- aqwert

---

谢谢@aqaert提供的代码，我得到了DropdownButton的全宽度，但是下拉箭头没有调整。由于DropdownButton的全宽度，下拉箭头应该位于末尾位置。 - Sandip Patel

将 isExpanded: true 添加到 DropDownButton 中，可以解决这个问题。@SandipPatel - Boy