如何在Tizen 5.5/4.0的Genlist中添加无高亮按钮图标？

需求背景 #

在Tizen 5.5/4.0中实现圆形Genlist，结构为：内边距 → 顶部2个图标按钮 → groupindex → 列表项 → 内边距。已掌握内边距、groupindex、列表项的实现，但图标作为按钮时始终处于高亮状态，需要消除这种高亮。

当前实现方式 #

通过Genlist的content方式添加图标，代码如下：

auto itc = elm_genlist_item_class_new();
itc->item_style = "full";
itc->func.content_get = getListItem;

Evas_Object* getListItem(void* data, Evas_Object* obj, const char* part) {
  Evas_Object* item = elm_layout_add(obj);
  elm_layout_file_set(...);
  evas_object_show(item);
  return item;
}

布局代码（EDC）：

parts {
  image { "elm.icon.create";
    mouse_events: 0;
    desc { "default";
      image.normal: "ic_create.png";
      rel2.relative: 0.5 1;
    }
  }
  image { "elm.icon.settings";
    mouse_events: 0;
    desc { "default";
      image.normal: "ic_settings.png";
      rel1.relative: 0.5 0;
    }
  }
}

解决思路与方案 #

核心原因 #

当前使用的Genlist item样式"full"默认会给整个item添加高亮状态（包括内部图标区域），即使设置mouse_events: 0也无法阻止Genlist本身对item的高亮触发。

具体解决步骤 #

方案1：自定义Genlist Item样式，取消全局高亮

在EDC文件中添加自定义样式，移除item的高亮状态：

styles {
  style "custom_icon_header" {
    base: "default";
    parts {
      part "elm.swallow.content" {
        type: SWALLOW;
        description { state: "default" 0.0; }
        description { state: "selected" 0.0; inherit: "default" 0.0; }
        description { state: "highlighted" 0.0; inherit: "default" 0.0; }
      }
    }
  }
}

代码中指定该自定义样式：

itc->item_style = "custom_icon_header";

方案2：单独处理图标点击，阻止事件冒泡

移除布局中mouse_events: 0的设置，给图标添加点击回调并阻止事件传递到父级Genlist item：

Evas_Object* getListItem(void* data, Evas_Object* obj, const char* part) {
  Evas_Object* layout = elm_layout_add(obj);
  elm_layout_file_set(layout, YOUR_EDC_PATH, "icon_header_layout");
  
  // 处理创建图标点击
  Evas_Object* create_icon = elm_layout_part_content_get(layout, "elm.icon.create");
  evas_object_smart_callback_add(create_icon, "clicked", _create_btn_clicked, data);
  // 阻止事件冒泡到Genlist item
  evas_object_event_callback_add(create_icon, EVAS_CALLBACK_MOUSE_DOWN, [](void *data, Evas *e, Evas_Object *obj, void *event_info) {
    evas_event_feed_mouse_up(e, evas_pointer_button_get(e, obj), EVAS_BUTTON_NONE, evas_time_get(e), NULL);
  }, NULL);
  
  // 处理设置图标点击
  Evas_Object* settings_icon = elm_layout_part_content_get(layout, "elm.icon.settings");
  evas_object_smart_callback_add(settings_icon, "clicked", _settings_btn_clicked, data);
  evas_object_event_callback_add(settings_icon, EVAS_CALLBACK_MOUSE_DOWN, [](void *data, Evas *e, Evas_Object *obj, void *event_info) {
    evas_event_feed_mouse_up(e, evas_pointer_button_get(e, obj), EVAS_BUTTON_NONE, evas_time_get(e), NULL);
  }, NULL);
  
  evas_object_show(layout);
  return layout;
}

方案3：使用Genlist Header替代普通Item

将顶部图标区域作为Genlist的header添加，header默认无高亮状态：

Evas_Object* header_layout = elm_layout_add(genlist);
elm_layout_file_set(header_layout, YOUR_EDC_PATH, "icon_header_layout");
// 添加图标点击事件逻辑
// ...
elm_genlist_header_item_append(genlist, NULL, NULL, NULL, header_layout);

补充说明 #

参考One UI手表设计规范：图标按钮仅需在点击时提供反馈，避免持续高亮；圆形界面组件应减少不必要的状态高亮干扰视觉体验。

内容的提问来源于stack exchange，提问作者Daniel