【Flutter 问题系列第 35 篇】如何自定义 PopupMenuDivider 分割线的颜色

这是【Flutter 问题系列第 35 篇】，如果觉得有用的话，欢迎关注专栏。

在使用 Flutter 中的下拉弹框组件 PopupMenuButton 时，需要对子元素设置分割线 PopupMenuDivider ，但 PopupMenuDivider 组件只提供了修改高度的属性，不能改变分割线的颜色，这个就太不友好了。

既然源码中的组件无法修改颜色，那就把 PopupMenuDivider 中的源码复制过来，自己添加 color 属性就行了。

PopupMenuDivider 的源码很简单，其实就是返回了一个 Divider 组件，下面是自定义的 PopupMenuDivider

如下代码所示

import 'package:flutter/material.dart';

// ------------------------------------------------------
// author：Allen Su
// date  ：2021/7/19 12:30
// usage ：自定义 PopupMenuDivider 组件
// ------------------------------------------------------

const double _kMenuDividerHeight = 16.0;

class CustomPopupMenuDivider extends PopupMenuEntry {
  final double height;
  final Color color;

  const CustomPopupMenuDivider({
    this.height: _kMenuDividerHeight,
    this.color: Colors.white,
    Key key,
  }) : super(key: key);

  @override
  bool represents(void value) => false;

  @override
  _PopupMenuDividerState createState() => _PopupMenuDividerState();
}

class _PopupMenuDividerState extends State {
  @override
  Widget build(BuildContext context) {
    return Divider(height: widget.height, color: widget.color);
  }
}

我把平常自己总结的关于 Flutter 实用的轮子 写到了 GitHub 上，有兴趣的可以看下。

你的问题得到解决了吗？欢迎在评论区留言。

赠人玫瑰，手有余香，如果觉得文章不错，希望可以给个一键三连，感谢。

结束语 Google 的 Flutter 越来越火，截止 2021年7月19日 GitHub 标星已达 125K，Flutter 毅然是一种趋势，所以作为前端开发者，没有理由不趁早去学习。 无论你是 Flutter 新手还是已经入门了，不妨先点个关注，后续我会将 Flutter 中的常用组件（含有源码分析、组件的用法及注意事项）以及可能遇到的问题写到 CSDN 博客中，希望自己学习的同时，也可以帮助更多的人。