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

当键盘出现时,滚动到SwiftUI滚动视图的最底部

可以通过以下步骤实现:

  1. 首先,需要在SwiftUI视图中添加一个滚动视图。可以使用ScrollView来创建一个可滚动的视图容器。
代码语言:txt
复制
ScrollView {
    // 添加需要滚动的内容
}
  1. 接下来,需要在视图中添加一个文本输入框或者其他可以触发键盘弹出的控件。
代码语言:txt
复制
TextField("请输入内容", text: $text)
  1. 在视图中,使用onAppearonDisappear修饰符来监听键盘的出现和消失事件。
代码语言:txt
复制
.onAppear {
    NotificationCenter.default.addObserver(forName: UIResponder.keyboardWillShowNotification, object: nil, queue: .main) { notification in
        // 键盘出现时的处理逻辑
    }
}
.onDisappear {
    NotificationCenter.default.removeObserver(self, name: UIResponder.keyboardWillShowNotification, object: nil)
}
  1. 在键盘出现时,可以通过调整滚动视图的偏移量来实现滚动到最底部的效果。
代码语言:txt
复制
let keyboardHeight = notification.userInfo?[UIResponder.keyboardFrameEndUserInfoKey] as? CGFloat ?? 0
ScrollViewReader { scrollViewProxy in
    scrollViewProxy.scrollTo(scrollViewProxy.selectedId, anchor: .bottom)
}

完整的代码示例如下:

代码语言:txt
复制
import SwiftUI

struct ContentView: View {
    @State private var text: String = ""
    
    var body: some View {
        ScrollView {
            VStack {
                ForEach(1...20, id: \.self) { index in
                    Text("Item \(index)")
                        .padding()
                }
                
                TextField("请输入内容", text: $text)
                    .padding()
                    .textFieldStyle(RoundedBorderTextFieldStyle())
            }
        }
        .onAppear {
            NotificationCenter.default.addObserver(forName: UIResponder.keyboardWillShowNotification, object: nil, queue: .main) { notification in
                let keyboardHeight = notification.userInfo?[UIResponder.keyboardFrameEndUserInfoKey] as? CGFloat ?? 0
                ScrollViewReader { scrollViewProxy in
                    scrollViewProxy.scrollTo(scrollViewProxy.selectedId, anchor: .bottom)
                }
            }
        }
        .onDisappear {
            NotificationCenter.default.removeObserver(self, name: UIResponder.keyboardWillShowNotification, object: nil)
        }
    }
}

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

这样,当键盘出现时,滚动视图会自动滚动到最底部,确保输入框可见。这在聊天应用、评论输入等场景中非常常见。

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

相关·内容

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

