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

如何通过SwiftUI中的.onTapGesture在两个不同的接口(没有Button\TextField)中使用两个列表中的ScrollViewReader?

在SwiftUI中,可以使用.onTapGesture函数来实现在两个不同的接口中使用两个列表中的ScrollViewReader。ScrollViewReader是一个用于在ScrollView中滚动到指定位置的视图容器。

首先,需要创建两个列表,并将它们包装在ScrollView中。然后,使用ScrollViewReader将其包裹在需要滚动的视图周围。接下来,使用.onTapGesture函数来捕捉点击手势,并在其中执行滚动操作。

以下是一个示例代码:

代码语言:txt
复制
import SwiftUI

struct ContentView: View {
    @State private var selectedTab: Int = 0
    @State private var scrollToIndex: Int? = nil
    
    var body: some View {
        VStack {
            TabView(selection: $selectedTab) {
                List {
                    ScrollViewReader { scrollViewProxy in
                        ForEach(0..<10) { index in
                            Text("Item \(index)")
                                .padding()
                                .id(index)
                        }
                        .onAppear {
                            if let scrollToIndex = scrollToIndex {
                                scrollViewProxy.scrollTo(scrollToIndex, anchor: .top)
                                self.scrollToIndex = nil
                            }
                        }
                    }
                }
                .tabItem {
                    Text("List 1")
                }
                .tag(0)
                
                List {
                    ScrollViewReader { scrollViewProxy in
                        ForEach(10..<20) { index in
                            Text("Item \(index)")
                                .padding()
                                .id(index)
                        }
                        .onAppear {
                            if let scrollToIndex = scrollToIndex {
                                scrollViewProxy.scrollTo(scrollToIndex, anchor: .top)
                                self.scrollToIndex = nil
                            }
                        }
                    }
                }
                .tabItem {
                    Text("List 2")
                }
                .tag(1)
            }
            
            Spacer()
            
            HStack {
                Button("Scroll to Item 5") {
                    selectedTab = 0
                    scrollToIndex = 5
                }
                .padding()
                
                Button("Scroll to Item 15") {
                    selectedTab = 1
                    scrollToIndex = 15
                }
                .padding()
            }
        }
    }
}

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

在这个示例中,我们创建了两个列表,分别包含10个项目。通过点击按钮,可以在两个列表之间切换,并滚动到指定的项目位置。通过使用ScrollViewReader和.onAppear函数,我们可以在视图出现时执行滚动操作。

请注意,这只是一个示例代码,你可以根据自己的需求进行修改和扩展。关于SwiftUI的更多信息,你可以参考腾讯云的官方文档:SwiftUI官方文档

希望这个答案能够帮助到你!如果你有任何其他问题,请随时提问。

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

相关·内容

我有两个列表,现在需要找出两个列表不同元素,怎么做?

