本文是笔者参加 2023 年 4 月 20 日 “SwiftUI 技术沙龙( 北京站 )” 活动的分享内容。基于记忆整理而成。...访问我的博客 www.fatbobman.com 可以获得最新的内容。开场白大家好,我是肘子。今天我要和大家交流的主题是 —— 打造可适配多平台的 SwiftUI 应用。...个人理解,SwiftUI 更像是一种编程哲学,掌握了它,便具备了很长一段时间内在苹果生态的不同平台上进行开发的能力。...SwiftUI 通过设定了某些兼容性的限制,促使开发者在做多平台适配时,不得不考虑平台特点的不同,并根据这些不同来做有针对性的调整。...SwiftUI 在不同平台中的“限制”( 每个平台的特点、优势、处理方式 )有了比较清晰的认识。
有关本次活动的情况,可以参阅 我在北京参加 SwiftUI 技术沙龙[1] 一文。...今天我要和大家交流的主题是 —— 打造可适配多平台的 SwiftUI 应用。 电影猎手 我们先看一个例子,然后再进入今天的正题。...个人理解,SwiftUI 更像是一种编程哲学,掌握了它,便具备了很长一段时间内在苹果生态的不同平台上进行开发的能力。...SwiftUI 在不同平台中的“限制”( 每个平台的特点、优势、处理方式 )有了比较清晰的认识。...盲目地使用这些解决兼容性的代码可能会破坏 SwiftUI 创建者的苦心,让开发者无法准确地体现不同平台的特色。
SwiftData 可轻松将一个 Swift 类转换为一个持久化模型,非常适合同 SwiftUI 一并使用。...虽然 SwiftUI 所提供的 API 让持久化模型的定义成为可能,但这种方式却颇为繁琐。...Core Data 通常是在 Xcode 内集成的 Schema Model 编辑器上使用,由此生成的 .xcdatamodeld 是真实之源,可被用于自动生成存根(stub)。...此外,将 SwiftUI 视图接入持久化模型只需使用一个新的 @Query 属性。...与 @State 和 @Binding 的使用方式相类似,每次底层数据发生变化时,@Query 可确保视图的自动重新渲染。
其实 SwiftData 配合 SwiftUI 才是 Apple 的初心,因此本文以 SwiftUI 的视角进行 SwiftData 的使用讲解。...通过@Query修饰模型数组,获取查询的数据。...案例 import SwiftData import SwiftUI // MARK: - 模型,必须是class @Model class TodoItem { var title: String...请输入标题", text: $todoItem.title) Toggle("是否完成", isOn: $todoItem.isCompleted) DatePicker...(\.locale, Locale(identifier: "zh_Hans_CN")) } .padding() .navigationTitle("编辑
当 SwiftUI 需要显示日期时,可以有多种选择,下面总结一些常见的使用方式。 选择显示 比较常见的方式是通过日期选择器选择某个日期后显示。...body: some View { DatePicker(selection: $birthDay, displayedComponents: [.hourAndMinute,.date...hh:mm:ss" return dateFormatter } var body: some View { VStack { DatePicker...1.0 SwiftUI 2.0 SwiftUI 2.0 之后,Text 可以直接显示日期,而且支持多种不同的形式。...} } 效果如下: SwiftUI 2.0.gif SwiftUI 3.0 WWDC21 推出了获取当前日期与格式化日期的新方法,因此 SwiftUI 3.0 之后显示日期更加方便。
SwiftUI Overlay Container[1] 是一个用于 SwiftUI 的视图容器组件。一个可定制、高效、便捷的视图管理器。...因此,我写了一个组件希望可以帮助开发者在 SwiftUI 中快速完成上述需求。但受限于当时的技术能力,很多的想法都没有能够很好地实现。...在 SwiftUI 中,描述视图已经变得十分的容易,因此我们完全可以将上述场景中的显示逻辑提炼出来,创建出一个可以覆盖更多使用场景的库,帮助开发者组织视图的显示风格和交互逻辑。...: delayForShowingNext 自动递补下一个视图的时间间隔 maximumNumberOfViewsInMultipleMode multiple 模式下,容器内可同时显示的最多视图数量...dismissAllView(in containers: [String], onlyShowing: Bool, animated flag: Bool) 撤销指定容器内的所有视图 可屏蔽动画 无论是直接调用容器管理器还是使用
Flutter受关注的最大原因应该是一份代码多平台运行吧,如果Apple将划分的四大平台需要四份UI代码,想想是一件多么恐怖的事情。...SwiftUI 所有Apple平台都是原生的 ---- SwiftUI在创造世界上最创新、最直观的用户界面方面积累了数十年的经验。...自动支持动态类型、暗模式、本地化和可访问性意味着您的第一行SwiftUI代码已经是您编写过的最强大的UI代码。 ?...当您在设计画布中工作时,您编辑的所有内容都与相邻编辑器中的代码完全同步。当您键入时,代码作为预览立即可见,并且您对该预览所做的任何更改都会立即出现在您的代码中。...Xcode会立即重新编译您的更改,并将其插入到您的应用程序的运行版本中,随时可见和可编辑。 ? 如何去学习SwiftUI ----
其中在线协同表格是在线文档的重要一个组成部分,纯前端表格在在线协同表格上有着得天独厚的优势:本身已经实现了单人操作在线文档的基本功能,并且身为控件,用户只需引入就可以在项目工程中为特性的业务赋予在线表格的能力...通过监听命令来实现简单的协同操作 何为命令机制: 命令就是将一步或多步的操作封装成一个可以执行的命令,执行这样的命令并传入对应的参数,就可以执行相关的一连串操作。...命令对于在线协同的应用: 命令的机制我们可以分清操作到底是代码执行的还是用户UI去操作的,而在线协同的场景中需要同步的内容就是用户UI的相关操作。...这里要注意的是,虽然有命令这样的机制,但其初衷并不是为了协同而设置的,所以有些情况下源生的命令并不能完全的符合协同的实现,需要根据实际情况自己进行改造来满足。...mod=attachment&aid=ODY2MjZ8OTBlY2E0NWF8MTY3MTc5MzE5Mnw2MjY3Nnw3NTM0Nw%3D%3D 可粘贴柯撤销的多人协同 那最原始通过命令的方式为什么无法将粘贴命令同步呢
1、简介 该大屏设计是一个可视化拖拽编辑的全开源项目,直观,酷炫,具有科技感的图表工具。内置的基础功能包括数据源,数据集,报表管理。...webpack:用于现代 JavaScript 应用程序的_静态模块打包工具 ES6:Javascript的新版本,ECMAScript6的简称。...利用ES6我们可以简化我们的JS代码,同时利用其提供的强大功能来快速实现JS逻辑。 vue-cli:Vue的脚手架工具,用于自动生成Vue项目的目录及文件。...flyway5.2.1 : 主要用于在你的应用版本不断升级的同时,升级你的数据库结构和里面的数据。...3、数据流程图 4、部分截图 拖拽编辑 日志大屏 5、最后 最后,防止找不到本篇文章,可以收藏点赞,方便翻阅查找。 还等什么呢?赶快来试试吧!项目源码和更详细的安装部署文档已经放到了云盘!
1简介 该大屏设计是一个可视化拖拽编辑的全开源项目,直观,酷炫,具有科技感的图表工具。内置的基础功能包括数据源,数据集,报表管理。...webpack:用于现代 JavaScript 应用程序的_静态模块打包工具 ES6:Javascript的新版本,ECMAScript6的简称。...利用ES6我们可以简化我们的JS代码,同时利用其提供的强大功能来快速实现JS逻辑。 vue-cli:Vue的脚手架工具,用于自动生成Vue项目的目录及文件。...flyway5.2.1:主要用于在你的应用版本不断升级的同时,升级你的数据库结构和里面的数据。...3数据流程图 4部分截图 拖拽编辑 日志大屏 物流大屏 汽车销量大屏 5最后 还等什么呢?赶快来试试吧!项目源码和更详细的安装部署文档已经放到了云盘! 关注 IT码徒 公众号!
Swift 是苹果于 2014 年发布的全新开发语言,可与 Objective-C* 共同运行于 macOS 和 iOS 平台,用于搭建基于苹果平台的应用程序。...建立可复用的组件 组合小而简单的视图,构成更大更复杂的界面。视图可以在任何一处苹果设备和平台共享。 ? 简化动画构建 创建流畅的动画效果十分简单,如同声明一个简单的方法。...当我们在设计面板时,我们编辑的所有内容都与左边编辑器的代码完全同步。当我们修改预览(preview)时,对应代码可实时生成,也就是说我们对预览修改的内容能实时体现在代码中。...这些视觉编辑器在代码编辑器中也能用,所以我们可以使用检查器挖掘每个控件的不同选项,即使在界面的手动编程部分也是一样的。我们可以从库中拖拽控件,再放入到设计面板或代码面板都是可以的。...Xcode 会通过「动态替换」在实时 APP 中交换编辑的代码,这是 Swift 中的新特征。
在 SwiftUI 4.0 中,contextMenu 的功能获得了不小的提高。例如一个上下文菜单中可以有多个选项、支持 primaryAction、以及可定制预览视图。...只允许打开该内容类型的文件,但不能进行编辑。MVVMQ:在 UIKit 时代,MVVM 是一种常见的架构,视图显示的数据来自一个单独的 viewModel 类。...这可能会导致一些不好的后果,例如使视图的可重用性降低,并将业务逻辑与 SwiftUI 视图的生命周期挂钩,这将使处理业务逻辑变得更加困难。简而言之,我们不建议使用视图作为视图模型。...开发者目前仍在尝试创建一个可优雅地同时为两种模式提供路径的模型。阅读 SwiftUI 4.0 的全新导航系统[13] ,了解它们之间的不同。...提问者应该是想通过在父视图中不断修改 id 的参数值,来重新初始化 State 的值。
并且 SwiftUI 可以“实现一次编码,可适应五端 Apple 产品平台”, 包括watchOS、tvOS、macOS 等,以此统一苹果平台的 UI 框架。...但美好的甜蜜期很快过去,接下来我就要说道说道 SwiftUI 的那些“坏毛病”了。 实时检查器不好用 接下来,我开始了 SwiftUI 探索之旅的第二站——为地图编辑器创建实时检查器。...跟其他创作工具一样,这款检查器的功能就是选定一个对象,并把可检查的对应属性显示在一个临时的用户界面元素当中。...之所以下决心选择 SwiftUI,就是因为初步测试时效果不错。如上图所示,地图编辑器位于左侧,检查器位于右侧。起初,我测试了一个 UI 元素,那是个用于开灯和关灯的勾选框。...但这会导致检查器中的值出现延迟,因此在地图编辑器的交互过程中(比如使用移动工具时)结果不准确,所以效果还是称不上完美。 但我觉得这可能只是个独立问题,并不能因此把 SwiftUI 一棒子打死。
来源:Github等 编辑:鹏飞 本文转自公众号:新智元 【导读】SwiftUI是为Apple平台创建用户界面的现代化框架,以前所未有的速度创建漂亮、动态的应用程序。...那么,SwiftUI解决了哪些痛点?带来哪些好处?代码风格如何?敬请阅读本文。 刚刚结束的苹果WWDC推出了一个对于开发者非常重要的框架:SwiftUI。...SwiftUI还提供对动态类型、暗黑模式、本地化和可访问性的自动支持。 SwiftUI都更新了什么? 此次更新主要有5点: 声明式:更加易读的代码。...,编辑起来也如同噩梦。...感受一下SwiftUI的代码风格 ? Github一个repo整理了在WWDC 2019发布的SwiftUI布局框架的一些官方示例: SwiftUI Essentials 创建和组合视图: ?
前言 WWDC 23 已经到来,SwiftUI 框架中有很多改变和新增的功能。在本文中将主要介绍 SwiftUI 中数据流、动画、ScrollView、搜索、新手势等功能的新变化。...数据流 Swift 5.9 引入了宏功能,成为 SwiftUI 数据流的核心。SwiftUI 不再使用 Combine,而是使用新的 Observation 框架。...动画 动画始终是 SwiftUI 框架中最重要的部分。在 SwiftUI 中轻松实现任何动画,但之前的框架版本缺少一些现在具有的功能。...Swift Charts 也具有可滚动和可动画的功能。...特别感谢 Swift社区 编辑部的每一位编辑,感谢大家的辛苦付出,为 Swift社区 提供优质内容,为 Swift 语言的发展贡献自己的力量。 - EOF -
有些小BUG 可能是为了迎合其他类型的项目..所以在共享类库里创建的Page并不能很好的结合 - - 类似如下: ? 正常的应该是这样 ?...如:"yyyy-MM-dd" Date 设置默认显示的日期 MinimumDate 设置最小可选择的日期 MaximumDate 设置最大可选择的日期 示例代码: <DatePicker Format...常用属性: 属性 值 FontAttributes 获取一个值,该值指示编辑器的字体是粗体,斜体还是不显示 FontFamily 获取编辑器的字体所属的字体....FontSize 获取编辑器的字体大小。 Text 获取或设置显示的文本。这是一个可绑定的属性。 TextColor 获取或设置文本颜色。...常用属性: 属性 值 FontAttributes 获取一个值,该值指示编辑器的字体是粗体,斜体还是不显示 FontFamily 获取编辑器的字体所属的字体.
热重载 热重载是关于摆脱编译整个应用程序并尽可能避免部署/重新启动周期,同时允许您编辑正在运行的应用程序代码并且能立即看到更改。 这种流程改进可以每天为您节省数小时的开发时间。...SwiftUI 出现了,它是一项了不起的技术(尽管仍然存在错误),它引入了与 Playgrounds 非常相似的 Swift Previews 的想法,它们有什么好处吗?...它变成了无操作内联代码,将在非调试版本中被编译过程剥离。您可以在每个视图中集成一次,并持续使用数年。 请参考 GitHub repo[3] 中关于配置项目的说明。...工作流 SwiftUI 只需要两行字就可以使任何 SwiftUI 启用实时编程,而当您这样做时,您将拥有比使用 Swift Previews 更快的工作流程,同时能够使用实际的生产数据。...你唯一不能改变的是你的初始化 API。 Host 的变化不能完全内联,所以这些类在 Release 构建中被删除。最简单的方法是做一个单独的提交,交换此单行代码,然后在工作流程的最后删除它。
Flutter SDK下载地址 2、编辑环境变量 (这一步容易卡住) ① 我们需要编辑 bash_profile 文件, 你可以直接在终端中执行命令: open ~/.bash_profile...(要你是打开这文件没法直接编辑,是锁住的就需要带权限打开,我们直接在终端编辑,执行:sudo vim ~/.bash_profile ) ② 接下来把下面三行直接写着上面文件的最后面 export...**:要是你的bash_profile文件中有别的内容也需要特备注意,你可以使用 env 命令检查一下对不对(留意里面的PATH,正确的应该是上面的你配置格式的PATH) ***:你也可以使用...接下来我们就通过基本的Flutter代码以及SwiftUI代码对比来总结一下声明式UI。...那我们用SwiftUI该怎么写呢?
下面来一张牛逼哄哄的SwiftUI效果图,给大家打打牙祭 ?...通过 SwiftUI,开发者可轻松地将动画添加到几乎任何控件。...当在设计工具中工作时,所编辑的内容会立刻反映到代码上,如果从模拟器切换到手机,手机也能立马看到预览效果。 ?...// SwiftUI 示例代码 // 为视图的任何状态声明内容和布局。SwiftUI知道该状态何时发生变化,并更新视图的呈现以匹配该状态。...构建可复用的组件 将小的、单一职责的视图组合成更大、更复杂的接口。在为任何苹果平台设计的应用程序之间共享自定义视图。
因此,如果你正在创建一个视图来显示可滚动的内容,并可能进行选择操作,那么在 iOS 和 macOS 上使用 List 将有最好的体验。...定制 ListQ:是否有办法以完全可定制的方式使用 List ,这样我就可以实现删除缩进、分隔线,甚至更改整个列表的背景等操作? 目前,我总是去找 LazyVStack 来代替。...但是,此转换仅在文本字段完成编辑时才会发生,并且不会阻止输入非数字字符。目前 SwiftUI 没有 API 可以限制用户在字段中输入的字符。...Text 与 TextField 在编辑模式下的切换Q:在 editMode 的文档中建议,在非编辑模式下,可以选择将 Text 视图换成 TextField 。...A:解决办法:保留 TextField ,但当它不能被编辑时,有条件地设置 disabled(true),当它可以编辑时使用 disabled(false) 。
领取专属 10元无门槛券
手把手带您无忧上云