灵活自定义阴影颜色和箭头，让 Flutter PopupMenuButton 更加个性

前端

2023-12-08 10:06:50

Flutter PopupMenuButton 完善体验，自定义阴影颜色和箭头

前言

Flutter PopupMenuButton 控件提供了一种方便的方式来显示菜单选项，这些选项在点击按钮时弹出。它经常用于替代传统的下拉菜单或上下文菜单。

限制

默认情况下，PopupMenuButton 没有任何箭头指示器，且阴影颜色无法自定义。对于阴影颜色，它只可以通过 elevation 属性进行设置，但该属性无法精确控制阴影颜色。

实现

添加箭头

为了添加箭头，我们需要修改 PopupMenuButton 的形状属性，该属性指定菜单按钮的形状。我们将使用 RoundedRectangleBorder 类来创建一个带有箭头的矩形。

RoundedRectangleBorder(
  borderRadius: BorderRadius.circular(10.0),
  side: BorderSide(
    color: Colors.black,
    width: 1.0,
  ),
  borderRadius: BorderRadius.only(
    bottomLeft: Radius.circular(0.0),
    bottomRight: Radius.circular(0.0),
  ),
)

自定义阴影颜色

要自定义阴影颜色，我们需要修改 PopupMenuButton 的 elevation 属性。该属性指定菜单按钮的阴影高度。我们将使用一个自定义颜色作为阴影颜色。

PopupMenuButton(
  elevation: 10.0,
  color: Colors.white,
  shape: RoundedRectangleBorder(
    borderRadius: BorderRadius.circular(10.0),
    side: BorderSide(
      color: Colors.black,
      width: 1.0,
    ),
    borderRadius: BorderRadius.only(
      bottomLeft: Radius.circular(0.0),
      bottomRight: Radius.circular(0.0),
    ),
  ),
)