dxUi 模块详解

我们在之前的文档中已经学习了如何使用 dxUi 模块来构建用户界面。现在，让我们深入了解 dxUi 模块的内部结构，看看它是由哪些文件组成的，以及每个文件分别承担什么角色。

模块文件结构

dxUi 并非一个单一的巨大文件，而是由一系列功能明确、相互协作的 JavaScript 文件组成的模块集合。这种模块化的设计使得代码更易于维护和扩展。

虽然在开发时我们通常只需要导入主入口文件：

import dxui from "../dxmodules/dxUi.js";

但 dxUi.js 在内部会自动加载所有其他相关的 UI 组件和工具文件。

以下是 dxUi 模块包含的核心文件及其功能说明：

文件名	功能描述
核心文件
`dxUi.js`	模块的主入口文件，负责初始化 UI 系统 (`dxui.init`)、加载主屏幕 (`dxui.loadMain`) 和管理所有其他子模块。
`uiBase.js`	所有 UI 控件的基类。它定义了所有控件共享的通用属性和方法，如 `setPos()`、`setSize()`、`on()` 等。
`uiUtils.js`	工具库，包含一系列常量和辅助函数，例如事件类型 (`EVENT`)、图层 (`LAYER`)、颜色转换等。
`uiStyle.js`	样式引擎，用于创建和管理控件的样式，如背景色、边框、阴影等。
`uiFont.js`	字体管理器，用于加载和应用自定义字体。
控件文件
`uiView.js`	视图/容器 (`View`)，最基础的矩形容器，可作为其他控件的父节点。
`uiLabel.js`	文本标签 (`Label`)，用于显示静态文本。
`uiButton.js`	按钮 (`Button`)，响应点击事件的基础控件。
`uiImage.js`	图像 (`Image`)，用于显示图片。
`uiCheckbox.js`	复选框 (`Checkbox`)。
`uiDropdown.js`	下拉列表 (`Dropdown`)。
`uiKeyboard.js`	虚拟键盘 (`Keyboard`)，用于文本输入。
`uiLine.js`	线条 (`Line`)，用于绘制线条。
`uiList.js`	列表 (`List`)。
`uiSlider.js`	滑块 (`Slider`)。
`uiSwitch.js`	开关 (`Switch`)。
`uiTextarea.js`	文本输入区 (`Textarea`)。
`uiButtons.js`	按钮矩阵 (`ButtonMatrix`)，用于创建包含多个按钮的网格布局。

统一入口: dxUi.js 作为整个模块的门面，汇集了所有其他文件的功能，并以 dxui.Button、dxui.Label 这样的形式统一对外提供。
继承关系: 除了 uiUtils.js、uiStyle.js 和 uiFont.js 等工具类文件，所有的控件文件（如 uiButton.js）都继承自 uiBase.js。这就是为什么不同的控件实例都能调用 setPos()、setSize() 等相同方法的原因。
按需使用: 了解每个文件的作用后，当您需要深入定制某个控件的行为或样式时，就可以直接查阅对应的源文件（例如 dxmodules/uiButton.js），了解其特有的方法和属性。

理解 dxUi 的文件结构有助于您更深入地掌握 UI 开发，并在遇到问题时能更快速地定位和解决。