2

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

DropDownButton 折叠

之后：

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(),
                                  ),
                                ),
                              );
                            },
                          ),

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

4

2 回答 2

0

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

或者你看看这个答案：按钮本身下的​​下拉按钮

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

于 2021-09-22T18:24:29.543 回答
0

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

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

包： 下拉按钮2

存储库（GitHub）： DropdownButton2

于 2021-12-03T07:24:17.270 回答