QMUI_iOS 中 QMUIPopupMenuView 的选中状态自定义方案

背景介绍

QMUI_iOS 是腾讯开源的一套高质量 UI 组件库，其中 QMUIPopupMenuView 是一个常用的弹出菜单组件。在 4.8.0 版本更新后，该组件的 API 设计发生了一些变化，导致开发者在使用过程中遇到了一些关于菜单项选中状态自定义的问题。

问题分析

在 4.8.0 版本之前，QMUIPopupMenuView 提供了较为灵活的菜单项（Item）字体和颜色设置方式，开发者可以方便地区分选中和未选中状态。但在新版本中，这些直接设置属性的 API 被移除或调整了，导致开发者需要寻找新的实现方式。

解决方案

方案一：在每次显示时动态设置

开发者可以通过在每次显示菜单时，遍历所有菜单项并设置它们的样式：

[popupMenuView showWithAnimated:YES completion:^(BOOL finished) {
    for (QMUIPopupMenuItemView *itemView in popupMenuView.itemViews) {
        itemView.textLabel.textColor = itemView.selected ? selectedColor : normalColor;
        itemView.textLabel.font = itemView.selected ? selectedFont : normalFont;
    }
}];

这种方式的优点是实现简单直接，缺点是每次显示菜单都需要执行这段代码，且样式逻辑分散在业务代码中。

方案二：自定义 QMUIPopupMenuItemView 子类

更优雅的解决方案是创建自定义的菜单项视图子类：

@interface CustomPopupMenuItemView : QMUIPopupMenuItemView
@property (nonatomic, strong) UIColor *normalColor;
@property (nonatomic, strong) UIColor *selectedColor;
@property (nonatomic, strong) UIFont *normalFont;
@property (nonatomic, strong) UIFont *selectedFont;
@end

@implementation CustomPopupMenuItemView

- (void)setSelected:(BOOL)selected {
    [super setSelected:selected];
    [self updateAppearance];
}

- (void)setHighlighted:(BOOL)highlighted {
    [super setHighlighted:highlighted];
    [self updateAppearance];
}

- (void)updateAppearance {
    self.textLabel.textColor = self.selected || self.highlighted ? self.selectedColor : self.normalColor;
    self.textLabel.font = self.selected || self.highlighted ? self.selectedFont : self.normalFont;
}

@end

使用时：

popupMenuView.itemViewConfigurationHandler = ^(QMUIPopupMenuItemView *itemView, NSUInteger index) {
    if ([itemView isKindOfClass:[CustomPopupMenuItemView class]]) {
        CustomPopupMenuItemView *customItemView = (CustomPopupMenuItemView *)itemView;
        customItemView.normalColor = [UIColor grayColor];
        customItemView.selectedColor = [UIColor redColor];
        customItemView.normalFont = [UIFont systemFontOfSize:14];
        customItemView.selectedFont = [UIFont boldSystemFontOfSize:14];
        [customItemView updateAppearance];
    }
};

这种方案的优点在于：

1. 将样式逻辑封装在自定义视图中，业务代码只需关心状态值
2. 更符合面向对象的设计原则
3. 便于复用和维护

最佳实践建议

1. 样式与逻辑分离：将视觉样式相关的代码尽可能封装在视图层，业务层只需控制状态

2. 考虑继承与组合：对于简单的样式变化，继承是合适的；如果需要更复杂的变化，可以考虑使用装饰器模式

3. 性能考量：避免在频繁调用的方法（如setSelected:）中进行复杂的计算或对象创建

4. 状态一致性：注意处理selected和highlighted状态的关系，通常需要同时考虑这两个状态

总结

QMUI_iOS 4.8.0 版本对 QMUIPopupMenuView 的 API 进行了调整，虽然移除了部分直接设置样式的接口，但通过自定义菜单项视图子类的方式，开发者仍然可以实现灵活的状态样式控制。这种设计实际上鼓励了更好的代码组织方式，将样式逻辑从业务代码中解耦出来，提高了代码的可维护性和复用性。