今年，Apple 引入了新的 API，使我们能够以全新的方式构建自定义容器视图。本周，我们将学习 SwiftUI 新的分解 API 的优势。容器视图容器视图就是一个可以包含其他视图的视图。...API 构建自定义视图的简单示例，包含 Card、Carousel 和 Magazine 容器视图。...Magazine：一个自定义的容器视图，允许你将第一个子视图设置为大图，其他子视图横向排列展示。类似于杂志布局。...运行这个Demo此代码展示了如何在 SwiftUI 中构建自定义的容器视图，灵活地将不同的布局封装在容器中，以便在应用中多次复用这些布局模式。...总结通过使用 SwiftUI 新引入的 API 以及容器视图，你可以轻松构建具有良好复用性的自定义布局，提升应用的开发效率和代码可维护性。
近期推荐 掌握 SwiftUI 的容器视图基础篇 (Mastering container views in SwiftUI....Basics)[7] Majid Jabrayilov[8] 长期以来，由于缺少某些高级特性，SwiftUI 开发者一直未能构建出能与官方容器视图相匹敌的自定义容器。...在 WWDC24 上，苹果大幅增强了 Group 和 ForEach 的功能，同时引入了容器值传递的新特性。通过这些创新的 API，开发者现在可以构建具有官方同等功能的强大容器视图。...这篇文章是关于自定义容器的系列文章的开篇，建议开发者继续关注后续内容，以充分利用这些强大的新功能。...SwiftData 中的数据标识符: https://t.ly/zDBMS [6] Fatbobman( 东坡肘子 ): https://x.com/fatbobman [7] 掌握 SwiftUI 的容器视图基础篇
可以填充颜色(使用tintColor来定义导航栏中的图标与文字颜色；使用 barTintColor来填充导航栏背景色) API注释 导航栏包含于导航控制器（一个管理显示自定义视图层级结构的程序对象）中。...4.1.5 标签栏 标签栏让用户在不同的子任务、视图和模式中进行切换。 ? ? API注释 标签栏包含在标签栏控制器中，该控制器用于管理自定义视图的展示形式。...4.2.4 容器视图控制器 容器视图控制器采用自定义的方式来管理和呈现它的视图控制器或一系列子视图。...API注释 想要了解如何在代码中定义容器视图控制器，请参考UIViewController Class Reference. 容器视图控制器不存在任何预先定义好的外观或者行为。...用容器视图控制器来呈现内容，使用户可以通过控制器来以自定义的方式进行导航。 先问问你自己是不是必须用到容器视图控制器。用户会更习惯诸如对分视图、或者是标签栏视图这类他们所熟知的东西。
正文 一.日常安利 VS code VS vode特点： 开源，免费； 自定义配置 集成git 智能提示强大 支持各种文件格式（html/jade/css/less/sass/xml） 调试功能强大...再也不用折腾环境了， 使用GitHub Gist同步多台计算机上的设置，代码段，主题，文件图标，启动，键绑定，工作区和扩展。 ?...7.vscode-icons 显示Visual Studio代码的图标，目前该插件已被vscode内部支持："文件" -> "首选项" -> "文件图标主题" ?...19.Azure Storage VS Code的Azure存储扩展允许您部署静态网站并浏览Azure Blob容器，文件共享，表和队列。...22.Todo Tree 此扩展可以快速搜索（使用ripgrep）您的工作区以获取TODO和FIXME等注释标记，并在资源管理器窗格的树视图中显示它们。
4.1 安装 Nocalhost 插件Nocalhost 支持 VScode JetBrains，这里我们主要介绍 VScode 插件安装参考官网文档。...打开 VScode，点击左侧的 Extension 按钮 图片 图标在搜索框中输入 Nocalhost 选择 Nocalhost 插件，并点击 Install 按钮图片4.2 安装 Rainbond我们选择...基于主机安装 Rainbond 4.3 Nocalhost 对接 Rainbond 集群获取 kubeconfig 文件，进入 Rainbond 集群视图 -> 点击节点配置 -> kubeconfig...那么接下来我们在本地 Vscode 中选择其中一个组件进行开发，这里为了效果更明显，选择开发 pig-ui 组件。...gred5f1c 这个容器，剩下那个容器是 Rainbond 的 Mesh 容器，用于内部通信，不可替换提示指定源代码目录，选择我们刚刚克隆下来的代码目录。
，而无需重建镜像或重新启动容器。...4.1 安装 Nocalhost 插件 Nocalhost 支持 VScode JetBrains ，这里我们主要介绍 VScode 插件安装[3]参考官网文档。...打开 VScode，点击左侧的 Extension 按钮 图标 在搜索框中输入 Nocalhost 选择 Nocalhost 插件，并点击 Install 按钮 4.2 安装 Rainbond 我们选择...基于主机安装 Rainbond[4] 4.3 Nocalhost 对接 Rainbond 集群 获取 kubeconfig 文件，进入 Rainbond 集群视图 -> 点击节点配置 -> kubeconfig...我们点击旁边的进入开发模式， 提示选择容器，我们选择 gred5f1c 这个容器，剩下那个容器是 Rainbond 的 Mesh 容器，用于内部通信，不可替换 提示指定源代码目录，选择我们刚刚克隆下来的代码目录
自定义命令：对选定文件执行自定义 AI 命令。你可以根据自己的需求设置命令，让工作流程更加个性化和高效。 变量重命名：对变量名不满意时，使用 AI 给出的变量名建议，给其重命名变量。...安装步骤 安装其实特别的简单，跟其他IDE（VSCODE）插件安装方式一样！不需要你额外的去下载安装包！...第一步：打开 VSCode，点击左侧活动栏中的扩展图标（四个方块组成的图标） 第二步：在搜索框中输入 “Aide”，找到由 nicepkg 开发的 Aide 插件 最后一步，点击 “安装” 按钮，等待插件安装完成即可...为什么用它，是因为它的API标准是兼容OpenAI的API标准的，可以直接替换使用。像文心一言好像就不行。...如果你还没有体验过，不妨去 VSCode中安装试试，相信你会爱上这款实用的编程助手。
至此，一个 vscode 的开发环境就已经搭建完毕，接下来就是了解项目结构，以及 vscode 插件的 api 了。...自定义扩展工作台 在 vscode 中有几个地方可以用于扩展，具体可看Extending Workbench | Visual Studio Code Extension API 左侧图标（活动栏）...自定义颜色、图标主题 在 vscode 中分别有三部分的主题可以设置 主题 范围 推荐 文件图标主题 资源管理器内的文件前的图标 Material Icon Theme 颜色主题 代码编辑器以及整体颜色主题...WebView 使用 webView 可以在 vscode 内显示自定义的网页内容，丰富 vscode 功能，但所消耗的性能是肯定有的，就有可能影响 vscode 的运行速度。...参考文章 VSCode 插件开发全攻略（一）概览 - 我是小茗同学 - 博客园 (cnblogs.com) Extension API | Visual Studio Code Extension API
https://github.com/zhontai/admin.ui.plus 技术栈 node 16+ vue 3.x typescript element plus 特点 界面还可以，自定义度高...，适配移动端 自动生成api接口定义文件 没有过度封装 系统权限封装基本满足大部分项目 推荐环境 Node v18 VsCode VsCode插件 TypeScript Vue Plugin (...启动运行 安装好nodejs18+,vscode，执行 npm i && npm run dev 运行即可 启动地址：http://localhost:8100 默认会跳转到登录页，账号密码 admin...src/layout/footer/index.vue src/layout/stores/themeConfig.ts 更新logo 可以从iconfont字体网站找个字体文件当logo,然后再前往图标工场生成需要的图片...更新api接口 使用 npm run gen:api 生成，将会根据接口文档生成对应的模型，接口ts文件 如果加了新的模块，配置 /gen/gen-api.js 中的apis即可 const apis
主要集中在以下的更改： 自定义上下文菜单操作，如：平时我们右键的菜单栏 在侧边栏创建自定义交互，如：npm插件安装后在资源管理中-主侧边栏添加了一个npm操作视图 定义一个新的活动栏视图，如：Git插件安装后左侧活动栏中的图标...3种外观的更改： 更改原代码的颜色 更改vscode ui的颜色 添加自定义文件图标 语言类（Eslint、代码提示诊断功能插件等） 语言扩展（例如：悬停、转到定义、诊断错误等等），我们常见的就是eslint...自定义编程语言 添加或替换编程语言的语法 扩展现有的语法 纯工具类主要是一些第三方工具集成到vscode中，如常用的git插件、Docker插件，一般这类插件通过新增容器和视图的方式对vscode进行扩展...可以扩展自定义视图容器 状态栏（Status Bar）：提供有关工作区的当前活动文件的上下文信息，左侧表示整个工作区的状态，右侧表示当前活动文件的状态 如图二所示items主要包含 视图（View）：视图可以通过...ID，views视图会通过该ID与容器建立关联关系；title导航入口名称，当鼠标hover上去后显示的名字；icon导航入口的图标，官方建议使用24*24、单色、SVG格式的文件 配置了活动栏，我们需要对其绑定对应的视图配置
那么我们就以开发一个简易的大模型对话插件，来探究一下vscode插件开发到发布的流程，研究一下文心一言大模型api的接入 跟着操作大约30-60分钟，你需要 安装vscode，npm/yarn等，node...版本 >12.0 最好有时间提前看一看 vscode 官网api开发文档[1] 万字长文 Action!...api发现，resolveWebView 返回一个 Thenable，可以在解析完成后拿到webview实例 // 但是这个函数是在webview容器第一次显示时自动执行，不需要手动调用，不知道怎么拿到...Chat-siderbar绑定 下面我们需要在package.json中将视图注册到侧边栏中，并指定名字，图标等 打开package.json 文件，修改如下 将原本的 contributes 字段替换一下...我们的视图和双向通讯在插件侧已经完成了，我们试一下！直接F5运行，打开拓展开发宿主 image.png 点击左侧栏图标，会看见我们deweb页面加载出来啦！
安装成功后，会出现这个图标 ? 如果开发是vscode+git,这个插件强烈推荐，一眼就能看到是谁改了你的代码?...查看作者的历史 比较: 比较分支 比较有 跨提交比较文件 其他特点: Github化身 挑选提交 重新提交 从提交创建分支 树状视图中的视图提交信息(所有更改的快照) 合并和变基 ?...object); 在调试的时候很方便实用 One Dark Pro 截止目前下载量：7.8M 编辑器颜色主题，一直是我喜欢的风格， Material Icon Theme 截止目前下载量：4.8M 很漂亮的图标库...，用于编辑器左侧树状菜单文件和文件夹图标显示 ?...自定义代码片段 在命令面板中输入Configure User Snippets ?
VS vode特点： 开源，免费； 自定义配置 集成git 智能提示强大 支持各种文件格式（html/jade/css/less/sass/xml） 调试功能强大 各种方便的快捷键 强大的插件扩展 ...再也不用折腾环境了，使用GitHub Gist同步多台计算机上的设置，代码段，主题，文件图标，启动，键绑定，工作区和扩展。...vscode-icons 显示Visual Studio代码的图标，目前该插件已被vscode内部支持：”文件” -> “首选项” -> “文件图标主题”。...Azure Storage VS Code的Azure存储扩展允许您部署静态网站并浏览Azure Blob容器，文件共享，表和队列。按照本教程从VS Code部署Web应用程序到Azure存储。...Todo Tree 此扩展可以快速搜索（使用ripgrep）您的工作区以获取TODO和FIXME等注释标记，并在资源管理器窗格的树视图中显示它们。
extension", // 版本号 semver格式 "version": "0.0.1", // 在插件市场展示的图标 "icon": "img/icon.png", // 发布者名字..."publisher": "ayqy", // vscode版本要求 "engines": { "vscode": "^1.19.0" }, // 所属分类，可选Languages,...grammars 新增TextMate语法描述，语法高亮 themes 添加定制主题 snippets 添加代码片段 jsonValidation 添加json格式校验 views 新增左侧文件查看器视图和调试视图分栏...scm/resource/context 文件变动菜单 scm/change/title 左侧视图 文件查看器分栏 view/title 调试视图分栏 view/item/context P.S...以命令形式提供（即上面提到的“IDE自身的”命令），例如vscode.previewHtml、vscode.openFolder、editorScroll等等 基于协议的扩展 插件进程与IDE之间通过特定协议来通信
使用扩展的好处 红帽OpenShift(大地容器平台)是一个容器应用程序平台，可将Kubernetes 和容器的功能引入企业。...Token 令牌：使用承载令牌登录以对API服务器进行身份验证。...三 演示 提示: 因为本人常用的编辑器为VSCODE, 所以通过VSCODE的同一个插件做演示....随后，您应该重新加载Visual Studio Code，并且资源管理器视图中将有一个OpenShift图标。...单击浏览器视图中的OpenShift图标后，将激活“ OpenShift应用程序浏览器”视图。 然后，您需要登录到正在运行的OpenShift集群（ –登录到集群）。
你可以直接在Visual Studio Code中运行包括恢复和使用 project.json中的项目引用，也可以在.vscode/tasks.json中自定义任务。...VSCode已经集成了Git，你的系统如果已经安装好的话，可直接使用。你可以在Git视图里轻松的create repository，commits，和push。...VSCode编辑器界面也有很多非常棒的功能。当有黄色灯泡小图标时，你会发现没有在没有引用的声明下有下划线，可以使用⌘.自动修复。你的类和方法上会显示它们在项目中有多少次被引用。...点击Git视图，再点击Initialize Git repository按钮。...添加一个提交信息，敲击回车或点击选择相应的小图标进行提交文件。
VSCode 提供以下扩展能力：代码自动补全、自定义命令/菜单/快捷键、悬浮提示、自定义跳转、主题定制、自定义 WebView 等等。你可以根据自己的需要随意组合使用。...在 package.json 的 contributes 下添加自定义的 Snippets。language 表示在某种特定语言下，对应的代码片段才会被加载生效。path 表示代码片段文件的存放路径。...toplevelfilename} 当打开包含某个命名规则的文件夹时 onFileSystem:${scheme} 以某个协议（ftp/sftp/ssh 等）打开文件或文件夹时 onView:${viewId} 指定 id 的视图展开时...// 在插件市场展示的图标 "icon": "icon.png", // 发布者名字 "publisher": "chenmenglan", // 插件最低支持的vscode版本号...丰富的 扩展 API 让一切都比想象中来的简单，Just do what you want~ 插件推荐 Auto Close Tag，自动补全关闭标签。
菜单-视图 最上方会有面包屑导航，可以方便的查看在工作区的位置。 左边会有大纲导航，方便查看变量级别。 右边有全文跳转，方便在全文中进行跳转。...主题 包括颜色主题或文件图标主题 集成终端/terminal Ctrl+`，打开终端 Ctrl+Shift+`，打开新的终端 Ctrl+Home，滚动到顶 Ctrl+End，滚动到底 如何更好地学习VS...命令行高级功能： --status/-s：查看信息 extensions-dir ：查看extension的根目录 打造自己的主题 https://code.visualstudio.com/api...远程开发 VSCode Remote，允许将容器/远程计算机/WSL作为完整的开发环境。...插件开发：https://code.visualstudio.com/api VSCode插件样例：https://code.visualstudio.com/api/extension-guides/
，通过事件解析引擎解析用户自定义事件并完成事件的绑定，完成解析赋值以及事件绑定后进行视图的渲染，最终将目标页面展示到屏幕。...如果 API 应用程序需要向客户发送电子邮件，它也会使用现有的电子邮件系统。 该容器图的图例如下，主要是引入了数据库、APP、浏览器的图例。...可以在部署图中随意使用 Amazon Web Services、Azure 等提供的图标，只需确保被使用的任何图标都包含在图例中，不产生歧义。...，通过事件解析引擎解析用户自定义事件并完成事件的绑定，完成解析赋值以及事件绑定后进行视图的渲染，最终将目标页面展示到屏幕。...，通过事件解析引擎解析用户自定义事件并完成事件的绑定，完成解析赋值以及事件绑定后进行视图的渲染，最终将目标页面展示到屏幕。
，启动，键绑定，工作区和扩展 - Code Runner 万能语言运行环境, 不用搭建各种语言的开发环境，选中一段代码直接运行，非常适合学习或测试各种开发语言 - Docker 管理本地容器...- filesize 在状态栏中显示当前文件大小，点击后还可以看到详细创建、修改时间 - vscode-icons 文件图标，实现对各种文件类型的文件前的图标进行优化显示，，可以直接通过文件的图标快速知道文件类型...itemName=ms-vscode-remote.vscode-remote-extensionpack - Remote - SSH：基于 SSH 的远程开发 - Remote - Containers...：基于 Docker 容器的远程开发 - Remote - WSL：基于 Windows Subsystem for Linux(wsl) 的远程开发 Format - Beautify 代码格式化（Javascript...- Prettier 严格基于规则的代码格式化程序, 解析代码并使用自定义规则重新打印代码，从而实现风格一致 - SonarLint Language ### Java Java Extension Pack
领取专属 10元无门槛券
手把手带您无忧上云
云服务器
ICP备案
云直播
对象存储
实时音视频
