炫彩-未闻花名 UI 021

酷酷2012 · 发表于 2023-11-25 17:59:58

本帖最后由酷酷2012 于 2023-11-25 17:59 编辑

解压密码回复可见

解压密码：humui11-25

炫彩-未闻花名 UI 021

使用 json 文件配置自动生成 UI 框架

注意 json 内xml键的值必须是炫彩布局面板，而非其他xml

纯代码实现，没有使用炫彩IDE，但加载xml时，需要使用炫彩IDE进行创建炫彩布局面板

布局面板类似选择夹的某一个页面

炫彩IDE下载地址：http://www.xcgui.com/doc-ui/

以下是 json 格式的配置：

// by：未闻花名UI
// 所有数据都是可以配置和不配置的，若不配做则不创建
// 数组对象表示可以添加N个数据
// xml布局必须是 炫彩布局面板【LayoutPanel】

{
    // 窗口信息 title=标题 version=版本 width=宽度 height=高度 min-width=最小宽度 min-height=最小高度 theme=主题(dark & light)
    "window": {
        "title": "HUM Design.",
        "version": "0.21.1.20",
        "width": 1100,
        "height": 700,
        "min-width": 800,
        "min-height": 600,
        "theme": "dark"
    },
    // 用户信息
    "user": {},
    // 是否启用动画
    "transition": true,
    // 主窗口导航区域展开收缩按钮
    "transform-icon": "svg/transform.svg",
    // 顶级导航 其中包含  name=名字、icon=图标(SVG格式)、xml=炫彩布局面板
    "top-nav": [
        {
            "name": "首页",
            "icon": "svg/home.svg",
            "xml": "layout/home.xml"
        }
    ],
        // 可选导航
    "option-nav": {
        // 分类标签名
        "classify": "CONTENT",
        // name=名字、icon=图标(SVG格式)、xml=炫彩布局面板
        "nav": [
            {
                "name": "开始",
                "icon": "svg/start.svg",
                "xml": "layout/start.xml"
            }
        ]
    },
    // 底部按钮图标导航 其中包含 name=名字、icon=图标(SVG格式)、action=点击后触发事件的动作文本，通过中action区分事件类型
    "bottom-nav": [
        {
            "name": "消息",
            "icon": "svg/notif.svg",
            "action": "notif"
        }
    ],
    // 托盘图标布局、右键弹出菜单信息
    "tray": {
        "name": "未闻花名UI设计",
        "icon": "svg/resource.svg",
        // name=名字、icon=图标(SVG格式)、action=点击后触发事件的动作文本，通过中action区分事件类型
        "grid": [
            {
                "name": "未闻花名",
                "icon": "svg/hum.svg",
                "action": "hum"
            }
        ],
        // name=名字、action=点击后触发事件的动作文本，通过中action区分事件类型
        "link": [
            {
                "name": "主界面",
                "action": "show"
            }
        ]
    },
    // 弹出设置窗口导航，width=宽度 height=高度 auto-close=点击空白区域自动关闭 sign-out=是否绘制退出 sign-text=是否退出标题
    "setting-nav": {
        "width": 700,
        "height": 500,
        "auto-close": true,
        "sign-out": true,
        "sign-text": "LOG OUT",
        // 设置窗口导航 name=名字、icon=图标(SVG) xml=炫彩布局面板
        "nav": [
            {
                "name": "常规",
                "icon": "svg/general.svg",
                "xml": "layout/general.xml"
            }
        ]
    }
}