Ask Apple 为开发者与苹果工程师创造了在 WWDC 之外进行直接交流的机会。本文对本次活动中与 SwiftUI 有关的一些问答进行了整理，并添加了一点个人见解。本文为上篇。...对 iOS 和 iPadOS 来说，一个按钮或许有效，但对 macOS 就不太适合了。另外，.contextAction 支持多选。它还会回来吗？...对于苹果工程师给予的建议有一点请注意，那就是如果有在父视图中修改该环境对象实例的需求，须确保父视图不会被反复重构（ SwiftUI 重新创建视图类型的实例 ）。...惰性容器中的视图，会根据其是否出现在可视区域而反复调用 onAppear 和 onDisapper。但 onAppear 和 onDisappear 并非为视图存续期起点和终点。...在常规宽度下，我们在详细视图中有一个带有导航堆栈的侧边栏。在紧凑宽度下，我们有一个标签栏，每个标签都有一个导航堆栈。
你可以通过Xcode新的实时反馈功能，来优化你的视图布局 。 第一节 创建一个使用SwiftUI的新Xcode项目。浏览画布、预览和SwiftUI模板代码。...要在Xcode中预览画布上的视图并与之交互，请确保您的Mac运行的是macOS 10.15 beta版。 macOS 10.15 beta版下载地址 Xcode 11下载地址 ?...当我们创建SwiftUI视图控件的时候，我们会把控件的内容、布局还有一些行为放在body属性中；然而body属性只返回了一个view。...Space把父视图在水平或者垂直方向上全部充满。...设置MapView的frame。 如果你只设置了Mapview的高度，那么MapView会自动设置其宽度来适应父视图。所以MapView会充满宽度区域。
Ask Apple 为开发者与苹果工程师创造了在 WWDC 之外进行直接交流的机会。本文对本次活动中与 SwiftUI 有关的一些问答进行了整理，并添加了一点个人见解。本文为下篇。...Jane 的 自动根据宽度排版[10] 视频与该问题十分契合。阅读 The SwiftUI Layout Protocol [11]了解如何创建自定义布局。...创建从底部开始的滚动视图Q：我如何实现一个在底部对齐的滚动视图，在 macOS 上会不会有糟糕的性能？...将背景扩展到安全区域Q：如果我有一个自定义的容器类型，可以接受一个顶部和底部的视图，是否有办法让 API 的调用者将所提供的视图的背景扩展到安全区域内，同时将内容（ 如文本或按钮 ）保留在安全区域内？...然后让顶部/底部视图忽略安全区域。我不确定这是否能满足你的用例，但值得一试。在 background 修饰器中，可以通过 ignoresSafeAreaEdges 参数设置是否忽略安全区域。
），我们简述一下 SwiftUI 的布局过程（ 当前设备为 iPhone 13 Pro ）： SwiftUI 的布局系统为 ZStack 提供一个建议尺寸（ 390 x 763 该尺寸为设备屏幕尺寸去掉安全区域的大小...第二阶段 —— 安置子民 在该阶段，父视图将根据 SwiftUI 布局系统提供的屏幕区域（ 由第一阶段计算得出 ）为子视图设置渲染的位置和尺寸（ 上方的 5-6 ）。...因此，为了简化文字，我们在文章中会将父视图与具备布局能力的容器等同起来。 不过需要注意的是，在 SwiftUI 中，有一类视图是会在视图树上显示为父视图，但并不具备布局能力。...（ 文本不折行、不省略 ） 85.33 x 20.33（ 上文例子中尺寸 ） 明确尺寸模式 如果建议宽度大于单行显示的需要，则需求宽度返回单行实现显示尺寸的宽度 85.33 ；如果建议宽度小于单行显示的需要则需求宽度返回建议尺寸的宽度...渲染尺寸 在布局的第二阶段，当 SwiftUI 的布局系统调用布局容器（ 符合 Layout 协议 ）的 placeSubviews 方法时，布局容器会将每个子视图放置在给定的屏幕区域（ 尺寸通常与该布局容器的需求尺寸一致
GeometryReader 的主要作用就是能够获取到父View建议的尺寸，这就是它的主要作用，要没有它我们面临的可能就是无休止的传值了，SwiftUI 既然是声明式的UI,按我的理解你就没有办法去获取某一个视图的父视图之类的...** subscript 可以让我们获取.leading,.top等等类似这样的数据 *** safeAreaInsets 可以获取安全区域的Insets **** frame(...3、再提一点关于上面说的滚动视图，在UIKit中我们可以用UICollectionView搞定一切，但是在SwiftUI中没有这个控件，我建议采用的方式是 ScrollView + HStack + VStack...Gesture 这个我们可以说说，它就是我们具体手势的父类，像我们的单击手势和我们这里用到的拖拽手势一样。...= 单个视图宽度 + 视图的间距 let currentOffset = CGFloat(currentIndex) * (homeViewModel.homeBannerWidth
引言SwiftUI 和 React 是目前最受欢迎的声明式 UI 框架之一，分别用于构建 iOS/macOS 应用和 Web 应用。它们都强调通过状态驱动渲染来减少手动 UI 更新的复杂性。...@Binding@Binding 用于在父子视图之间传递状态。它允许子视图修改父视图中的状态。...@Binding 允许 ChildView 修改父视图 ParentView 中的 count。...点击按钮时，计数也会实时更新。QA 环节Q1: 如何在 SwiftUI 中进行全局状态管理？...答：@Binding 允许 SwiftUI 子组件修改父组件的状态，而 React 的 props 是单向传递的，父组件通过回调函数允许子组件改变状态。
欢迎大家在 Discord 频道[2] 中进行更多地交流将某个视图在父视图中居中显示是一个常见的需求，即使对于 SwiftUI 的初学者来说这也并非难事。...即使文本宽度超出了 HStack 给出的建议宽度，但 HStack 在布局时，仍会保留其最小厚度，导致下图上方的文本无法充分利用矩形视图的宽度。解决方法为：Spacer(minLength: 0)。...background 添加符合 ShapeStyle 协议的元素时，可以通过 ignoresSafeAreaEdges 参数设置是否忽略安全区域，默认值为 .all （ 忽略任何的安全区域 ）。...因此，当我们将合成后的 hello world 视图放置在 VStack 顶部时（ 通过 Spacer ），矩形的 background 会连同顶部的安全区域一并渲染。...那么 HStack、VStack 会在明确了所有固定尺寸子视图的需求尺寸后，将所剩的可用尺寸（ HStack、VStack 的父视图给他们的建议尺寸 - 固定尺寸子视图的需求尺寸 ）平均分配（ 在优先级相同的情况下
SwiftUI 4.0（ iOS 16+ 、macOS 13+ ）对导航系统作出了重大改变，提供了以视图堆栈为管理对象的新 API ，让开发者可以轻松实现编程式导航。本文将对新的导航系统作以介绍。...，一分为二的方式将让布局表达更加清晰，同时也会强迫开发者为 SwiftUI 应用对 iPadOS 和 macOS 做更多的适配。...上述选项并非适用于所有的平台，例如，在 macOS 上，detalOnly 不会起作用 如果想在 SwiftUI 4.0 之前的版本上使用类似的功能，可以参考我在 用 NavigationViewKit...设置栏宽度 NavigationSplitView 为栏中的视图提供了一个新的修饰符 navigationSplitViewColumnWidth ，通过它开发者可以修改栏的默认宽度： struct NavigationSplitViewDemo...browser 在 iPad 下，当前视图的 Title 将显示在左侧 image-20220612190914949 editor 不显示返回按钮旁边的上页视图 Title image-20220612191040190
本文是笔者参加 2023 年 4 月 20 日 “SwiftUI 技术沙龙（ 北京站 ）” 活动的分享内容。基于记忆整理而成。...有关本次活动的情况，可以参阅 我在北京参加 SwiftUI 技术沙龙 一文。本次活动采用的是线下交流并辅以 live coding 的形式，因此内容的侧重点以及组织形式与以往的博客文章会有明显的不同。...100% 基于 SwiftUI 开发，目前支持三个平台： iPhone、iPad 和 macOS。使用者可以通过它来浏览电影信息，包括正在上映以及即将上映的影片。...通过点击任意窗口中任意 Tab 中的 “Hit Me” 按钮来增加点击次数。点击次数显示在窗口的上方。...因此，在 macOS 中，我们需要单独为 Settings 视图来调整颜色和语言的环境值。
本文是笔者参加 2023 年 4 月 20 日 “SwiftUI 技术沙龙（ 北京站 ）” 活动的分享内容。基于记忆整理而成。...有关本次活动的情况，可以参阅 我在北京参加 SwiftUI 技术沙龙[1] 一文。...本次活动采用的是线下交流并辅以 live coding 的形式，因此内容的侧重点以及组织形式与以往的博客文章会有明显的不同。 开场白 大家好，我是肘子。...通过点击任意窗口中任意 Tab 中的 “Hit Me” 按钮来增加点击次数。点击次数显示在窗口的上方。...因此，在 macOS 中，我们需要单独为 Settings 视图来调整颜色和语言的环境值。
相较于 UIKit ，SwiftUI 通过 Button 视图，让开发者以少量的代码便可完成按钮的创建工作。...label：目标按钮的当前视图，通常对应着 Button 视图中的 label 参数内容role：iOS 15 后新增的参数，用于标识按钮的角色（ 取消或具备破坏性）isPressed：当前按钮的按压状态...而 TapGesture 在不松开手指的情况下，如果移动到可点击区域外，SwiftUI 将不会调用 onEnded 闭包中的操作。...ButtonStyle 和 PrimitiveButtonStyle 是专门针对按钮的样式 API ，它们不仅可以应用于 Button 视图，也可以应用于很多 SwiftUI 预置的系统按钮功能之上，例如...默认情况下，即使单元格的视图中包含了多个按钮，SwiftUI 也只会将 List 的单元格视作一个按钮（ 点击后同时调用所有按钮的操作 ）。
我希望构建类似于 App Store Connect 中的选择器组件，使用户体验尽可能熟悉，并在本文中，将展示如何使用 SwiftUI 为 macOS 构建了这个组件。...这是一个绑定，因为我们希望能够从内部视图修改它。所有可用于添加到构建中的测试群组的数组。父视图负责提供这些信息，正如我们将在下一节中看到的那样。一个状态属性，用于跟踪用户悬停的测试群组。...此属性的值用于在用户悬停在上面时显示一个移除按钮。遍历构建所属的测试群组，并使用 BetaGroup 结构体上的 displayName 属性将它们显示为圆形文本视图。...你只需要将父视图上的 build 属性修改为一个绑定，并将可用的测试群组传递给组件。正如你所看到的，我们编写了一个自定义的初始化方法来过滤出任何已经属于构建的测试群组。...总结文章介绍了如何使用 SwiftUI为macOS 创建类似于 App Store Connect 的选择器组件。
（ Required Size ）返回给父视图 将父视图的建议尺寸作为自身的建议尺寸传递给子视图 将子视图的原点（0,0）置于 GeometryReader 的原点位置 其理想尺寸（ Ideal Size...为此，我们首先需要理解 SwiftUI 的布局原理。 SwiftUI 的布局是一个协商过程。父视图向子视图提供建议尺寸，子视图返回需求尺寸。...父视图是否根据子视图的需求尺寸来放置子视图，以及子视图是否根据父视图给出的建议尺寸来返回需求尺寸，完全取决于父视图和子视图的预设规则。...VStack 会结合视图的优先级，它的父视图给其的建议尺寸，在摆放时对子视图提出最终的建议尺寸。...GeometryReader 常用于需要限定比例的场景，例如让视图占据可用空间的 25% 宽度，或者像上文中根据给定的高宽比来计算高度。
早在2019年，我写了一篇文章SwiftUI 中 frame 的表现[1]，其中，我阐述了父视图和子视图如何协调形成最终视图效果。那里描述的许多情况需要通过观察不同测试的结果去猜测。...就像我在以前的文章 SwiftUI 中 frame 的表现 所描述的的那样，在布局过程中，父视图给子视图提供一个尺寸，但最终还是由子视图决定如何绘制自己。然后，它将此传达给父视图，以便采取相应的动作。...并非如此，子视图仍然会使用 300pt 绘制，但是父视图将会布局其他视图，就好像子视图只有 100pt 宽度一样。结果呢，我们将会有一个超出边界的子视图，但是周围的视图不会被图片额外使用的空间影响。...对于一个具体的宽度，例如 45，父视图提供的也是 45pt，这个视图应该由提供的宽度来决定自身的尺寸 对于宽度为 0.0，子视图应该响应为最小尺寸 对于宽度为 .infinity ,子视图应该响应为最大尺寸...将会调用 sizeThatFits 方法决定我们布局容器的尺寸，当我们写这个方法我们应该认为我们既是父视图又是子视图：当作为父视图时需要询问子视图的尺寸，当我们是子视图时，要基于我们子视图的回复告诉父视图需要的尺寸
以下是一个关于 SwiftUI 的学习历程示例。SwiftUl零基础学习。SwiftUI 是 Apple 推出的用于构建用户界面的声明式框架，适用于 iOS、macOS、watchOS 和 tvOS。...文本的视图。- `.padding()`: 为文本添加内边距，使其周围有一些空白区域。...`Spacer()` Spacer() - `Spacer()` 用于在垂直堆叠中添加可伸缩的空白区域，将内容向上或向下推，使布局更加灵活。### 10....`Button`- **功能**：`Button` 是 SwiftUI 中的视图组件，用于创建可点击的按钮。在示例中，`Button(action: {...})` 定义了一个带有点击事件的按钮。...使用 `GeometryReader` 与 `Position``GeometryReader` 可以让你获得父视图的尺寸和位置信息，然后使用 `.position()` 来精确地控制视图的位置。
ViewThatFits 向子视图查询其理想尺寸（根据未指定建议尺寸返回的需求尺寸）。 根据受限轴的设置，在选择的受限轴上，比较子视图的理想尺寸和 ViewThatFits 的父视图给出的建议尺寸。...ViewThatFits 将父视图给出的建议尺寸作为自己的建议尺寸传递给选择的子视图，并获得该子视图在明确建议尺寸下的需求尺寸。...ViewThatFits 将上一步获得的需求尺寸作为自己的需求尺寸返回给父视图。...（父视图给它的建议尺寸）设置为 10。...就布局而言，"理想尺寸"指的是当父视图以未指定的模式提供建议尺寸时，视图返回的需求尺寸。
在 Xcode 中，通过点击代码左侧行数上的执行按钮（需要按钮的颜色为蓝色）来指定当前执行的结束位置。...image-20211223180328839 点击当前结束位置之后的蓝色执行按钮可以继续向下执行。点击代码编辑区域下方的执行按钮，将重新执行全部代码。...image-20211223150747157 长按代码编辑区域下方的执行按钮，可以在两种模式中进行选择。 在 Xcode 的配置中，可以为 Playground 指定适合的快捷键，提高操作效率。...image-20211224105528272 实时视图支持 SwiftUI 视图以及 UIKit（AppKit）的视图和视图控制器。SwiftUI 视图需要通过 setLiveView 来设定。...如果 Playground Page 被设置在 macOS 模式，该目录中的内容可以在不同的 Playground 项目 macOS 模式的 Page 中共享。
当用布局容器创建合成视图时，必须将构成后的合成视图对父容器的布局影响考虑到其中。针对不同的需求，选择恰当的容器。...这种直接在 CALayer 层面进行的修改，并不会对布局造成影响 上面或许就是你想要的效果，但如果想实现让位移后的视图能够对它的父视图（ 容器 ）的布局有所影响 ，或许就需要换一种方式 —— 用布局容器而非...fixedSize fixedSize 为子视图的特定维度提供未指定模式（ nil ）的建议尺寸，以使其在该维度上将理想尺寸作为其需求尺寸返回，并以该尺寸作为自身的需求尺寸返回给父视图。...，获取子视图在宽度上的需求尺寸 // idealWidth 有值，且父视图在宽度上的建议尺寸为未指定模式，需求宽度为 idealWidth if let idealWidth, proposal.width...contentWidth) } // 将上面确定的需求宽度作为建议宽度，获取子视图的需求高度 let contentHeight = content.sizeThatFits(
环境 MacOS 10.15.5 Xcode 12.0 beta @State A property wrapper type that can read and write a value managed...通常使用场景是把当前View中的@State值类型传递给其子View，如果直接传递@State值类型，将会把值类型复制一份copy，那么如果子View中对值类型的某个属性进行修改，父View不会得到变化...，为了简化内容说明核心问题，只有两行内容，父视图是ProductsView，其中嵌套着子视图FilterView和列表元素，为了能够使得FilterView中对showFavorited的修改能够传递回父视图...，这是因为@State 修饰的属性的它的所有相关操作和状态改变都应该是和当前视图生命周期保持一致，当视图没有被初始化完成时，无法完成状态属性和视图之间的绑定关系；_location不在是nil，其中保存了众多标记视图唯一性的信息...，这里没有全部展示出来； 再点击一次Count+1按钮，count值变为2，user的地址将持续保持不变，生命周期与视图保持一致。
访问我的博客 www.fatbobman.com[1] 可以获得更好的阅读体验 本文将介绍在 SwiftUI 视图中打开 URL 的若干种方式，其他的内容还包括如何自动识别文本中的内容并为其转换为可点击链接...image-20220520182722773 SwiftUI 1.0（ iOS 13、Catalina ） 在视图中，开发者通常需要处理两种不同的打开 URL 的情况： 点击一个按钮（ 或类似的部件...）打开指定的 URL 将文本中的部分内容变成可点击区域，点击后打开指定的 URL 遗憾的是，1.0 时代的 SwiftUI 还相当稚嫩，没有提供任何原生的方法来应对上述两种场景。...3.0 时代，随着 Text 功能的增强和 AttributedString 的出现，SwiftUI 终于补上了另一个短板 —— 将文本中的部分内容变成可点击区域，点击后打开指定的 URL。...SwiftUI 视图中打开 URL 的几种方法，不过读者应该也能从中感受到 SwiftUI 三年来的不断进步，相信不久后的 WWDC 2022 会为开发者带来更多的惊喜。
领取专属 10元无门槛券
手把手带您无忧上云
云服务器
ICP备案
对象存储
腾讯会议
云直播
