具有包含NavigationLink的VStack的列表将使VStack的整个区域可点击，而不仅仅是SubView

。

在SwiftUI中，VStack是一种用于垂直排列视图的容器视图。它可以包含多个子视图，并按照垂直方向依次排列。而NavigationLink是一种用于在导航堆栈中导航到其他视图的导航链接。

当我们将NavigationLink作为VStack的子视图时，通常只有NavigationLink的文本部分或者特定的子视图可以点击，而VStack的其他区域是不可点击的。但是，如果我们将NavigationLink包裹在整个VStack中，整个VStack的区域都将可点击。

这种设计可以方便用户点击整个VStack来进行导航，而不仅仅局限于某个特定的子视图。这在某些场景下非常有用，特别是当VStack的子视图较少或者子视图之间的点击区域较大时。

对于这个问题，腾讯云并没有直接相关的产品或者链接地址。但是，腾讯云提供了丰富的云计算服务和解决方案，可以满足各种开发需求。您可以访问腾讯云官方网站（https://cloud.tencent.com/）了解更多关于腾讯云的产品和服务。

页面内容是否对你有帮助？

有帮助

没帮助

相关·内容

SwiftUI 4.0 的全新导航系统

例如根视图，与第三层视图都通过 navigationDestination 定义了对 Int 的响应，那么第三层及其之上的视图将使用第三层的处理逻辑可管理的视图堆栈系统相较于基于类型的响应式目标视图处理机制...，可管理的视图堆栈系统才是新导航系统的杀手锏。...⚠️ 在使用堆栈管理系统的情况下，请不要在编程式导航中混用声明式导航，这样会破坏当前的视图堆栈数据下面的代码，如果点击声明式导航，将导致堆栈数据重置。...（不能自带点击属性，例如 Button 或 onTapGesture ），将被隐式添加 tag 修饰符，从而具备点击后可更改绑定数据的能力无论将 List 放置在 NavigationSplitView...EditButton() } } } } } navigationStack 默认角色，长按可显示视图堆栈列表

10.2K6 2

架构之路（五） —— VIPER架构模式（一）

VIPER为这种情况提供了一种替代方案，可以与SwiftUI和Combine结合使用，帮助构建具有清晰架构的应用程序，该架构有效地分离了所需的不同功能和职责，如用户界面、业务逻辑、数据存储和网络。...在本例中，主要的entity是Trip，它包含一个路点Waypoints列表，路点是旅程中的各个站点。这个应用程序包含一个DataModel类，它包含一个旅行列表。...点击+按钮将向列表添加一个New Trip。 4. Deleting a Trip 创建旅行的用户可能还希望能够删除它们，以防出错或旅行结束。既然已经创建了数据路径，向屏幕添加额外的操作就很简单了。...然后，动作被发送给presenter，整个链条就断开了。构建并运行，现在您就可以移除旅行了!...) .frame(height: 240) } 它使用来自presenter的NavigationLink，将单元格设置为其内容并将其放入列表中。

17.4K1 0

掌握 Transaction，实现 SwiftUI 动画的精准控制

SwiftUI 因其简便的动画 API 与极低的动画设计门槛而广受欢迎。但是，随着应用程序复杂性的增加，开发者逐渐发现，尽管动画设计十分简单，但要实现精确细致的动画控制并非易事。...欢迎大家在 Discord 频道[2] 中进行更多地交流 Transaction 是什么 transaction 是一个值，包含了 SwiftUI 在处理当前状态变化时需要了解的上下文，其中最重要的是用于计算插值的动画函数...它会在当前视图链发生变化时创建 transaction，而不关心该变化是否由特定的关联值所导致。...这是因为在上面的代码中，没有为 SubView 外面的 VStack 声明“隐式动画”。因此，当 Rectangle 的尺寸增大时，VStack 会调整布局。...欢迎你通过 Twitter[4]、 Discord 频道[5] 或博客的留言板与我进行交流。订阅下方的邮件列表[6]，可以及时获得每周最新文章。

4402 0

解析 SwiftUI 中两处由状态更新滞后引发的严重 Bug

