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

SwiftUI如何记录当前显示在CollectionView上的网格项目的索引?

SwiftUI中,可以使用@State属性包装器来记录当前显示在CollectionView上的网格项目的索引。@State属性包装器用于声明一个可观察的状态属性,当该属性的值发生变化时,视图会自动更新。

以下是一个示例代码,展示了如何使用@State属性包装器来记录当前显示的网格项目的索引:

代码语言:txt
复制
import SwiftUI

struct ContentView: View {
    @State private var currentIndex: Int = 0
    
    var body: some View {
        VStack {
            Text("Current Index: \(currentIndex)")
            
            ScrollView {
                LazyVGrid(columns: [GridItem(.adaptive(minimum: 80))]) {
                    ForEach(0..<100) { index in
                        Text("\(index)")
                            .frame(width: 80, height: 80)
                            .background(index == currentIndex ? Color.blue : Color.gray)
                            .onTapGesture {
                                currentIndex = index
                            }
                    }
                }
            }
        }
    }
}

struct ContentView_Previews: PreviewProvider {
    static var previews: some View {
        ContentView()
    }
}

在上述代码中,我们使用@State属性包装器声明了一个名为currentIndex的状态属性,用于记录当前显示的网格项目的索引。在LazyVGrid中,我们使用ForEach循环创建了一系列文本视图,并根据当前索引是否与currentIndex相等来设置不同的背景颜色。当用户点击某个网格项目时,通过onTapGesture闭包将currentIndex更新为对应的索引。

这样,每次用户点击网格项目时,currentIndex的值都会更新,并且视图会自动刷新以反映出最新的索引值。

关于腾讯云相关产品和产品介绍链接地址,由于要求不能提及具体的云计算品牌商,因此无法提供相关链接。但是,腾讯云提供了丰富的云计算服务和解决方案,你可以访问腾讯云官方网站以获取更多信息。

页面内容是否对你有帮助?
有帮助
没帮助

相关·内容

UI篇-UICollectionView 补充

前言 相信大家对于 UICollectionView 已经比较熟悉了,这是一篇个人随笔,只是记录了一些自己觉得应该注意地方,大家可以借鉴一下。...可以VC中具体实现对应方法: 定义每个Section约束,具体作用是靠近左右边缘距离,这里定义上下距离约束会被其他协议覆盖掉 -(UIEdgeInsets)collectionView:(...) 开始特定索引路径对cell(单元)进行Interactive Movement(交互式移动工作)。...数据都是取自于它所以,此处应该把数据源也随着移动更新下 - (void)collectionView:(UICollectionView *)collectionView moveItemAtIndexPath...—————— 瀑布流可以保证图片原始比例情况下,灵活展现内容,相对于传统使用相同大小网格展现大量图片,效果要好上很多,而实现瀑布流方式有很多种,网上比较流行有三种实现方式。

