Flutter下拉框对齐不正确。

Question

我希望使用Flutter实现下拉菜单，效果如图所示：

使用Flutter的dropdownformfield组件可以创建类似于下图的下拉菜单：

但是，当我点击下拉按钮时，菜单项会重叠在按钮上。以下为代码：

DropdownButtonFormField(
                            isExpanded: false,
                            isDense: true,
                            items:  classes.map((category) {
                                    return new DropdownMenuItem(
                                        value: category,
                                        child: Row(
                                          children: <Widget>[
                                            Text(category),
                                          ],
                                        ));
                                  }).toList()
                                ,
                            onChanged: (newValue) {
                              // do other stuff
                              
                            },
                            value: _classroom,
                            decoration: InputDecoration(
                              contentPadding: EdgeInsets.fromLTRB(10, 0, 10, 0),
                              enabledBorder: UnderlineInputBorder(
                                  borderSide: BorderSide(color: Colors.white)),
                              hintText: "Select Class",
                              hintStyle: TextStyle(
                                color: Colors.grey[600],
                              ),
                            ),
                          )

使用下拉菜单小部件可以实现吗？如果不能，我该如何设计自定义下拉菜单小部件？

谢谢。

- Abbas Ali

---

Flutter默认情况下会在菜单按钮下方显示下拉菜单。在这种情况下重叠的原因是因为菜单中有太多的项目，无法将它们全部放在屏幕上，这就将菜单向上推以显示更多的项目。如何更改此行为取决于您。如果您想自定义自己的下拉菜单，菜单的代码是开源的，您可以通过右键单击代码中的DropdownButtonFormField类并选择“转到源”（或者您的IDE相应的选项）来查看它。将其复制到一个新类中并进行编辑。 - Abion47

即使我只有一个菜单项，它仍然重叠。 - Abbas Ali

请参考以下内容，从英语翻译为中文：如何在Flutter中像Spinner一样打开DropdownButton下拉对话框 - Abhishek Karad

Answer 1

使用Flutter的DropdownButton2，其中菜单项从按钮底部对齐，而且您甚至可以非常好地自定义菜单项。

包裹：DropDownButton2 参考链接：请参阅此链接

- Agni Gari