Skip to main content
Version: 3.x

总结

至此，图像查看器已开发完成，让我们简要回顾整个开发历程。

开发前期，通过预先体验目标程序，梳理出各项功能需求，并对程序架构进行设计。将程序划分为业务和界面两大模块，进一步细粒度拆分功能模块与组件，确定大致实现方案。

在搭建开发环境环节，利用 LCUI 的命令行工具 @lcui/cli 创建项目，并在此基础上进行定制化开发。

开发过程中，先完成业务层的图像缩放控制器、图像文件收集器、文件信息读取器以及通用工具等模块的实现。在开发界面时，采用组件化方式将界面拆解为多个组件，每个组件从以下几个方面进行实现：

  • 状态： 对组件的数据结构进行定义，并实现初始化和销毁方法。
  • 更新： 依据组件状态更新展示内容。
  • 操作： 定义用于改变组件状态和行为的函数。
  • 事件： 添加事件处理函数，以响应用户操作。

界面交互的实现遵循 “响应事件 -> 执行操作 -> 修改状态 -> 更新 -> 绘制” 的流程。其中，绘制阶段由 LCUI 库的渲染引擎完成，它依据组件结构、布局和样式规则进行绘制。

在学习和实践过程中，我们熟悉了多个组件的用法：

  • Widget： 作为基础组件，类似于 HTML 中的 <div>，但不具备文本显示功能。
  • Text： 专门用于显示文本内容的组件，满足文本展示需求。
  • ScrollArea： 提供滚动状态管理的滚动区域，适用于内容超出显示区域的情况。
  • ScrollAreaContent： 作为滚动区域的内容容器，承载具体的显示内容。
  • Scrollbar： 与 ScrollArea 配合使用的滚动条组件，方便用户浏览内容。

此外，我们还开发了切换按钮（ToggleButton）、滑块（Slider）等新组件，丰富了界面的交互元素。

在程序测试阶段，我们发现并解决了以下问题：

  • 文件路径参数被双引号包裹： 在程序以图片文件的打开方式被调用时，传入的文件路径参数会被双引号包裹。为确保能够正确打开文件，我们增加了对文件路径首尾双引号的处理。
  • 资源文件加载失败： 程序在加载资源文件时使用的是相对于安装目录的路径，但实际解析时却被当作相对于工作目录的路径。为解决这一问题，我们通过根据程序的可执行文件路径获取安装路径，并将安装目录设置为工作目录的方式，确保了资源文件的正确加载。
  • 字符串编码： 由于传入的文件路径参数采用默认编码方式，而设置窗口标题的函数仅支持传入宽字符串，因此我们使用 mbstowcs() 函数进行字符串编码转换。同时，在程序初始化时调用 setlocale() 函数加载系统默认编码环境，以确保编码转换的正确性。
  • 文件编码： 当源文件包含中文字符时，编译器会给出 该文件包含不能在当前代码页(936)中表示的字符 的警告。通过将文件以 UTF-8 with BOM 编码方式保存，成功解决了这一问题。

LCUI 的现状和未来​

当前，我们仅使用 TypeScript 来声明组件的模块依赖、结构、事件绑定和状态绑定等偏静态的内容。部分开发者可能期望使用 TypeScript 实现更多功能，如条件渲染、列表渲染，甚至涵盖全部的交互逻辑，而不只是将其作为高级版的 XML 使用。然而，实现这些功能的复杂度和成本较高，并且受限于作者的兴趣和时间，为 @lcui/cli 的 TypeScript 预处理器添加这些功能可能需要较长时间。

LCUI 作为一个轻量级 GUI 开发库，在功能、性能、文档以及 UI 组件等方面仍处于发展阶段，与其他成熟的 GUI 库 / 框架相比存在一定差距。目前，其较适合以下应用场景：

  1. 开发技术体验： 适用于体验使用 TypeScript、React、Tailwind CSS 等 Web 开发技术进行界面开发，并将代码转译为 C 代码，以便更好地与 C/C++ 项目集成。
  2. 简单界面开发： 适合用于实现内容结构简单、动态交互需求较低的基础界面。
  3. 教学： 如本教程所示，LCUI 适合用于 GUI 开发实战教学，帮助开发者熟悉 GUI 开发。

练习​

若想进一步巩固所学知识，提升开发技能，你可以尝试以下任务：

  • 添加浅色和深色主题切换功能。
  • 优化 LCUI 库的图像缩放算法，提升图像缩放质量和性能。
  • 添加图像旋转、裁剪等基础的图像编辑功能。
  • 使用其他 GUI 库或 GUI 开发技术实现此程序。
  • 添加多语言支持。