FlatUI控件实战从按钮到滑条的10个必备组件完全指南【免费下载链接】flatuiEfficient Immediate Mode UI for Games项目地址: https://gitcode.com/gh_mirrors/flatu/flatuiFlatUI是一款专为游戏与图形应用设计的即时模式Immediate ModeC GUI 库它以高效、简洁著称每一帧你直接声明界面库自动完成布局、渲染与事件分发无需维护复杂的控件对象树。本指南面向刚接触 FlatUI 的新手用 10 个高频组件带你快速上手游戏 UI 开发从最常用的按钮到交互丰富的滑条一篇文章全部讲透。FlatUI 的完整示例代码位于sample/目录建议对照阅读sample/corgui/corgui.cpp按钮与动画、sample/text_layout/文本布局、sample/text_html_label/富文本标签。1. 按钮FlatUI 交互的入门第一课在 FlatUI 中按钮本质上是可交互的分组 事件检测。以官方示例中的柯基点击按钮为例它用ToggleImageButton组合图片素材再通过CheckEvent()返回的事件位掩码判断是否被点击用kEventWentUp判断按下并抬起一次完整点击用kEventWentDown判断刚按下事件是位标志需用位运算检测参考 corgui.cpp 中corgi_button flatui::kEventWentUp的用法即可在点击时触发加分、播放动画等逻辑。交互元素必须设置唯一 ID否则键盘/手柄焦点导航会错乱。2. 文本标签Label 的三种灵活用法Label()是 FlatUI 最基础的文本控件支持三种形态单行标签只需传入文本与高度宽度自动适配多行标签额外传入vec2尺寸限制自动换行对齐标签传入TextAlignment实现居中、左对齐等文本颜色用SetTextColor()设置动画中可平滑过渡颜色。需要…截断时调用SetTextEllipsis()。完整签名见 flatui.h。3. 图片控件Image 与 Nine-Patch 九宫格Image()只需传入纹理与纵向尺寸横向自动按比例缩放非常适合做背景、角色立绘。而ImageBackgroundNinePatch()支持九宫格拉伸是制作可缩放不变形按钮边框的利器只需传入 UV 坐标形式的vec4(x0, y0, x1, y1)指定可拉伸区域。4. 输入框Edit 文本编辑控件Edit()是 FlatUI 内置的文本输入控件返回Event并接受EditStatus状态指针配合std::string保存用户输入。它支持单行/多行模式尺寸传 0 表示自动扩展文本对齐参数状态机kEditStatusInEdit编辑中、kEditStatusFinished完成、kEditStatusCanceled按 Esc 取消底层实现可参考 micro_edit.h。5. 分组布局StartGroup 与 EndGroupFlatUI 没有父容器对象而是用成对调用StartGroup()/EndGroup()组织布局支持嵌套。布局方向由Layout枚举控制水平、垂直、覆盖等配合PositionGroup()定位、SetMargin()设置边距。每次分组可传入唯一 ID用于动画与事件定位。参考 flatui.h。6. 滚动区域StartScroll 与 EndScroll内容超出窗口时用StartScroll()开启滚动分组传入可视窗口大小并通过vec2* offset输出当前滚动位置需由调用方跨帧保存。滚动速度、拖拽阈值均可通过SetScrollSpeed()和SetDragStartThreshold()调整支持鼠标滚轮、触摸拖拽与手柄三种输入方式。参考 flatui.h。7. 滑条StartSlider 的核心用法滑条是本文的重头戏。StartSlider(direction, scroll_margin, value)把一个分组变成滑条direction控制水平/垂直value以 float 指针形式输出当前值。务必遵循调用顺序——StartSlider()紧跟StartGroup()之后EndSlider()紧跟EndGroup()之前。参考 flatui.h。8. 富文本标签HtmlLabel 轻量排版HtmlLabel()支持解析简单 HTML 子集包括段落、标题、换行与锚点标签适合聊天框、说明弹窗等需要轻量排版的场景。示例位于sample/text_html_label/它结合了 FlatUI 的 Unicode 排版能力。9. 自定义控件CustomElement 自由绘制内置控件不够用时CustomElement()允许你指定虚拟尺寸与渲染回调在回调中用RenderTexture()或RenderTextureNinePatch()绘制任意内容。这是实现进度条、迷你地图等自绘控件的标准途径。参考 flatui.h。10. 动画组件Animatable 与 AddSpriteFlatUI 内置基于 motive 引擎的动画系统需在Run()传入MotiveEngineAnimatable()创建并读取动画值StartAnimation()设定目标值与速度支持缓入缓出、弹簧两种曲线AddSprite()生成一次性飘动元素如得分数字、爱心特效配合DrawSprites()绘制官方示例中点击柯基后飘出的爱心与分数正是用这套 API 实现的。快速上手3 步搭建第一个 FlatUI 界面初始化创建AssetManager、FontManager、InputSystem可选MotiveEngine然后调用Run()传入 GUI 定义函数布局与渲染各执行一次声明界面在 GUI 定义函数里用SetVirtualResolution()设定虚拟分辨率再组合上述控件处理事件通过事件位掩码响应用户操作驱动游戏逻辑需要源码时克隆仓库即可开始实战git clone https://gitcode.com/gh_mirrors/flatu/flatui写在最后FlatUI 的即时模式理念让 UI 代码直白可控——所见即所写没有状态同步的烦恼。掌握这 10 个组件你已经能搭建出包含按钮、表单、列表、滑条和动画的完整游戏界面。深入阅读include/flatui/flatui.h头文件注释与sample/各示例你将解锁更多高阶玩法。祝你编码愉快【免费下载链接】flatuiEfficient Immediate Mode UI for Games项目地址: https://gitcode.com/gh_mirrors/flatu/flatui创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考
FlatUI控件实战：从按钮到滑条的10个必备组件完全指南
FlatUI控件实战从按钮到滑条的10个必备组件完全指南【免费下载链接】flatuiEfficient Immediate Mode UI for Games项目地址: https://gitcode.com/gh_mirrors/flatu/flatuiFlatUI是一款专为游戏与图形应用设计的即时模式Immediate ModeC GUI 库它以高效、简洁著称每一帧你直接声明界面库自动完成布局、渲染与事件分发无需维护复杂的控件对象树。本指南面向刚接触 FlatUI 的新手用 10 个高频组件带你快速上手游戏 UI 开发从最常用的按钮到交互丰富的滑条一篇文章全部讲透。FlatUI 的完整示例代码位于sample/目录建议对照阅读sample/corgui/corgui.cpp按钮与动画、sample/text_layout/文本布局、sample/text_html_label/富文本标签。1. 按钮FlatUI 交互的入门第一课在 FlatUI 中按钮本质上是可交互的分组 事件检测。以官方示例中的柯基点击按钮为例它用ToggleImageButton组合图片素材再通过CheckEvent()返回的事件位掩码判断是否被点击用kEventWentUp判断按下并抬起一次完整点击用kEventWentDown判断刚按下事件是位标志需用位运算检测参考 corgui.cpp 中corgi_button flatui::kEventWentUp的用法即可在点击时触发加分、播放动画等逻辑。交互元素必须设置唯一 ID否则键盘/手柄焦点导航会错乱。2. 文本标签Label 的三种灵活用法Label()是 FlatUI 最基础的文本控件支持三种形态单行标签只需传入文本与高度宽度自动适配多行标签额外传入vec2尺寸限制自动换行对齐标签传入TextAlignment实现居中、左对齐等文本颜色用SetTextColor()设置动画中可平滑过渡颜色。需要…截断时调用SetTextEllipsis()。完整签名见 flatui.h。3. 图片控件Image 与 Nine-Patch 九宫格Image()只需传入纹理与纵向尺寸横向自动按比例缩放非常适合做背景、角色立绘。而ImageBackgroundNinePatch()支持九宫格拉伸是制作可缩放不变形按钮边框的利器只需传入 UV 坐标形式的vec4(x0, y0, x1, y1)指定可拉伸区域。4. 输入框Edit 文本编辑控件Edit()是 FlatUI 内置的文本输入控件返回Event并接受EditStatus状态指针配合std::string保存用户输入。它支持单行/多行模式尺寸传 0 表示自动扩展文本对齐参数状态机kEditStatusInEdit编辑中、kEditStatusFinished完成、kEditStatusCanceled按 Esc 取消底层实现可参考 micro_edit.h。5. 分组布局StartGroup 与 EndGroupFlatUI 没有父容器对象而是用成对调用StartGroup()/EndGroup()组织布局支持嵌套。布局方向由Layout枚举控制水平、垂直、覆盖等配合PositionGroup()定位、SetMargin()设置边距。每次分组可传入唯一 ID用于动画与事件定位。参考 flatui.h。6. 滚动区域StartScroll 与 EndScroll内容超出窗口时用StartScroll()开启滚动分组传入可视窗口大小并通过vec2* offset输出当前滚动位置需由调用方跨帧保存。滚动速度、拖拽阈值均可通过SetScrollSpeed()和SetDragStartThreshold()调整支持鼠标滚轮、触摸拖拽与手柄三种输入方式。参考 flatui.h。7. 滑条StartSlider 的核心用法滑条是本文的重头戏。StartSlider(direction, scroll_margin, value)把一个分组变成滑条direction控制水平/垂直value以 float 指针形式输出当前值。务必遵循调用顺序——StartSlider()紧跟StartGroup()之后EndSlider()紧跟EndGroup()之前。参考 flatui.h。8. 富文本标签HtmlLabel 轻量排版HtmlLabel()支持解析简单 HTML 子集包括段落、标题、换行与锚点标签适合聊天框、说明弹窗等需要轻量排版的场景。示例位于sample/text_html_label/它结合了 FlatUI 的 Unicode 排版能力。9. 自定义控件CustomElement 自由绘制内置控件不够用时CustomElement()允许你指定虚拟尺寸与渲染回调在回调中用RenderTexture()或RenderTextureNinePatch()绘制任意内容。这是实现进度条、迷你地图等自绘控件的标准途径。参考 flatui.h。10. 动画组件Animatable 与 AddSpriteFlatUI 内置基于 motive 引擎的动画系统需在Run()传入MotiveEngineAnimatable()创建并读取动画值StartAnimation()设定目标值与速度支持缓入缓出、弹簧两种曲线AddSprite()生成一次性飘动元素如得分数字、爱心特效配合DrawSprites()绘制官方示例中点击柯基后飘出的爱心与分数正是用这套 API 实现的。快速上手3 步搭建第一个 FlatUI 界面初始化创建AssetManager、FontManager、InputSystem可选MotiveEngine然后调用Run()传入 GUI 定义函数布局与渲染各执行一次声明界面在 GUI 定义函数里用SetVirtualResolution()设定虚拟分辨率再组合上述控件处理事件通过事件位掩码响应用户操作驱动游戏逻辑需要源码时克隆仓库即可开始实战git clone https://gitcode.com/gh_mirrors/flatu/flatui写在最后FlatUI 的即时模式理念让 UI 代码直白可控——所见即所写没有状态同步的烦恼。掌握这 10 个组件你已经能搭建出包含按钮、表单、列表、滑条和动画的完整游戏界面。深入阅读include/flatui/flatui.h头文件注释与sample/各示例你将解锁更多高阶玩法。祝你编码愉快【免费下载链接】flatuiEfficient Immediate Mode UI for Games项目地址: https://gitcode.com/gh_mirrors/flatu/flatui创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考