首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

面向所有人的 UI 编程 :透过点按弹窗初尝 SwiftUI

SwiftUI 由两类代码组成,分别是 View 和 Modifier。如下图所示,这两类代码都可以在 Xcode 中直接拖出来用,你要做的只是玩拼图把它们拼在一起拼出你想要的功能。...其中 View 表示一个视图,比如我们在手机上看到的一个滑条,一张图片,一个列表等种种,都叫做视图;而 Modifier 则是修饰器,它的作用是为视图增加功能,比如圆角,动画,阴影,边际,背景等等。...写 SwiftUI 得过程,实际上就是将一个个最基本的 View 像滚雪球一样越包越大的过程,你把一个个基础的视图和修改器用一个更大的视图包在一起,用修改器修改更大的视图,就能实现复杂的功能。...现在我们来观察上述代码的结构,你会发现整段代码由一个名叫 VStack 的视图和众多 Modifier 组成。 ? 那么 VStack 是什么呢?它的里面为什么会包着两个 Text 呢?...中文里圆括号中的各种要求,正是 SwiftUI 里的各种修改器,语法结构是 「.修改器的名字」。比如下图中我们想修改为小标题的字体,就写 .font(.headline)。 ?

2.1K40

ViewBuilder 研究(下) —— 从模仿中学习

视图能够提供的信息 本文中的视图是指符合 SwiftUI View 协议的各种类型 开发者通过 SwiftUI 框架提供的基础视图类型将自定义的视图串联起来,这些视图将向 SwiftUI 提供如下的信息...SwiftUI 是怎样通过如此简单的接口完成上面缜密的视图处理过程呢?答案是:不能!...如果你自己有需要,可以对其进行扩展,例如可以参照上篇中的范例,通过 buildExpression 将字符串直接转换成 Text 。...开发者通过 Modifier 在视图中表述自己的想法,SwiftUI 只会在布局和渲染才会真正调用这些 modifier 的实现。...的方式有如下优点: 转译仅传递信息,只在布局或渲染才会真正处理 modifier 方便兼容不同的框架( UIKit 、AppKit ) modifier 的优先级逻辑同 SwiftUI 的通用 modifier