image-20220822161247454点击切换按钮定位到对应的搜索结果为 TranscriptionRow 视图添加显式标识符,并通过 ScrollViewProxy 滚动到指定的位置。...请阅读 优化在 SwiftUI List 中显示大数据集的响应效率[6] 以及 避免 SwiftUI 视图的重复计算[7] 两篇文章,了解更多有关性能优化方面的内容通过 currentPostion 获取需要滚动到的..._25_53在搜索条出现时,让 TextField 获得焦点通过 @FocusState ,让 TextField 在搜索条出现时,自动获得焦点,从而自动开启键盘。...阅读 SwiftUI TextField 进阶 —— 事件、焦点、键盘[12] 一文,了解更多有关焦点的内容@FocusState private var focused: BoolTextField(...视图的重复计算: https://www.fatbobman.com/posts/avoid_repeated_calculations_of_SwiftUI_views/[8] 了解 SwiftUI

4.2K30
  • 【移动端bug】iOS 下 Input 和 fixed 的问题

    然后我们还需要明确一个事情,就是 当激活定位元素的输入框时,页面没有内容了,无法往上滚的时候 那么是不会出现光标错位的问题的,像下面这样 ?...4为什么会这样 究其原因,其实是 iOS 系统的bug,后续的系统已经修复了 5解决方法 虽然是系统bug,但是我们要照顾这部分人群,总不能让人换手机,只能自己解决了 先想想,当页面滚动到底部时,激活定位元素的输入框...那么我们从上面两种现象,可以得出一个结论 1、页面已经滚动到底, 定位元素输入框,唤起键盘,再收起键盘,定位元素的 实际DOM 会停留在唤起键盘的位置 ,跟显示的元素错位了 2、页面没有滚动到底,定位元素输入框...发现,的确高度不一样,的确实际DOM 和 显示的元素 错位了 2 、证明没有滚动到底部时,实际DOM 的位置是正常的,和显示元素对应 ?...5解决办法 现在我们知道这个问题 “ 因为滚动到底部时,键盘强行把页面顶上去一部分,并且失焦时,页面没有复位 ” 所以我们可以在 输入框失焦的时候,把页面复位就好了 通常最简单的办法是 window.scrollTop

    4.7K61

    深入了解 SwiftUI 5 中 ScrollView 的新功能

    scrollIndicatorsFlash 控制滚动指示器 使用 scrollIndicatorsFlash(onAppear: true) 可以在滚动视图出现时使其滚动指示器短暂闪烁。...它只影响滚动视图的初始状态,一次性设置。通常用于实现类似初始状态从底部显示的 IM 应用、从 trailing 开始显示数据等情况。通过 UnitPoint 可以同时设置两个轴向的初始位置。...可采用 优化在 SwiftUI List 中显示大数据集的响应效率[5] 一文中介绍的方式来解决。 scrollPostion(id:) 使用此修饰符可以让滚动视图滚动到特定的位置。...(视图标识) 不支持锚点设定,固定锚点为子视图的 center 正如 优化在 SwiftUI List 中显示大数据集的响应效率[6] 一文所提到的,当数据集很大时,也会出现性能问题。...当子视图滑入和滑出包含它的滚动视图的可视区域时,scrollTransition 会对该视图应用给定的过渡动画,并在不同阶段之间平滑地过渡。

    92120

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

    创建从底部开始的滚动视图Q:我如何实现一个在底部对齐的滚动视图,在 macOS 上会不会有糟糕的性能?...A:你最好的选择是使用 ScrollView 和 ScrollViewReader,并在 onAppear 或新内容进来时滚动到最底部的视图。我不建议尝试旋转滚动视图。...这个技巧对于处于屏幕的顶部或底部的视图十分有用。详情请参阅 推文[15] 。动画转场Q:为什么下面的代码没有显示动画转场。...连锁动画Q:在 SwiftUI 中,如何实现连锁动画?例如,我想先给一个视图做动画,当动画完成后立即启动另一个动画。A:不幸的是,目前不可能实现连锁动画。...但这个滚动有两大问题,1、是一个未公开的半成品,有可能会被从 SwiftUI 框架中移除;2、不支持懒加载,即使和 Lazy 视图一起使用也会一次性加载全部的视图。

    14.8K30

    SwiftUI + Core Data App 的内存占用优化之旅

    此时请不要惊讶,你可以尝试点击添加数据按钮继续增加数据,再次滚动到底部,你将看到更加令人震惊的内存占用数值,不过有极大的可能会看不到( 应用已经崩溃了 )。...在本例中,子视图的 body 值中一定会包含用于显示的图片数据,因此,即使该视图已经被显示过( 滚动出显示区域 ),该视图的 body 值仍将占用不小的内存。...滚动到底部后( 100 条数据 ),内存的占用将在 500 MB 左右。...同未优化过的代码一样,随着数据量的增大,内存的占用也将随之提高。在 400 条记录的情况下,滚动到底部,内存占用值差不多是 1.75 GB。...,内存占用也仍然被控制在一个相当理想的状态( 下图为 400 条数据滚动到底部的内存占用情况 )。

    1.3K10

    掌握 SwiftUI 的 Safe Area

    当视图尚未在屏幕上可见时,该视图的 safeAreaInset 也为 0 。...从 iOS 14 开始,SwiftUI 计算视图的安全区域时,将软键盘在屏幕上的覆盖区域(iPadOS 下,将软键盘缩小后键盘的覆盖区域将被忽略)也一并进行考虑。...因此,无需使用任何额外的代码,视图便自动获得了键盘避让的能力。但有时,并非所有的视图都需要将软键盘的覆盖区域从安全区域中去除,因此需要正确地设置 SafeAreaRegions 。...ignoresDemo2 如果将代码修改成: ZStack { ...}.ignoresSafeArea(.container) 此时,背景充满了屏幕,前景支持了键盘避让,但背景会在键盘出现时,发生了不该有的变化...此时,底部状态条的表现肯定不符合设计的初衷。 如果想让底部状态条固定,同时又保持 TextField 的自动避让能力,需要通过监控键盘的状态,做一点额外的操作。

    7.7K31

    SwiftUI + Core Data App 的内存占用优化之旅

    此时请不要惊讶,你可以尝试点击添加数据按钮继续增加数据,再次滚动到底部,你将看到更加令人震惊的内存占用数值,不过有极大的可能会看不到( 应用已经崩溃了 )。...在本例中,子视图的 body 值中一定会包含用于显示的图片数据,因此,即使该视图已经被显示过( 滚动出显示区域 ),该视图的 body 值仍将占用不小的内存。...滚动到底部后( 100 条数据 ),内存的占用将在 500 MB 左右。...同未优化过的代码一样,随着数据量的增大,内存的占用也将随之提高。在 400 条记录的情况下,滚动到底部,内存占用值差不多是 1.75 GB。...图片 可以加大检测力度,即使在生成了 400 条记录的情况下,内存占用也仍然被控制在一个相当理想的状态( 下图为 400 条数据滚动到底部的内存占用情况 )。

    2.4K40

    如何使用 SwiftUI 中 ScrollView 的滚动偏移

    为了弥补这一不足,SwiftUI 引入了新的 ScrollPosition 类型,使我们能够通过偏移量、滚动视图的边缘、视图标识符等组合滚动位置。...新的 ScrollPosition 类型SwiftUI 框架引入了新的 ScrollPosition 类型,使我们能够通过偏移量、滚动视图的边缘、视图标识符等组合滚动位置。...我们还放置了两个按钮,允许你快速滚动到滚动视图中的第一个或最后一个项目。ScrollPosition 类型提供了许多重载的 scrollTo 函数,使我们能够处理不同的情况。...scrollTo 函数的 point 参数重载,允许我们传递 CGPoint 实例以将视图滚动到内容的特定点。...我们将这个偏移量存储在 scrollOffset 状态属性中,并在视图底部显示当前的滚动位置。

    25610

    移动端那些戳中你痛点的软键盘问题及解决方法

    大厂技术 坚持周更 精选好文 问题 问题描述: 在ios手机中,当页面中包含有输入框时,点击输入框,键盘弹起,会让页面中被fixed的元素失效。所以造成了底部吸底和顶部吸顶的元素错位的问题。...为了解决这个问题,ios设计者们让webview上滚,但滚动的结果有些出乎意料:输入框本身可以理解地滚动到了实际可视区域的正中间,但 fixed 元素不会发生重新计算,而是保持原来的相对位置,跟着输入框一起被上推...;在滚动过程中,还会允许屏幕底部超出页面底部(「滚动过头」),以便让输入框尽可能露出来。...这其实可能只适用于我这种情景,这个解决办法的原理是:scrollIntoView(true)想让输入框的顶部滚动到与可视区顶部齐平的效果,但是由于ios键盘弹起之后最大滚动距离等于键盘的高度,所以,通过这个方法会让...解决办法: 当键盘收起时,加入下面其中一种办法就可以解决 滚动到顶部 window.scrollTo(0,0) 滚动到底部 window.scrollTo(0, Math.max(document.body.clientHeight

    8.9K30

    【H5】209-可能这些是你想要的H5软键盘兼容方案

    在IOS12 上,微信版本 v6.7.4 及以上,输入框获取焦点,键盘弹起,页面(webview)整体往上滚动,当键盘收起后,不回到原位,导致键盘原来所在位置是空白的。...当输入框位于页面下部位置时,在 IOS 上,会将 webview 整体往上滚一段距离,使得该获取焦点的输入框自动处于可视区,而在 Android 则不会这样,它只会改变页面高度,而不会去滚动到当前焦点元素到可视区...兼容 IOS12 + V6.7.4+ 如果你在用 IOS12 和 V6.7.4+版本的微信浏览器打开上面表单输入的 demo ,就会惊奇的发现键盘收起后,原本被滚动顶起的页面并没有回到底部位置,导致原来键盘弹起的位置...微信官方已给出解决方案,只需在软键盘收起后,将页面(webview)滚回到窗口最底部位置(clientHeight位置)。 console.log('IOS 键盘收起啦!')...了解软键盘弹起页面在 IOS 和 Android 上的表现差异是前提,其次是将焦点元素滚动到可视区,同时要考虑到第三方输入法和某些浏览器上的差别。

    4K12

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

    创建与 IM 应用类似的底部文字输入栏Q:你好,我的问题是关于 TextField 的。...假设我们想创建一个类似于 iMessage 的视图,在那里你可以看到一个信息列表(与本例无关),在视图的底部有一个文本框。当用户点击文本字段时,键盘会在其工具栏中出现一个文本字段。...最近,我注意到 SwiftUI 视图的 onAppear 在意想不到的时间启动,比如当 UITabBarController 被创建时,而不是当视图本身出现时。...2、当视图出现在 UITabBarController 中时,推荐的执行代码的方法是什么?...如果发生这种情况,克服这种情况的技术是在外部存储上保存一些数据,只在内存中保留最相关的数据和一个标识符,以便能够完全取回其余的数据。

    12.3K20

    用 SwiftUI 的方式进行布局

    在初始状态时( show == false ),视图一( 红色视图 )的底部与屏幕底部对齐,当 show == true 时,视图二( 绿色视图 )的底部与屏幕底部对齐。...== true 时,视图二( 绿色视图 )的底部必然与屏幕底部对齐,因此,将 overlay 的对齐指南设置为 bottom ,可以极大地简化我们的初始布局声明。...ScrollView 会使用父视图给定的全部建议尺寸创建滚动区域,但在询问其子视图的需求尺寸时只会提供理想尺寸。...SwiftUI 在进行布局时,当布局容器给出的建议尺寸无法满足全部子视图的需求尺寸时,会根据子视图的 Priority,优先满足级别较高的视图的布局需求。...尽管当前的需求仅有两个视图,但我们仍然可以从中提炼出场景特性:在垂直排列的前提下,在特定状态时,指定视图的底部与容器视图的底部对齐。

    3.3K00

    可能这些是你想要的H5软键盘兼容方案

    在IOS12 上,微信版本 v6.7.4 及以上,输入框获取焦点,键盘弹起,页面(webview)整体往上滚动,当键盘收起后,不回到原位,导致键盘原来所在位置是空白的。...当输入框位于页面下部位置时,在 IOS 上,会将 webview 整体往上滚一段距离,使得该获取焦点的输入框自动处于可视区,而在 Android 则不会这样,它只会改变页面高度,而不会去滚动到当前焦点元素到可视区...兼容 IOS12 + V6.7.4+ 如果你在用 IOS12 和 V6.7.4+版本的微信浏览器打开上面表单输入的 demo ,就会惊奇的发现键盘收起后,原本被滚动顶起的页面并没有回到底部位置,导致原来键盘弹起的位置...微信官方已给出解决方案,只需在软键盘收起后,将页面(webview)滚回到窗口最底部位置(clientHeight位置)。...了解软键盘弹起页面在 IOS 和 Android 上的表现差异是前提,其次是将焦点元素滚动到可视区,同时要考虑到第三方输入法和某些浏览器上的差别。

    8.1K20

    用 SwiftUI 的方式进行布局

    在初始状态时( show == false ),视图一( 红色视图 )的底部与屏幕底部对齐,当 show == true 时,视图二( 绿色视图 )的底部与屏幕底部对齐。...== true 时,视图二( 绿色视图 )的底部必然与屏幕底部对齐,因此,将 overlay 的对齐指南设置为 bottom ,可以极大地简化我们的初始布局声明。...ScrollView 会使用父视图给定的全部建议尺寸创建滚动区域,但在询问其子视图的需求尺寸时只会提供理想尺寸。...SwiftUI 在进行布局时,当布局容器给出的建议尺寸无法满足全部子视图的需求尺寸时,会根据子视图的 Priority,优先满足级别较高的视图的布局需求。...尽管当前的需求仅有两个视图,但我们仍然可以从中提炼出场景特性:在垂直排列的前提下,在特定状态时,指定视图的底部与容器视图的底部对齐。

    4.8K80

    fullPage.js全屏滚动插件

    )滚动到最底部后是否滚回顶部 loopTop (true/false)滚动到最顶部后是否滚底部 loopHorizontal (true/false)左右滑块是否循环滑动 autoScrolling (.../触控板控制 setKeyboardScrolling() 添加或删除键盘方向键控制 setScrollingSpeed() 定义以毫秒为单位的滚动速度 6.回调函数 -- -- afterLoad...() 滚动到某一屏后的回调函数,接收 anchorLink 和 index 两个参数,anchorLink 是锚链接的名称,index 为序号,从1开始计算 onLeave() 滚动前的回调函数...,接收 index、nextIndex 和 direction 3个参数:index 是离开的“页面”的序号,从1开始计算;nextIndex 是滚动到的“页面”的序号,从1开始计算;direction...afterRender 页面结构生成后的回调函数,或者说页面初始化完成后的回调函数 afterSlideLoad 滚动到某一水平滑块后的回调函数,与 afterLoad 类似,接收 anchorLink

    15K20

    SwiftUI 视图的生命周期研究

    •在 SwiftUI 生成视图值树时,当发现没有对应的实例时,SwiftUI 会创建一个实例从而获取它的 body 结果。...比如在 List 和 LazyVStack 中,Cell 视图在创建之后即使滚动出屏幕不参与布局与渲染,但 SwiftUI 仍会保留这些视图的数据,直到 List 或 LazyVStack 被销毁。...SwiftUI 官方文档对 onAppear 和 onDisappear 的描述是:在此视图出现时执行的操作,在此视图消失时要执行的操作。这种描述与这两个修饰器在大多数场景下的行为很接近。...onAppear,滚动出屏幕后会触发 onDisappear,在 Cell 视图的存续期内可以多次触发 onAppear 和 onDisappear ScrollView { LazyVStack...•ScrollView + VStack 中,即使 Cell 视图没有出现在可见区域,但它在最开始就会参与容器的布局,因此会在创建初始便触发 onAppear,但无论如何滚动,所有的 Cell 视图始终会参与布局

    4.5K30

    AnyView 对 SwiftUI 性能的影响

    前言AnyView 是一种类型擦除的视图,对于 SwiftUI 容器中包含的异构视图非常方便。在这些情况下,你不需要指定视图层次结构中所有视图的具体类型。...如果是 AnyView(基本上是一个包装类型),SwiftUI 将很难确定视图的身份和结构,并且它将重新绘制整个视图,这并不是真正高效的。...正在测试的列表具有不同类型的数据(例如图像、视频、GIF、文本等)。在测试不同实现时执行相同的操作(例如,在内容上滚动三次)。数据以每页 25 个项目的形式获取。...没有 AnyView在没有 AnyView 包装器的情况下进行测试产生了与常规滚动测试相似的结果(58-59 FPS)。这也是预期的,因为 SwiftUI 知道视图的标识和结构。...当需要更新视图时,仅对其进行更改(例如,向视图添加另一个反应)。有 AnyView当我们在这种情况下使用 AnyView 时,事情就变得有趣了 - 在短时间内对屏幕上的视图进行频繁更新。

    15300
    领券