1.5K20
  • Swift 自定义布局实现瀑布流视图

    说到布局 layout,大家开发过程中与 UICollectionView 搭配使用最多 应该就是 UICollectionViewFlowLayout 了,这是 UIKit 提供给开发者最基础网格布局...那么,我们该如何来实现一个自定义布局呢!...] 动态尺寸 有的人会问,瀑布流视图惊艳之处就在于它每个 Cell 尺寸都是不一致,那如何生成动态高度 Cell 呢!...这里我策略就是通过追踪计算每一列高度值来得出最小高度那一列,由于已知当前有最小高度那一列高度值以及索引值,那我们就可以为一个 Cell 计算得出它新 X 坐标 和 Y 坐标,然后重新对该 Cell...: 好了, 利用 UICollectionView 控件与自定义布局实现瀑布流内容到此就结束了,最后附上项目的源码地址: https://github.com/ShenJieSuzhou/SwiftScrollBanner

    2.5K30

    iOS开发之窥探UICollectionViewController(五) --一款炫酷图片浏览组件

    自定义CollectionView可谓是非常灵活,其灵活性也决定了其功能强大。CollectionView自定义就是其Cell高度可定制属性,通过对Cell赋值不同属性来达到自定义目的。...切换图片时进行一个360度旋转,并且修改Cell层级,当前显示图片层级最高。并且移动时,如果要显示图片不在屏幕中央就做一个位置矫正。点击图片时,使用仿射变换使其放大,再点击使其缩小。...10 CGFloat contentOffsetX = self.collectionView.contentOffset.x; 11 //根据滑动位移计算当前显示时第几个Cell...CGRectEqualToRect(newBounds, self.collectionView.bounds); 4 } (6).重写下面的方法是为了修正CollectionView滚动偏移量,使当前显示...Cell出现在屏幕中心位置,方法如下: 1 //修正Cell位置,使当前Cell显示屏幕中心 2 - (CGPoint)targetContentOffsetForProposedContentOffset

    1.5K80

    Swift 周报 第十二期

    您可以随时 App Store Connect 中更改您 App 和 App 内购买项目的价格 (包括自动续期订阅)。如果您有提供订阅项目,您可以选择为现有订阅者保留当前价格。...[13] 摘要: Apple WWWDC 2022 推出了 SwiftUI Charts, SwiftUI 视图中实现图表功能变得非常容易。...本文介绍了几种自定义折线统计图。 如何SwiftUI 中创建条形图[15] 摘要: 本文展示了如何创建一个垂直条形图,其中 Y 轴表示每个类型值。...本文主要介绍了如何创建水平条形图,如下图: 使用 SwiftUI Eager Grids[17] 摘要: 本篇文章主要讲解如何使用 Eager Grids 绘制网格视图,其中讲解了十几种网格实现方法...,并详细介绍了网格实现原理。

    2.6K10

    【visionOS】从零开始创建第一个visionOS程序

    潜入特色示例应用程序页面链接 使用Hello World探索所有visionOS应用程序核心概念。了解如何使用Happy BeamARKit检测自定义手势。发现流2D和立体媒体与目的地视频。...在任何SwiftUI应用中,你都可以使用场景将内容放到屏幕。场景包含要在屏幕显示视图和控件。场景还定义了这些视图和控件出现在屏幕外观。...当一个人手指与屏幕项目占据相同空间时,系统就会报告一个交互。额外手指和手部动作定义手势类型。 这张照片显示了一个人桌子物理键盘上打字。一个虚拟建议条显示物理键盘上方。...在为visionOS构建应用程序时,请考虑如何为应用程序界面添加深度。该系统提供了几种显示3D内容方法,包括现有窗口中,卷中以及沉浸式空间中。选择最适合你应用和你提供内容选项。...获得用户许可后,您还可以使用ARKit与沉浸式空间将内容整合到他们周围环境中。例如,您可以使用ARKit场景重建来获得家具和附近物体网格,并让您内容与该网格进行交互。

    92940

    Text 中实现基于关键字搜索和定位

    欢迎大家 Discord 频道[2] 中进行更多地交流前些日子,一位网友聊天室中就如下 问题[3] 与大家进行了交流与探讨 —— 如何通过 Text + AttributedString 实现类似文章关键字检索功能...为定位及智能高亮保存更多数据为了方便之后搜索结果显示和定位,每次搜索均需记录如下信息 —— 搜索结果总数量、当前高亮结果位置、包含搜索结果 transcription、每个 transcrption...View 添加显式标识符后( 使用 id 修饰器),视图刷新时,List 将会为 ForEach 中所有视图创建实例( 并非渲染 )用以比对视图类型构造参数是否发生变化,但仍然只会渲染屏幕显示部分...为了达成这个目标,我们首先需要记录在 List 中,哪些 transcription 正在被显示,以及该 transcription 索引。...通过 onAppear 和 onDisappear 即可达成此目的:var onScreenID: [UUID: Int] = [:] // 当前屏幕中正显示 transcription IDList

    4.2K30

    iOS开发之资讯类App常用分类控件封装与实现(CollectionView+Swift3.0+)

    之前博客中,我们系列介绍了UICollectionView各种回调,以及如何自定义CollectionView布局,并给出了如何使用CollectionView自定义瀑布流。...上面这个效果就是我们今天博客中所实现效果,而下方这两个效果是我们之前聊UICollectionView以及自定义布局时所给出相应Demo, 下方Demo所对应源码也Gitbub上进行了分享...下方就是我们所封装控件调用方式,下方二维数组dataSource就是我们所封装控件中CollectionView数据源,该数据源中数据要遵循我们指定CEThemeDataSourceProtocal...当然该协议代码实现比较简单,就一个menuItemName()方法,该方法返回值是一个字符串。该字符串就是我们要在Cell显示Menu名字。 ? 下方就是创建我们数据测试数据相关代码。...当然,该方法是iOS9以后才添加。启动后我们将当前Cell隐藏,然后将当前Cell生成快照,让后让该快照跟着我们手指移动即可。具体代码如下所示: ?

    1.6K50

    添加多个屏幕-创建格线布局

    在上一节中,我们学习了如何使用按钮更改iPhone屏幕。让我们进一步推动!我们将实现一个CollectionView,我们将能够切换到您想要壁纸。该CollectionView将是滚动水平。...我们图像下面插入一个标签。文本是iPhone X并将底部约束为0并将容器中水平中心约束。“ 属性”检查器中,将“滚动方向”更改为“ 水平”并取消选中“ 显示”指示器。... Cell 文件中,为索引声明一个变量并使其为0.然后,screenImageButtonTapped值内,调用索引及其类型Int。因此,它上面的代理将具有相同值,它将返回一个索引。...转至DialogViewController,放型指数诠释价值里面screenImageButton。返回cell之上,将cell索引更改为索引路径行。...这部分是一个非常漫长而艰难部分。我们学到了很多关于如何实现Collection View知识。我们还学会了如何委派。这是ARKit 2扩展结束,我们已经走了很长路!我希望你喜欢这门课程!

    2.9K40

    使用 UICollectionView 实现首页卡片轮播效果

    UICollectionView 是 iOS6 之后引入一个新 UI 控件,与 UITableView 有着很多相似的地方,开发过程中我们都会选择使用它们俩来为 App 整个页面进行布局,比如说淘宝首页...思路分析 通过观察上面的图我们可以得出,这个网易云轮播控件有三个特点,分别是: 1.支持图片手动横向滚动2.支持图片自动滚动播放3.底部分页控件会高亮显示当前图片是哪一张 好了,既然已经分析出来了它特点...,但是如果要正式 app 中使用,并且达到很好用户体验还是有很大优化空间。...首先第一点,我们要对 UIPageControl 样式进行调整,加上约束,并提供一个获取当前索引接口,代码如下: extension JJNewsBanner { override func...return cellIndex % self.sourceCount } else { return 0 } } // 当前页面索引

    2K20

    Ask Apple 2022 与 SwiftUI 有关问答(下)

    因此,如果你正在创建一个视图来显示可滚动内容,并可能进行选择操作,那么 iOS 和 macOS 使用 List 将有最好体验。...SwiftUI 4.0 Form Ventura 表现与以往版本有很大不同。形式更接近 iOS 状态,同时也对 mac 进行了更多适配。...Table 中上下文菜单Q:如果我 TABLE 添加了一个上下文菜单,我如何确定哪一行导致了菜单显示(无需选择该行)?...Swiftcord[12] 代码展示了如何SwiftUI 下实现倒置列表。阅读 优化 SwiftUI List 中显示大数据集响应效率[13] 一文,了解苹果工程师推荐方法。...SwiftUI 当前缺乏动画完成后回调机制。动画不复杂情况下,可以通过创建一个符合 Animatable 协议 ViewModifier 来同步观察动画进程。

    14.8K30

    SwiftUI 动画机制

    开发者经常需要面对:如何动、怎么动、什么能动、为什么不动、为什么这么动、如何不让它动等等困扰。对 SwiftUI 动画处理逻辑了解不够深入是造成上述困扰主要原因。...某些场景下,我们可能需要在某一个依赖(状态)发生改变时,所有依赖于该项目的内容都产生平滑动画(例如代码二),在其他场景中,可能又仅需部分内容产生平滑动画(例如代码一),通过调整 animation...至于如何利用这些动画数据(插值数据)生成动画,则是由与特定依赖关联可动画部件决定。...有关显性标识方面的内容可以参阅 优化 SwiftUI List 中显示大数据集响应效率[8] 一文 遗憾与展望 理论,一旦你掌握了 SwiftUI 动画机制,就应该能轻松地驾驭代码,自由地控制动画... ViewBuilder 研究(下) —— 从模仿中学习[9] 一文中,我们展示了 SwiftUI Text 是如何处理它扩展方法

    14.8K40

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

    前言 最近,我正在开发一个 Dribbble 找到设计 SwiftUI 实现时,我想到了一个点子,可以通过一些酷炫筛选器扩展该项目以缩小结果列表。...使用 UIKit 时,我总是将这种类型视图实现为具有特定 UICollectionViewFlowLayout UICollectionView。但在 SwiftUI 中该如何实现呢?...(不能适应一行元素),并通过减去当前宽度来更新 HStack 行宽。...VStack 高度是根据两个值计算: 输入数据中任何项目的高度(类似于宽度计算,通过使用 reduce 函数,总结与项目相关所有高度) 将显示 VStack 中行数 private func...然后,详细介绍了实现该选择器逻辑,包括如何处理选项布局、宽度和高度,以及如何处理用户与按钮交互。 最后,提供了一个简单视图实现,可以 SwiftUI 中使用该选择器。

    29620

    SwiftUI 中实战应用 ContentUnavailableView

    前言SwiftUI 引入了新 ContentUnavailableView 类型,允许我们应用程序中展示空状态、错误状态或任何其他内容不可用状态。...每当产品列表为空时,我们使用带有标题和图像 ContentUnavailableView 显示。ContentUnavailableView 另一种变体还允许我们定义当前状态描述文本。...请确保 Xcode 中创建一个新 SwiftUI 项目,并将上述代码替换到主 ContentView 中,然后运行该项目。...目的初始加载时,ContentUnavailableView 将显示“No Products”消息,几秒后模拟产品加载,之后产品列表将显示主视图中。...总结今天,我们学习了如何SwiftUI 中使用 ContentUnavailableView 类型以用户友好方式显示空状态。

    10911

    AnyView 对 SwiftUI 性能影响

    如果是 AnyView(基本是一个包装类型),SwiftUI 将很难确定视图身份和结构,并且它将重新绘制整个视图,这并不是真正高效。...正在测试列表具有不同类型数据(例如图像、视频、GIF、文本等)。测试不同实现时执行相同操作(例如,在内容滚动三次)。数据以每页 25 个项目的形式获取。...动画卡顿苹果建议使用动画卡顿作为衡量应用性能指标。卡顿基本是指在屏幕显示帧比预期晚帧。卡顿时间越长,出现故障和挂起就越明显,从而造成用户体验不佳。...以下是动画卡顿仪器配置文件中结果。你可以在此示例中看到一些更多橙色。有更多动画卡顿超过了可接受延迟时间 33 毫秒。这导致执行测试时仪器和视觉都出现一些可见的卡顿。...这是有道理,因为 SwiftUI 不知道它已经显示过此视图一次(因为它隐藏在 AnyView 下)。因此,它会再次绘制它,同时还可能缓存(但不使用)该视图旧版本。

    13800

    Ask Apple 2022 中与 Core Data 有关问答 (下)

    如何更新通过文件系统删除 Core Data 数据 Spotlight 索引Q:使用 Spotlight 索引 Core Data 中内容时,是否可以指定 Spotlight 索引存储位置?...A:听起来这是一个有价值功能建议,鼓励你提交反馈请求!当前,从应用程序中调用 API 是从索引中删除项目的唯一方法。当前 Spotlight 确实无法处理类似的状况。...A:你使用正是当前推荐方式。此外,纯文本属性可以被 Spotlight 索引,方便它们被系统搜索。生成对应数据纯文本以进行检索,是一种很常见方式。...如何从 UserDefaults 转换至 Core DataQ:目前,我应用程序使用 @AppStorage 进行数据持久化。我有三个主要模型对象,它们被存储在当前设备。...我注意到,当我使用 Safari 客户端从 CloudKit 数据库中删除一条记录时( 通过 CloudKit Dashboard ),该对象仍会保留在设备 Core Data 数据存储中。

    3.2K20

    Swift 自定义布局实现 Cover Flow 效果

    中该如何创建自定义布局。...但是一篇中实现自定义布局稍显简单,只能说是比较粗略计算了下布局各个 item 位置,搞明白了继承自 UICollectionFlowLayout 子类它需要重载方法意义,那么今天这篇文章我们就来实现一个更加复杂自定义布局...第三步,实现 Cell 滚动是分页带阻尼效果,并且滑动停止时候当前放大 Cell 居中显示,有的同学会说:UICollectionView 自带了分页效果,只需要设置 isPagingEnabled...那该如何不通过设置 isPagingEnabled 来实现 Cell 分页滚动和居中显示呢!请接着往下看....指的是滚动速度;那既然我们能获取到当前滚动即将停止坐标,那我们就可以修改它,使它偏移点坐标能让 Cell 居中显示,在这里就不做更多阐述了,直接浏览下方代码吧!

    1.7K20
    领券