KTangram Preview

在 VS Code 中把 KTangram JSON 即时渲染成 Android 页面。编辑、预览、定位和调试都在一个窗口完成，不需要下载 KTangram 工程，也不需要额外启动 Web 服务。

开始使用

1. 安装扩展并在 VS Code 中打开一个 KTangram JSON 文件。
2. 打开命令面板，执行 KTangram: Open Preview to Side。
3. 继续编辑 JSON，右侧设备画面会自动更新。
4. 开启“定位”后点击预览组件，可以直接跳到对应 JSON；移动编辑器光标，也可以反向定位预览组件。

扩展默认跟随当前活动的 JSON 文件。未保存的修改同样可以实时预览；JSON 暂时写错时会标出诊断，并保留最后一次有效画面。

主要功能

实时设备预览

• JSON 修改后自动刷新，无需反复保存或重新打开页面。
• 内置多款 Android 手机和 Pad 尺寸，支持缩放、适应窗口、旋转、Dark、RTL 和节点标识。
• 支持常见 KTangram 容器、文本、图片、列表、开关、Action 和布局属性。

双向定位与组件检查

• 点击预览组件，定位到对应 JSON 节点。
• 从编辑器光标反向高亮当前组件。
• 以可点击的嵌套层级查看当前 View 到顶级 View 的结构。
• 检查配置值、解析结果、数据来源、Action 和布局信息。

Android 资源与画面对比

• 解析工作区中的 res/values*、drawable* 和 mipmap*，支持语言、深色模式和屏幕密度回退。
• 可选择 Android 截图作为金标，在 Web、Android 和叠图模式之间切换。
• 支持导出当前预览截图，方便提交评审或核对还原度。

常用命令

常用设置

• ktangram.preview.followActiveEditor：是否跟随当前活动 JSON。
• ktangram.preview.defaultDevice：默认设备尺寸。
• ktangram.preview.defaultScale：默认缩放或适应窗口。
• ktangram.resources.androidResRoots：Android res 资源目录。
• ktangram.preview.goldenRoots：Android 金标截图目录。

所有设置都可以在 VS Code Settings 中搜索 KTangram 查看。

权限与隐私

• 基础 JSON 渲染在本机完成。
• 外部能力使用的配置不会写入普通 Settings、Webview 或输出日志。
• 只有使用远程图片、截图或用户主动配置的外部能力时才会发生对应网络访问。
• 执行外部命令、截图和 AI 生成等高级能力前要求工作区受信任。

运行要求

• VS Code 1.96 或更高版本。
• 基础编辑和预览无需额外项目或运行环境。
• Android 本地资源、金标和部分高级能力需要在工作区中提供对应文件或工具。

反馈与主页

sunmenggame.chat

License

Copyright (c) 2026 Sun Meng. All rights reserved.