Flutter：按鈕下方的 DropDownButton 項目

Question

我想創建一個漂亮的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(),
                                  ),
                                ),
                              );
                            },
                          ),

有沒有人有關於如何改進這一點的建議？ 我基本上想要一個在當前選定值以下平滑的選擇。 非常感謝！！

Answer 1

這個包應該是你的方式： dropdown_below 。 它提供了您正在尋找的東西。

或者你看看這個答案： 按鈕本身下的​​下拉按鈕

基本上，它為您提供了自定義 DropdownButton 的完整代碼示例，其中 Dropdown 始終位於按鈕本身的“下方”。

Answer 2

DropdownButton的問題在於菜單將根據所選索引和其他內容隨機打開。 此外，您無法通過僅嘗試傳遞偏移量作為基於該值的繪制工作的邏輯代碼來編輯其代碼，並嘗試將 selectedItemOffset 硬編碼為一個值將無法正常工作。

如果您嘗試將PopupMenuButton用作DropdownButton ，則它的問題在於它的偏移量和菜單寬度無法與按鈕完美配合。 您將無法為菜單設置精確的寬度。

此外，根據我的經驗，兩者都沒有提供很好的定制和可用性。

所以，我創建了一個自定義的DropdownButton顫振的當前版本DropdownButton並使其更加個性化。 這很容易，簡單，您可以在按鈕下方使用穩定的下拉菜單以及該軟件包描述的許多其他功能。 還向DropdownButtonFormField2添加了相同的功能，並添加了將按鈕用作彈出菜單按鈕的功能。 我已經很好地測試了它，它就像一個魅力！

您可以使用該包或直接使用 GitHub 上的源文件。 此外，我在包中添加了自定義小部件，您可以為整個應用程序自定義默認的DropdownButton2小部件，並使用幾行代碼來使用它，如示例中所示。

包： DropdownButton2

存儲庫（GitHub）： DropdownButton2

Answer 3

我創建了一個自定義的DropdownButton顫振的當前版本DropdownButton並使其更加個性化。 這很容易，簡單，您可以在“只要可能”按鈕下方有穩定的下拉菜單，以及軟件包中描述的許多其他功能。 還向DropdownButtonFormField2添加了相同的功能，並添加了將按鈕用作彈出菜單按鈕的功能。 我已經很好地測試了它，它就像一個魅力！

您可以使用該包或直接使用 GitHub 上的源文件。 此外，我在包中添加了自定義小部件，您可以為整個應用程序自定義默認的DropdownButton2小部件，並使用幾行代碼來使用它，如示例中所示。

包： DropdownButton2

存儲庫（GitHub）： DropdownButton2