本文将解析 SwiftUI 中两个由于未能贯彻响应式编程原则而导致的严重错误，并提供相应的解决方案。...而通过调用环境值或直接修改绑定状态，SwiftUI 则遵循了响应式编程原则，进行了的先调整状态，后更新视图的操作。...{ NavigationLink("GO") { VStack { Button("Show...{ NavigationLink("GO") { VStack { Button("Show...它的复现条件如下：iOS 16 系统，在真机或模拟器上测试点击视图列表中的按钮，可以进入下一级视图。

58811 0

解析 SwiftUI 中两处由状态更新滞后引发的严重 Bug

本文将解析 SwiftUI 中两个由于未能贯彻响应式编程原则而导致的严重错误，并提供相应的解决方案。...而通过调用环境值或直接修改绑定状态，SwiftUI 则遵循了响应式编程原则，进行了的先调整状态，后更新视图的操作。...{ NavigationLink("GO") { VStack { Button...{ NavigationLink("GO") { VStack { Button...它的复现条件如下： iOS 16 系统，在真机或模拟器上测试点击视图列表中的按钮，可以进入下一级视图。

2662 0

@StateObject 研究

，由于其通常是在SceneDelegate或者当前View的父辈、祖先View上创建的，所以其生命周期必然不短于当前View,因此在使用中并不会发生由于生命周期不可预测而导致的异常。...+1按钮时，无论是@StateObject或是@ObservedObject其都表现出一致的状态，两个View都可以正常的显示当前按钮的点击次数，不过当点击刷新按钮时，CountViewState中的数值仍然正常...从调试信息可以看出，当点击刷新时，CountViewObserved中的实例被重新创建了，并销毁了之前的实例（CountViewObserved视图并没有被重新创建，仅是重新求了body的值）。...: CountViewObserved()) } } }} 测试2中，点击link进入对应的View后通过点击+1进行计数，然后返回父视图。...，在sheet中点击+1,当再次进入sheet后，无论是@StateObject还是@ObservedObject对应的View中的计数都被清零。

1.1K4 0

避免 SwiftUI 视图的重复计算

如果视图响应了不该响应的状态，或者视图的状态中包含了不该包含的成员，都可能造成 SwiftUI 对该视图进行不必要的更新（重复计算），当类似情况集中出现，将直接影响应用的交互响应，并产生卡顿的状况。...例如：当 SwiftUI 在更新 ContentView 时，如果 SubView 的构造参数（ name 、age ）的内容发生了变化，SwiftUI 会对 SubView 的 body 重新求值（...struct SubView{ let name:String let age:Int var body: some View{ VStack{...在这些创建实例的操作中，绝大多数的目的都是为了检查视图类型的实例是否发生了变化（绝大多数的情况下，变化是由构造参数的值发生了变化而导致）。...List 显示区域）都会重新计算。

9.2K8 1

用 SwiftUI 的方式进行布局

准备工作我们首先将一些可复用的代码提取出来，以简化之后的工作： // 视图一 struct RedView: View { var body: some View { Rectangle...ScrollView 会使用父视图给定的全部建议尺寸创建滚动区域，但在询问其子视图的需求尺寸时只会提供理想尺寸。...因此，只需要在状态切换时，调整视图二的对齐指南即可（视图一将自动跟随视图二移动）。此种方式在视觉上与通过 VStack 的实现类似，但两者在需求尺寸上有明显不同。...VStack 的纵向需求尺寸为视图一与视图二的高度和，而通过 overlay 嵌套，纵向需求尺寸仅为视图二的高度（尽管视觉上视图一在视图二的上方且紧密相连）。...同时也欢迎你通过 Twitter、 Discord 频道或博客的留言板与我进行交流。订阅下方的邮件列表，可以及时获得每周的 Tips 汇总。

4.7K8 0

用 SwiftUI 的方式进行布局

准备工作我们首先将一些可复用的代码提取出来，以简化之后的工作： // 视图一 struct RedView: View { var body: some View { Rectangle...ScrollView 会使用父视图给定的全部建议尺寸创建滚动区域，但在询问其子视图的需求尺寸时只会提供理想尺寸。...因此，只需要在状态切换时，调整视图二的对齐指南即可（视图一将自动跟随视图二移动）。此种方式在视觉上与通过 VStack 的实现类似，但两者在需求尺寸上有明显不同。...VStack 的纵向需求尺寸为视图一与视图二的高度和，而通过 overlay 嵌套，纵向需求尺寸仅为视图二的高度（尽管视觉上视图一在视图二的上方且紧密相连）。...[9] Twitter: https://twitter.com/fatbobman [10] Discord 频道: https://discord.gg/ApqXmy5pQJ [11] 邮件列表

3.2K0 0

SwiftUI 布局 —— 尺寸（上）

讨价还价的次数与视图结构的复杂度成正比，整个的协商过程可能会反复出现多次甚至推倒重来的情况。容器与视图在阅读 SwiftUI 布局系列文章时，大家可能会对其中某些称谓产生困惑。...对于不包含子视图的视图来说（例如 Text 这类的元视图），它们同样会提供接口供父视图来调用以向其传递建议尺寸并获取其需求尺寸。...，当前容器的父视图将使用该尺寸在它的内部进行摆放 return cache.cropBounds.size } 根据建议尺寸内容的不同，我们可以将建议尺寸细分为四种建议模式，在 SwiftUI...例如：ZStack 会将其父视图提供给它的建议模式直接转发给 ZStack 的子视图，而 VStack、HStack 则会要求子视图返回全部模式下的需求尺寸，以判断子视图是否为动态视图（在特定维度可以动态调整尺寸...，例如：在 ZStack 中，ZStack 为子视图设置的渲染尺寸与子视图的需求尺寸一致在 VStack 中，VStack 将根据其父视图提供的建议尺寸、子视图是否为可扩展视图、子视图的视图优先级等信息

4.6K2 0

SwiftUI 与 Core Data —— 安全地响应数据

修改为 String ）当声明代码可以部分改善在视图中使用托管对象的友善度。相较于将具有默认值的属性声明为可选值类型（例如 String ），数值属性的声明则更加令人困惑。...Core Data 受限于 Objective-C 中可表达的类型限制，在即使使用了标量转换的情况下（ Scalar ）也不具备与 Swift 原生类型对应的能力。...}}在响应式编程中，开发者不应假设每个部件均能处于理想环境中，需要尽力确保它们能够任何情况下均保证安全稳定，如此才能保证整个系统的稳定运转。...save(context) }}通过 existingObject ，我们将确保只在数据有效的情况下才进行下一步的操作，如此可以避免操作已被删除的数据而造成的意外崩溃情况。...同时也欢迎你通过 Twitter[8]、 Discord 频道[9] 或博客的留言板与我进行交流。订阅下方的邮件列表[10]，可以及时获得每周的 Tips 汇总。

3.2K2 0

如何让 SwiftUI 的列表变得更加灵活

比如，如果我们想将 “inset grouped” 样式应用于列表中，我们不需要拼出整个 InsetGroupedListStyle 名称，而是可以简单地将其称为 .insetGrouped： struct...为了演示这种情况，我们在 List 中嵌套一个 ForEach （因为在 SwiftUI 的中，列表变化一版都是由 ForEach 触发的，而不是由 List 触发的）。...由于每个 article 值在 ForEach 闭包中都是可变的，我们可以使用新的 swipeActions 修饰符来实现每个 NavigationLink 项目视图的自定义滑动操作。...可定制的分隔符自从引入 SwiftUI 以来，开发者们有一个非常普遍的要求，提供一个 API ，用于隐藏或以其他自定义实现列表中每个 item 之间的默认分隔符。...item 上调用的，而不是在列表本身上调用，这为我们提供了很大的灵活性，可以根据想要构建的 UI 类型动态隐藏或显示每个分隔符。

4.8K4 1

如何判断 ScrollView、List 是否正在滚动中

欢迎大家在 Discord 频道[2] 中进行更多地交流判断一个可滚动控件（ ScrollView、List ）是否处于滚动状态在某些场景下具有重要的作用。...(_ scrollView: UIScrollView)手指滑动可滚动区域后（此时手指已经离开），滚动逐渐减速，在滚动停止时会调用此方法scrollViewDidEndDragging(_ scrollView...iOS 系统在 macOS 下的 eventTracking 模式中，该方案的表现并不理想屏幕中只能有一个可滚动控件由于任意可滚动控件滚动时，都会导致主线程的 Runloop 切换至 tracing...ScrollView + VStack（ HStack ）这类的组合，只需为可滚动视图添加一个 scrollSensor 即可。...每周也会对当周博客上的新文章以及在 Twitter 上发布的 Tips 进行汇总，并通过邮件列表的形式发送给订阅者。订阅下方的邮件列表[9]，可以及时获得每周的 Tips 汇总。

3.7K4 0

解析SwiftUI布局细节（二）循环轮播+复杂布局

前言 ---- 上一篇我们总结的主要是VStack里面的东西，由他延伸到 @ViewBuilder, 接着我们上一篇总结的我们这篇内容主要说的是下面的几点，在这些东西说完后我准备解析一下苹果在...这篇我们还是说我们关于SwiftUI的东西，再提一下Demo代码我已经提交上Git了，目前Demo进度为一级页面基本上结束，地图点击大头针的添加也刚处理完，代码有需要的小伙伴可以去Git看看，项目地址...NavigationLink 单击没法跳转，只有长按的时候才能跳转，这个问题抛出来，有懂得小伙伴希望能给我说一下，这个问题我也一直没有解决！...** subscript 可以让我们获取.leading,.top等等类似这样的数据 *** safeAreaInsets 可以获取安全区域的Insets **** frame(...具体的我们会看下面的代码，他们的区别就是像拖拽我们可以监控它的改变状态，点击或者双击、长按等我们可以添加事件等等。

11.8K2 0

在 SwiftUI 中用 zIndex 调整视图显示顺序

访问我的博客 www.fatbobman.com[1] 可以获得更好的阅读体验 zIndex 修饰符在 SwiftUI 中，开发者使用 zIndex 修饰符来控制重叠视图间的显示顺序，具有较大 zIndex...值的视图将显示在具有较小 zIndex 值的视图之上。...当一个视图有多个 zIndex 修饰符时，视图将使用最内层的 zIndex 值 struct ScopeDemo: View { var body: some View { ZStack...buttonStyle(.bordered) .padding(.top, 100) } .ignoresSafeArea() } } 点击按钮...zIndex 并非 ZStack 的专利尽管大多数人都是在 ZStack 中使用 zIndex ，但 zIndex 也同样可以使用在 VStack 和 HStack 中，且通过和 spacing 的配合

1.7K3 0

SwiftUI：猜国旗项目堆叠按钮

Spain", "UK", "US"] var correctAnswer = Int.random(in: 0...2) Int.random(in:)方法会自动选择一个随机数，这在这里是完美的——我们将使用它来决定应该点击哪个国家的国旗...of") Text(countries[correctAnswer]) } } 下面我们想有我们的可点击标志按钮，虽然我们可以把它们添加到同一个VStack，我们实际上可以创建第二个...我们刚刚在上面创建的VStack包含两个文本视图，并且没有间隔，但是如果国旗之间有30个间隔点，将会看起来更好。...这是我们的第二个VStack将进入：我希望你把原来的VStack和下面的ForEach包装成一个新的VStack，这次间隔30点。...：外部堆栈将其视图间隔30个点，而内部堆栈没有间隔。

9752 0

使用 SwiftUI 创建一个灵活的选择器

前言最近，在我正在开发一个在 Dribbble 上找到的设计的 SwiftUI 实现时，我想到了一个点子，可以通过一些酷炫的筛选器扩展该项目以缩小结果列表。...，还要尽量使其可自定义。...因此，将使用符合 Selectable 协议的泛型类型 T 创建 FlexiblePicker。这样，以后更容易重用该组件，因为它将是独立于类型的。在实现选择器本身之前，我列出了所有可自定义属性。...VStack 的高度。...如我之前所提到的，视图将使用嵌套的 ForEach 循环创建。需要记住的是，ForEach 循环要求迭代的集合中的每个元素必须符合 Identifiable 协议，或者应该具有唯一的标识符。

2452 0

SwiftUI 之 HStack 和 VStack 的切换

举个例子，假如我们正在构建一个 app 其中包含 LoginActionsView ，一个让用户登录时在列表中选择操作的类： struct LoginActionsView: View { .....虽然我们也有很多方法能解决这些问题（例如使用类似在这篇 Q&A 中用来使多个视图具有相同宽度和高度的技术），但真正的问题是当我们要动态的确定方向时，测量可用空间是否是一个好的方法。...这样做的好处不仅仅是在引入 GeometeryReader 之前保留同样紧凑的布局，并且会使 DynamicStack 在开始的时候以一种和系统组件类似的方式在所有设备和方向上构建。...这都是因为事实证明 Layout 不仅仅是我们第三方开发者的 API ，Apple 也让 SwiftUI 自己的布局容器使用这个新协议。...就像字面意思一样，这种新的容器将会在我们初始化时传递的候选列表中，基于当前上下文挑选出最优视图。

2.8K1 0

优化在 SwiftUI List 中显示大数据集的响应效率

{ List { // 通过一个 NavigationView 进入列表视图 NavigationLink("包含...列表视图的初始化和 body 求值如果对 SwiftUI 的 NavigationView 有一定了解的话，应该知道 SwiftUI 会对 NavigationLink 的目标视图进行预实例化（但不会对...标识为随时间推移而变化的视图值提供了一个坚固的锚，它应该是稳定且唯一的。...新的问题细心的朋友应该可以注意到，运行解决方案一的代码后，在第一次点击 bottom 按钮时，大概率会出现延迟情况（并不会立即开始滚动）。...由于整个的滚动过程中仅实例化并绘制了 100 多个子视图，对系统的压力并不大，因此在经过反复测试后，首次点击 bottom 按钮会延迟滚动的问题大概率为当前 ScrollViewProxy 的 Bug

9.1K2 0

WWDC - SwiftUI - 初恋般的感觉

点击之后你就会感觉发现了新东西咯: ?...在这里，我们将使用垂直stack来显示park详情信息。 ? 第一步 Command+点按text初始化方法区域。选择Embed in VStack。 ?...点击Live Preview切换预览模式。 ? 把上面的子控件组合成一个完成的详情界面现在我们已经把所有子控件定义实现好了。...设置MapView的frame。如果你只设置了Mapview的高度，那么MapView会自动设置其宽度来适应父视图。所以MapView会充满宽度区域。...第四步点击Live Preview来预览效果。预览状态下，你可以继续编写view的代码，Live Preview会实时更新视图。第五步将CircleImage添加到stack上面。

3.8K1 0

点击加载更多

扫码

添加站长进交流群

领取专属 10元无门槛券

手把手带您无忧上云

具有包含NavigationLink的VStack的列表将使VStack的整个区域可点击，而不仅仅是SubView

相关·内容

SwiftUI 4.0 的全新导航系统

架构之路（五） —— VIPER架构模式（一）

掌握 Transaction，实现 SwiftUI 动画的精准控制

解析 SwiftUI 中两处由状态更新滞后引发的严重 Bug

解析 SwiftUI 中两处由状态更新滞后引发的严重 Bug

@StateObject 研究

避免 SwiftUI 视图的重复计算

用 SwiftUI 的方式进行布局

用 SwiftUI 的方式进行布局

SwiftUI 布局 —— 尺寸（上）

SwiftUI 与 Core Data —— 安全地响应数据

如何让 SwiftUI 的列表变得更加灵活

如何判断 ScrollView、List 是否正在滚动中

解析SwiftUI布局细节（二）循环轮播+复杂布局

在 SwiftUI 中用 zIndex 调整视图显示顺序

SwiftUI：猜国旗项目堆叠按钮

使用 SwiftUI 创建一个灵活的选择器

SwiftUI 之 HStack 和 VStack 的切换

优化在 SwiftUI List 中显示大数据集的响应效率

WWDC - SwiftUI - 初恋般的感觉

扫码

相关资讯

热门标签

活动推荐

运营活动

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