在ImGUI中能否修改Collapsing Header左侧图标？自定义日期选择器箭头

不用完全重写组件，以下两种简洁方案可以实现需求：

方法一：基于TreeNodeFlags自定义绘制图标 #

Collapsing Header本质是基于TreeNode实现的，你可以通过标记去掉默认箭头，手动绘制自定义图标：

1. 用布尔变量（比如is_open）保存当前折叠状态
2. 调用ImGuiTreeNodeEx时，添加ImGuiTreeNodeFlags_NoArrow标记隐藏默认箭头，同时保留ImGuiTreeNodeFlags_CollapsingHeader的折叠交互
3. 在标题左侧手动绘制自定义图标，根据折叠状态切换图标样式
4. 处理点击事件切换折叠状态

示例代码：

bool is_open = true; // 初始展开状态
ImGui::PushID("DatePickerHeader"); // 避免组件ID冲突

// 绘制自定义箭头图标
ImGui::SameLine(0, ImGui::GetStyle().ItemInnerSpacing.x);
ImVec2 cursor_pos = ImGui::GetCursorScreenPos();
ImU32 text_color = ImGui::GetColorU32(ImGuiCol_Text);
float font_size = ImGui::GetFontSize();

if (is_open) {
    ImGui::GetWindowDrawList()->AddText(ImGui::GetFont(), font_size, cursor_pos, text_color, "▼");
} else {
    ImGui::GetWindowDrawList()->AddText(ImGui::GetFont(), font_size, cursor_pos, text_color, "▶");
}

// 创建不带默认箭头的折叠标题
if (ImGui::TreeNodeEx("日期选择器", ImGuiTreeNodeFlags_CollapsingHeader | ImGuiTreeNodeFlags_NoTreePushOnOpen | ImGuiTreeNodeFlags_NoArrow)) {
    is_open = !is_open;
}

// 绘制日期选择器内容
if (is_open) {
    ImGui::Text("选择日期：");
    // 这里放你的日期选择器UI逻辑
}

ImGui::PopID();

方法二：结合自定义字体替换图标 #

如果你的项目使用了带图标的字体（如Font Awesome、Material Icons），可以直接用字体图标替换默认箭头：

1. 确保自定义字体已正确加载到ImGui
2. 沿用方法一的逻辑，把绘制文本的部分换成字体对应的图标字符即可，比如用Font Awesome的\uf078（向下箭头）和\uf054（向右箭头）

注意事项 #

• 方法一仅影响当前组件，不会修改全局其他Collapsing Header的样式
• 手动绘制图标时，利用ImGui::SameLine和ItemInnerSpacing参数保证和标题的间距对齐
• 若需复杂图标，可使用ImGui::GetWindowDrawList()绘制自定义图形（如矩形、三角形）

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