如何制作Flutter自定义下拉按钮？

Question

我想自定义DropDownButton，使其在选择下拉项之前和之后渲染我的自定义布局/小部件，而不是渲染DropdownItem的内容。 简单来说，我想要定制我的DropDownButton。

谢谢。

- Kyaw Tun

---

检查下拉列表的实现方式，我认为你需要编辑源代码实现才能做到这一点，因为它检查value=null还是取项值而不是其子集。 - Shady Aziza

你能否再明确一下你想要实现什么？ - Hemanth Raj

@HemanthRaj 将下拉菜单的值定制化，而不是反映选择（选择 A 将使 dropdownButton 的值 = A，如果我选择 A，dropdownButton 的值将变为 B）。 - Shady Aziza

Answer 1

如何在下拉时以不同方式呈现DropdownButton项目？

我通过使用DropdownMenuItem找到了一种解决方案。它的build()会针对关闭和下拉状态分别执行。您可以使用上下文来判断它是关闭状态还是下拉状态，例如，您可以检查祖先有状态的widget。

我使用类似于以下虚拟代码片段：

DropdownButton<String>(
    value: selectedItem.id,
    items: items.map((item) {
        return DropdownMenuItem<String>(
            value: item.id,
            child: Builder(builder: (BuildContext context) {
                final bool isDropDown = context.ancestorStateOfType(TypeMatcher<PageState>()) == null;

                if (isDropDown) {
                    return Text(item.name);
                } else {
                    return Text(item.name, style: TextStyle(color: Colors.red));
                }
            },)
        );
    }).toList(),
);

其中 items 是 id-name 实例列表，PageState 则是我的自有有状态小部件的状态。

- bdi

---

所以这个可以工作。我遇到的问题是当下拉菜单项比按钮更大时，如何扩展下拉菜单的宽度... - zack