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

Question

我想自定义DropDownButton，使其不会呈现DropdownItem 的内容。相反，它应该在从下拉菜单中选择项目之前和之后呈现我的自定义布局/小部件。 简单来说，我想自定义我的DropDownButton。

谢谢，

Answer 1

DropdownButton 项目被下拉时如何渲染？

我通过DropdownMenuItem 找到了解决方案。其build() 分别针对关闭和下拉状态执行。您可以使用上下文来确定它是关闭还是下拉状态。例如，您可以检查祖先状态小部件。

我使用类似这样的虚拟代码片段：

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 是我自己的有状态小部件的状态。