一、前言 前几天在帮助粉丝解决问题时候,遇到一个简单小需求,这里拿出来跟大家一起分享,后面再次遇到时候,可以从这里得到灵感。...二、需求澄清 问题如下所示: 三、实现过程 这里【听风】一开始给了一个集合求差集方法,差强人意。 不过并没有太满足要求,毕竟客户需求是分别需要两个列表不重复元素。...后来【听风】又给了一个方法,如下所示: 这次是完全贴合要求了,代码运行之后,可以得到预期效果: 这里再补充一个小知识点,提问如下图所示: 后来【听风】给了一个方法,如下图所示: 原来列表转df...是这样玩,接下来你就可以把数据导出为Excel等其他格式了,不再赘述。...这篇文章主要盘点一个Python实用案例,这个案例可以适用于实际工作中文件名去重等工作,感谢【听风】大佬给予耐心指导。

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

    Swiftcord[12] 代码展示了如何SwiftUI 下实现倒置列表。阅读 优化 SwiftUI List 显示大数据集响应效率[13] 一文,了解苹果工程师推荐方法。... SwiftUI 4 ,可以使用 .scrollContentBackground(.hidden) 隐藏列表默认背景searchableQ:是否有办法.searchable() 修饰器以编程方式设置搜索字段焦点...阅读 SwiftUI TextField 进阶 —— 格式与校验[14] 一文了解其他验证手段,以及如何通过 onChange 实现近乎实时地限制输入字符方法。...然而,两个内容相同视图之间交换并不能使视图顺利地产生动画,因为两者文本也被动画化了。我正在使用仅禁用 TextField 替代方法,但有没有办法引导动画以使用文档方法?...每周也会对当周博客上新文章以及 Twitter 上发布 Tips 进行汇总,并通过邮件列表形式发送给订阅者。订阅下方 邮件列表[23],可以及时获得每周 Tips 汇总。

    14.8K30

    ThreadLocal与线程池使用可能会出现两个问题

    直接线程池中获取主线程或非线程池中ThreadLocal设置变量值 例如 private static final ThreadPoolExecutor syncAccessPool =...null 解决办法:真实使用相信大家不会这么使用,但是我出错主要是因为使用了封装方法,封装方法中使用了ThreadLocal,这种情况下要先从ThreadLocal获取到方法,再设置到线程池...线程池中使用了ThreadLocal设置了值但是使用完后并未移除造成内存飙升或OOM public class ThreadLocalOOM { static class LocalVariable...jconsole程序观察到内存变化为 使用完之后remove之后内存变化 public static void main(String[] args) throws InterruptedException...这个原因就是没有remove,线程池中所有存在线程都会持有这个本地变量,导致内存暴涨。

    1.4K20

    掌握 SwiftUI Safe Area

    UIKit ,开发者需要利用 safeAreaInsets 或 safeAreaLayoutGuide ,才能确保将视图放置界面可见部分。 SwiftUI 对上述过程进行了彻底简化。...本文将探讨如何SwiftUI 获取 SafeAreaInsets、将视图绘制到安全区域之外、修改视图安全区域等内容。... SwiftUI ,开发者通常只有需要获取 StatusBar + NavBar 高度或 HomeIndeicator + TabBar 高度时才会使用到 safeAreaInsets 。...safeAreaInsetList2 遗憾是, iOS 15 之前,SwiftUI没有提供调整视图安全区手段,如果我们想通过 SwiftUI 手段创建一个自定义 Tabbar 时,列表中最后内容将被...尽管使用 safeAreaInset 为列表底部添加状态栏或自定义 TabBar 非常方便,但如果你列表使用TextField,情况将变得很麻烦。

    7.7K31

    WWDC 23 之后 SwiftUI 有哪些新功能

    前言 WWDC 23 已经到来,SwiftUI 框架中有很多改变和新增功能。本文中将主要介绍 SwiftUI 数据流、动画、ScrollView、搜索、新手势等功能新变化。...之前 SwiftUI 框架版本,应该使用 @ObservedObject 属性包装器来订阅更改。现在不需要了,因为 SwiftUI 视图会自动跟踪符合 Observable 协议类型更改。...动画 动画始终是 SwiftUI 框架中最重要部分。 SwiftUI 轻松实现任何动画,但之前框架版本缺少一些现在具有的功能。...它允许滚动视图中启用分页。 搜索 与搜索相关视图修饰符也有一些很好新增功能。例如,可以通过编程方式聚焦到搜索字段。...,允许调整列表间距。

    38420

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

    本文将对 SwiftUI zIndex 修饰符做以介绍,包括:使用方法、zIndex 作用域、通过 zIndex 避免动画异常、为什么 zIndex 需要设置稳定值以及多种布局容器内使用 zIndex...访问我博客 www.fatbobman.com[1] 可以获得更好阅读体验 zIndex 修饰符 SwiftUI ,开发者使用 zIndex 修饰符来控制重叠视图间显示顺序,具有较大 zIndex...没有指定 zIndex 值时候,SwiftUI 默认会给视图一个为 0 zIndex 值。...zIndex 值相同(比如全部使用默认值 0 ),SwiftUI 会按照布局容器布局方向( 视图代码闭包出现顺序 )对视图进行绘制。...zIndex 并非 ZStack 专利 尽管大多数人都是 ZStack 中使用 zIndex ,但 zIndex 也同样可以使用在 VStack 和 HStack ,且通过和 spacing 配合

    1.8K30

    SwiftUI使用UIKit视图

    本文将通过对UITextField包装来讲解以下几点: •如何SwiftUI使用UIKit视图•如何让你UIKit包装视图具有SwiftUI风格•SwiftUI使用UIKit视图需要注意地方...如果你已经对如何使用UIViewRepresentable有所掌握,可以直接从SwiftUI风格化部分阅读 基础 具体演示包装代码之前,我们先介绍一些与SwiftUI使用UIKit视图有关基础知识...将UIKit视图包装成SwiftUI视图时,我们需要了解两者生命周期之间不同,不要强行试图找到完全对应方法,要从SwiftUI角度来思考如何调用UIKit视图。...如果按照TextField正常行为,当我们在其中输入任何文本时,下方Text应该显示出对应内容,不过我们当前代码版本,并没有表现出预期行为。...不过有以下几点需要注意: •如何改变View内值(View是结构)•如何处理返回类型(保证调用链继续有效)•如何利用SwiftUI框架现有的数据并与之交互逻辑 为了更全面的演示,下面的例子,采用了不同处理方式

    8.2K22

    深入了解 SwiftUI 5 ScrollView 新功能

    SwiftUI 5.0 ,苹果大幅强化了 ScrollView 功能。新增了大量新颖、完善 API。本文将对这些新功能进行介绍,希望能够让它们更多、更早帮助到有需要开发者。...例如,下面的两种实现,ScrollView 底部空间是不同。...可采用 优化 SwiftUI List 显示大数据集响应效率[5] 一文中介绍方式来解决。 scrollPostion(id:) 使用此修饰符可以让滚动视图滚动到特定位置。...总结 我完全没有想到, SwiftUI 5 ,苹果对 ScrollView 进行了全面增强。值得赞赏是,他们不仅提供了一些一直期待功能,而且 API 设计和实现完成度上都非常出色。...欢迎你通过 Twitter[8]、 Discord 频道[9] 或博客留言板与我进行交流。 订阅下方 邮件列表[10],可以及时获得每周最新文章。

    83520

    SwiftUI 状态管理系统指南

    前言 SwiftUI与苹果之前UI框架区别不仅仅在于如何定义视图和其他UI组件,还在于如何在整个使用应用程序管理视图层级状态。...SwiftUI没有使用委托、数据源或任何其他UIKit和AppKit等命令式框架中常见状态管理模式,而是配备了一些属性包装器[1],使我们能够准确地声明我们数据如何被我们视图观察、渲染和改变。...本周,让我们仔细看看这些属性包装器每一个,它们之间关系,以及它们如何构成SwiftUI整体状态管理系统不同部分。...我们主体,我们将把这两个属性分别绑定到一个相应TextField上,以使它们可以被用户编辑: struct SignupView: View { var handler: (User)...观察和修改环境变量 最后,让我们来看看SwiftUI环境系统如何被用来两个互不直接连接视图之间传递各种状态。

    5.1K20

    SwiftUI 下定制手势

    SwiftUI 下定制手势 请访问我博客 www.fatbobman.com ,以获得更好阅读体验 不同于众多内置控件,SwiftUI 没有采用对 UIGestureRecognizer(或...本文将通过几个示例,演示如何使用 SwiftUI 提供原生手段定制所需手势。 基础 预置手势 SwiftUI 目前提供了 5 种预置手势,分别为点击、长按、拖拽、缩放和旋转。...相较 State 有如下不同: •只能在手势 updating 方法修改,视图其它地方为只读•在手势结束时,与之关联(使用 updating 进行关联)手势会自动将其内容恢复到它初始值•通过...手势在按压过程,可以根据指定时间间隔进行类似 onChanged 回调。本例程着重演示如何通过视图修饰器包装手势方法以及 GestureState 使用。...本例,我们选择 TapGesture onEnded 回调用户闭包 总结 当前 SwiftUI 手势,暂处于使用门槛低但能力上限不足状况,仅使用 SwiftUI 原生手段无法实现非常复杂手势逻辑

    2.7K20

    SwiftUI 创建自适应程序化导航方案

    尤其当用户开启了台前调度( Stage Manager )功能后,应用对不同视觉大小模式兼容能力就越发显得重要。本文将就如何创建可自适应不同尺寸模式程序化导航方案这一内容进行探讨。...与 UIKit 使用命令式导航方式不同SwiftUI 作为一个声明式框架,感知与设置两者之间是二位一体关系。读取状态即可获知当前导航位置,更改状态便可调整导航路径。...为了避免使用者产生误解,代码中分别使用两个 id 修饰器状态变化后对列视图进行了刷新。...不久前 Ask Apple[4] ,苹果工程师介绍了如下方法:image-20221114135939796很遗憾,由于没有暴露 path 接口,问答 navigationDestination...每周也会对当周博客上新文章以及 Twitter 上发布 Tips 进行汇总,并通过邮件列表形式发送给订阅者。订阅下方 邮件列表[8],可以及时获得每周 Tips 汇总。

    4.3K30

    5 分钟,带你快速撸一个 iOS App

    使用 Python 写完爬虫后,有时候我们需要在手机上实时对爬虫进行调度,或实时展示爬虫结果 面对这种场景,我们可以将爬虫逻辑写成 API 部署到服务器,然后移动端编写 App,通过界面元素控件直接调用接口即可...3-2 页面布局 打开项目根目录下「 ContentView.swift 」文件, body 下编写具体视图 首先,使用 VStack 定义一个垂直布局盒子,并定义子控件水平居中展示 PS:SwiftUI...、一个选择框、一个按钮 其中, 图片控件 Image 文本输入框控件 TextField 选择框控件 Toggle 按钮控件 Button import SwiftUI import Combine...控件设置点击事件,使用 Alamofire 进行网络请求,最后将结果展示写入到结果控件绑定到数据中去即可 Button(action: { //具体操作...最后 文章通过一个简单例子描述了开发一个 iOS 原生应用详细步骤;实际应用,可以结合具体场景去定制开发不同功能模块

    89740

    SwiftUI TextField 进阶 —— 事件、焦点、键盘

    15(Moterey)之前,SwiftUI 没有TextField 提供获得焦点方法(例如:becomeFirstResponder),因此相当长时间里,开发者只能通过SwiftUI 方式来实现类似的功能...多个 TextFiled 之间切换焦点 通过使用 focused 和 onSubmit 结合,我们可以实现当用户一个 TextField 输入完成后(点击return),自动让焦点切换到下一个...使用快捷键获得焦点 当一个视图中有多个 TextField(包括 SecureField)时,我们可以直接使用Tab键按顺序 TextField 中切换焦点,但 SwiftUI没有直接提供使用快捷键让某个...另外,有时候为了提高交互体验,我们可以希望用户录入结束后,无需点击return按键,通过点击屏幕其他区域或者以滚动列表方式来取消键盘。同样也需要使用编程方式让键盘消失。...不同视图种类(例如 List、Form、ScrollView),或使用辅助视图、textContentType 情况下都可以避免遮挡正在输入 TextField

    13.3K10

    2022-04-22:给你两个正整数数组 nums 和 target ,两个数组长度相等。 一次操作,你可以选择两个 不同 下标 i 和 j , 其中 0

    一次操作,你可以选择两个 不同 下标 i 和 j ,其中 0 <= i, j < nums.length ,并且:令 numsi = numsi + 2 且令 numsj = numsj - 2...如果两个数组每个元素出现频率相等,我们称两个数组是 相似 。请你返回将 nums 变得与 target 相似的最少操作次数。测试数据保证 nums 一定能变得与 target 相似。...答案2022-04-22:给定两个长度相等整型数组 nums 和 target,要求将 nums 变为与 target 相似,并返回最少需要操作次数。...逐一比较 nums 和 target 对应元素,计算它们之间差值绝对值之和。这一步可以使用 abs() 函数和循环实现。将差值绝对值之和除以 4,即得到最少操作次数。整个过程就是这样。...,最坏情况下需要递归调用 log_2(n) 层,空间复杂度为 O(log n);因此,总空间复杂度为 O\log n)。

    1.1K30

    SwiftUI 视图中打开 URL 若干方法

    访问我博客 www.fatbobman.com[1] 可以获得更好阅读体验 本文将介绍 SwiftUI 视图中打开 URL 若干种方式,其他内容还包括如何自动识别文本内容并为其转换为可点击链接...此时 Button ,我们可以直接通过 openURL 来完成 SwiftUI 1.0 版本通过调用其他框架 API 才能完成工作。...通过 AttributedString 不同位置文字设置不同属性,从而实现在 Text 打开 URL 功能。... Button ,我们可以通过闭包添加逻辑代码,自定义开启 URL 之前与之后行为。... SwiftUI ,采用类似逻辑还有 onSubmit ,有关 onSubmit 信息,请参阅 SwiftUI TextField 进阶 —— 事件、焦点、键盘[6]。

    7.8K31
    领券