3K20
  • 您找到你想要的搜索结果了吗?
    是的
    没有找到

    如何在Xcode下预览含有Core Data元素的SwiftUI视图

    在预览含有Core Data元素的视图崩溃的出现次数会愈发频繁,在某种程度上可能已经影响了开发者在SwiftUI中使用Core Data的热情。...应用程序在运行至该视图时会直接崩溃。 SwiftUI提供的managedObjectContext环境值为在视图中使用或操作Core Data元素提供了基础和便利。...错误使用了Preview的修改器 对于含有Core Data元素的视图,在预览中使用preview专用修改器Modifier)须谨慎。某些Modifier会导致预览模拟器处于更加受限的运行状态。...直接使用托管对象 当然,我们仍然可以直接给视图传递托管对象。为了便于在预览中重复使用,我们可以在CoreDataStack或其他你认为合适的地方提前创建好用于预览的数据,在预览直接调用即可。...批量创建的数据有利于用于使用了@FetchRequest的视图在预览中调用

    5.1K10

    Ask Apple 2022 与 SwiftUI 有关的问答(上)

    Ask Apple 为开发者与苹果工程师创造了在 WWDC 之外进行直接交流的机会。本文对本次活动中与 SwiftUI 有关的一些问答进行了整理,并添加了一点个人见解。本文为上篇。...A:当在其他类型的 UIViewControllers 中使用 UIHostingController ,你可能会通过调用托管控制器的方法来触发视图加载提前发生。...对于惰性视图,当在 hosting controller 视图上调用 layoutSubviews 或 sizeThatFits 方法,会初始化视图。...阅读 SwiftUI 4.0 的全新导航系统[13] ,了解它们之间的不同。位置偏移的方法与效率Q:在非线性位置( 有 2 个轴 )渲染带有圆形图像最好方法是什么?.../[15] 掌握 SwiftUI 的 task 修饰器: https://www.fatbobman.com/posts/mastering_SwiftUI_task_modifier/[16] OpenWindowAction

    12.2K20

    SwiftUI 中布局的工作原理

    您需要在资源目录中提供一个图像,以便遵循有关自定义对齐指南的章节,但它可以是任何您想要的——它实际上只是一个占位符。 2....在幕后,SwiftUI 执行第四步:尽管它将位置和大小存储为浮点数,但在渲染SwiftUI 会将所有像素舍入到最接近的值,这样我们的图形仍然清晰。...当涉及到视图及其修改器SwiftUI有效地从下到上工作。 现在考虑一下这个布局: Text("Hello, World!")...第二个有趣的副作用是我们前面遇到的:如果我们在一个不能调整大小的图像上使用 frame(),我们会得到一个更大的 Frame,而图像内部没有改变大小。...当你听苹果公司的 SwiftUI 工程师谈论修饰符,你会听到他们把它们称为视图——“the frame view”、“ the background view”等等。

    3.8K20

    GeometryReader :好东西还是坏东西?

    GeometryReader 打破了 SwiftUI 声明式编程的理念,使得需要直接操作视图框架,更接近命令式编程。...如果直接将这些负数数据传递给 frame,就可能会出现布局异常(在调试状态下,Xcode 会用紫色的提示警告开发者)。因此,为了进一步避免这种极端情况,可以在传递数据,将不符合要求的数据过滤掉。...由于早期的 SwiftUI 缺少了 LazyGrid 等布局容器,开发者只能通过 GeometryReader 来实现各种自定义布局。当视图数量较多时,这将会导致严重的性能问题。...自从 SwiftUI 补充了一些之前缺失的布局容器后,GeometryReader 对性能的大规模影响已经有所减轻。特别是在允许自定义符合 Layout 协议的布局容器后,上述的问题已基本解决。...visualEffect 允许开发者在不破坏当前布局的情况下(不改变其祖先和后代)直接在闭包中使用视图的 GeometryProxy,并对视图应用某些特定的 modifier

    58370

    高级 SwiftUI 动画 — Part 2:GeometryEffect

    虽然SwiftUI已经有了一个修饰符,即.rotrotation3DEffect(),但这个修饰符将是特别的。每当我们的视图旋转到足以向我们展示另一面,一个布尔绑定将被更新。...由于我们不能改变锚点,我们需要在组合中加入一些转换效果: struct FlipEffect: GeometryEffect { var animatableData: Double...我们有一个图像名称的数组,我们想逐一查看。为了做到这一点,我们将使用一个自定义绑定变量。...如前所述,我们可能想使用两个完全不同的视图,而不是改变图像名称。...根据我们的需求,我们只需用使用非常接近的起点和终点来调用它。它将返回一个非常小的矩形,我们将使用其中心作为我们的X和Y位置。

    1.3K30

    SwiftUI 下定制手势

    SwiftUI 下,我们无法拥有类似构建全新 UIGestureRecongnizer 的能力。所谓的自定义手势,其实只是对系统预置手势的重构而已。...除了提供了更多的调用时机外,而且支持了对按压区域尺寸的智能处理(提高手指触击成功率)。 Value SwiftUI 会依据手势的类型提供不同的数据内容。...时机 SwiftUI 手势内部没有状态一说,通过设置与指定时机对应的闭包,手势会在适当地时机自动进行调用。...resetTransaction 可以设置恢复初始数据的动画状态 组合手势的手段 SwiftUI 提供了几个用于手势的组合方法,可以将多个手势连接起来,重构成其他用途的手势。...当我们不在结构体中使用自定义的 Value 类型SwiftUI 可以推断出 Self.Body.Value,此时可以将 body 声明为some Gesture。

    2.7K20

    打造可适配多平台的 SwiftUI 应用

    SwiftUI 通过设定了某些兼容性的限制,促使开发者在做多平台适配,不得不考虑平台特点的不同,并根据这些不同来做有针对性的调整。...但是,如果开发者不能理解 SwiftUI 的这个“限制”,并提前做一些准备工作,可能会为之后的多平台开发工作带来一些隐患和增加不必要的工作量。以“电影猎手”的 iPad 版本为例。...图片为了避免在适配其他平台重复调整代码,我们可以采用类似于 horizontalSizeClass 的方式(通过环境变量),创建一个可用于所有需要适配平台的自定义环境变量来解决这个问题。...在 SwiftUI 中,除了环境值外,另一个具备较多平台“限制”的部分就是视图的 Modifier。...图片这是因为某些 View Modifier 并不支持 macOS。

    3.1K80

    打造可适配多平台的 SwiftUI 应用

    SwiftUI 通过设定了某些兼容性的限制,促使开发者在做多平台适配,不得不考虑平台特点的不同,并根据这些不同来做有针对性的调整。...但是,如果开发者不能理解 SwiftUI 的这个“限制”,并提前做一些准备工作,可能会为之后的多平台开发工作带来一些隐患和增加不必要的工作量。 以“电影猎手”的 iPad 版本为例。...image-20230416170832640 为了避免在适配其他平台重复调整代码,我们可以采用类似于 horizontalSizeClass 的方式(通过环境变量),创建一个可用于所有需要适配平台的自定义环境变量来解决这个问题...在 SwiftUI 中,除了环境值外,另一个具备较多平台“限制”的部分就是视图的 Modifier。...image-20230416172647039 这是因为某些 View Modifier 并不支持 macOS。

    2K10

    SwiftUI中使用UIKit视图

    ,但仍有大量的事情是无法直接通过原生SwiftUI代码来完成的。...SwiftUI的视图,本身没有清晰(可适当描述)的生命周期,它们是值、是声明。SwiftUI提供了几个修改器modifier)来实现类似UIKit中钩子方法的行为。...将UIKit视图包装成SwiftUI的视图,我们需要了解两者生命周期之间的不同,不要强行试图找到完全对应的方法,要从SwiftUI的角度来思考如何调用UIKit视图。...例如,UIKit中我们将一个代理对象附加到Text field视图上,当用户输入时,当用户按下return键,该代理对象中对应的方法将被调用。...本节以版本1.0结束的代码为基础。 所谓的SwfitUI风格化,更确切地说应该是函数式编程的链式调用。将多个操作通过点号(.)链接在一起,增加可读性。

    8.2K22

    SwiftUI 布局 —— 尺寸( 下 )

    本篇中,我们将通过对视图修饰器 frame 和 offset 的仿制进一步加深对 SwiftUI 布局机制的理解,并通过一些示例展示在布局需要注意的问题。...因此,针对 CALayer( 面子 )直接做出的调整,SwiftUI 的布局系统是无法感知的。...frame 视图修饰器本质上是对布局容器 _FrameLayout 的包装,本例中我们将自定义的布局容器命名为 MyFrameLayout ,视图修饰器命名为 myFrame 。...当 min 或( 和 ) max 有值,会按如下规则返回 _FlexFrameLayout 的在该维度上的需求尺寸( 下图来自于 SwiftUI-Lab[6] ) frame-flow-chart...布局机制的窗口,无论你在未来的工作中是否需要使用 Layout 协议创建自定义布局容器,掌握它都将获得莫大的好处。

    2.6K40

    SwiftUI 布局 —— 尺寸( 上 )

    = nil, alignment: SwiftUI.Alignment = .center) -> some SwiftUI.View { return modifier(...这类视图本身并不会参与布局,SwiftUI 的布局系统会在布局自动将它们忽略,让其子视图与具备布局能力的祖先视图直接联系起来。...以子视图为符合 Layout 协议的自定义布局容器举例,父视图通过调用子视图的 sizeThatFits 方法提供建议尺寸。...而该自定义布局容器又会在它的 sizeThatFits 方法中通过调用其子视图代理( Subviews,子视图在 Layout 协议中的表现方式 )的 sizeThatFits 方法为子视图代理提供建议尺寸...渲染尺寸 在布局的第二阶段,当 SwiftUI 的布局系统调用布局容器( 符合 Layout 协议 )的 placeSubviews 方法,布局容器会将每个子视图放置在给定的屏幕区域( 尺寸通常与该布局容器的需求尺寸一致

    4.7K20

    SwiftUI Overlay Container 2 —— 可定制、高效、便捷的视图管理器

    本文的内容直接搬运自项目的 README 文档。...使用者通过调用容器管理器的特定方法,让指定的容器执行显示视图、撤销视图等工作。 容器管理器的环境值 在 SwiftUI 中,视图代码通过环境值调用容器管理器。...dismissAllView(in containers: [String], onlyShowing: Bool, animated flag: Bool) 撤销指定容器内的所有视图 可屏蔽动画 无论是直接调用容器管理器还是使用...View modifier,当将 animated 设为 false ,均可强制取消转场动画。...animation 在 SwiftUI 视图外使用 如果想在 SwiftUI 视图之外调用容器管理器,可以直接调用 ContainerManager 的单例: let manager = ContainerManager.share

    2.1K20
    领券