PopupMenuButton 使用ThemeData更改背景颜

2020-09-28  本文已影响0人  三也视界

PopupMenuButton 本身并没有提供改变颜色的参数,如何更改背景颜色?
很多人会想到包裹一个Container,但是这样相当于多了一层。

还有一种方式更加推荐(可以通过ThemeData统一管理,和整个APP的风格保持一致了):用 Theme 包裹住 PopupMenuButton,然后定义了一个 cardColor

Theme(
  data: ThemeData(cardColor: Colors.red),
  child: PopupMenuButton<WhyFarther>(
    // ...
  ), 
),

cardColor - Color类型,Material被用作Card时的颜色。
查看Material源码(全局搜索 card 关键字)发现:

return Opacity(
  opacity: opacity.evaluate(route.animation),
  child: Material(
    type: MaterialType.card,
    /// ...
    ),
  ),
);

Material 组件下有个 type 参数
type 都有什么类型:

enum MaterialType {
  /// 使用默认主题画布颜色的矩形。
  canvas,
  /// 圆形边缘,卡片主题颜色。
  card,
  /// 默认情况下没有颜色的圆(用于浮动操作按钮)。
  circle,
  /// 圆形边缘,默认情况下没有颜色(用于[MaterialButton]按钮)。
  button,
  /// 一块透明的材料,用于绘制喷墨和高光。虽然材料隐喻描述了打印在材料本身上的子部件,但不隐藏墨迹效             果,但实际上[Material]小部件将子部件绘制在墨迹效果的顶部。具有类型透明度的[材质]可以放置在            不透明小部件的顶部,以在其顶部显示墨迹效果。首选使用[ink]小部件在不透明小部件上显示墨迹效果。
  transparency
}
上一篇 下一篇

猜你喜欢

热点阅读