Flutter：按钮下方的 DropDownButton 项

Posted 2023-03-24

【中文标题】Flutter：按钮下方的 DropDownButton 项

【英文标题】：Flutter: DropDownButton items below button

【发布时间】：2021-11-16 05:21:23

【问题描述】：

我想创建一个漂亮的DropDownButton。不幸的是，这似乎很难。虽然设计很好，但每当我想选择一个不同的项目时，列表会以一种非常难看的方式落在选择之上。下面是当前版本的图片。

之后：

下面是我的代码：

var _repeats = ["Einmalig", "Wiederholen:"];
String _initRepeat = "Einmalig";

FormField<String>(
                            builder: (FormFieldState<String> state) 
                              return Container(
                                decoration: BoxDecoration(
                                  color: Color.fromRGBO(204, 204, 204, 1.0),
                                  border: Border.all(color: Colors.black),
                                  borderRadius: BorderRadius.circular(15),
                                ),
                                child: Padding(
                                  padding: const EdgeInsets.only(left: 8.0, right: 8.0,),
                                  child: DropdownButton<String>(
                                    dropdownColor:
                                        Color.fromRGBO(204, 204, 204, 1.0),
                                    alignment: AlignmentDirectional.center,
                                    value: _initRepeat,
                                    isDense: true,
                                    onChanged: (String? newValue) 
                                      setState(() 
                                        _initRepeat = newValue!;
                                        state.didChange(newValue);
                                      );
                                    ,
                                    items: _repeats.map((String value) 
                                      return DropdownMenuItem<String>(
                                        value: value,
                                        child: Text(
                                          value,
                                          style: TextStyle(
                                            color: Colors.black,
                                            fontSize: 12.0,
                                          ),
                                        ),
                                      );
                                    ).toList(),
                                  ),
                                ),
                              );
                            ,
                          ),

有人对如何改进有建议吗？我基本上想要一个低于当前选定值的平滑选择。 非常感谢！！

【参考方案1】：

这个包应该是你要走的路：dropdown_below。它提供了您正在寻找的东西。

或者你看看这个答案：DropdownButton under Button itself

基本上，它为您提供了自定义 DropdownButton 的完整代码示例，其中 Dropdown 始终位于按钮本身的“下方”。

【讨论】：

我从dropdown_below 复制了这个例子，但它对我不起作用。 *** 帖子中的解决方案也没有。我遇到了 nullsafety 问题：/ 还有其他解决方案吗？我本来希望有一种更直观的方法，因为下拉菜单的使用如此频繁。

【参考方案2】：

我已经从 Flutter 的 DropdownButton 的当前版本创建了一个自定义 DropdownButton 并使其更具可定制性。这很简单，您可以在“只要可能”按钮下方拥有稳定的下拉菜单，而不会出现任何问题以及该软件包描述的许多其他功能。此外，我还向 DropdownButtonFormField2 添加了相同的功能，并添加了将按钮用作弹出菜单按钮的功能以及在项目后添加分隔符的功能。我已经很好地测试了它，它就像一个魅力！

您可以使用该包或直接使用 GitHub 上的源文件。此外，我还添加了带有包的自定义小部件，您可以为整个应用自定义默认的 DropdownButton2 小部件，并使用它只需几行，如示例中所示。

包：DropdownButton2

存储库 (GitHub)： DropdownButton2