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

Question

我想自定义DropDownButton，以便它不呈现DropdownItem. 相反，它应该在从 DropDown 选择项目之前和之后呈现我的自定义布局/小部件。简单来说，我想自定义我的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是我自己的有状态小部件的状态。