首页
学习
活动
专区
工具
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.1K61

深入了解 SwiftUI 5 中 ScrollView 新功能

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

74020

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

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

14.7K30

掌握 SwiftUI Safe Area

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

7.6K31

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

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

1.2K10

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

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

2.4K40

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

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

8K30

【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 上表现差异是前提,其次是将焦点元素滚动到可视区,同时要考虑到第三方输入法和某些浏览器上差别。

3.9K12

SwiftUI 方式进行布局

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

3.2K00

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

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

12.2K20

SwiftUI 方式进行布局

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

4.8K80

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

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

8K20

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.4K30

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

14.9K20

AnyView 对 SwiftUI 性能影响

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

9600

解决移动端手机浏览器软键盘遮挡输入框问题

在手机端经常有这样需求 , 最下面是输入框类似微信输入框 , 我们一般设置成了position:fixed 但是点击到输入框时候, 软键盘弹出来遮挡了输入框 其实解决这个问题非常简单 , 那就是让...body滚动到底部 , 我们给个滚动最大值就可以了 例如下面的jquery: $(window).resize(function(){...$('body').scrollTop(99999999); }); 窗口大小变化时 , 滚动到底部 ,微信也是这样效果 ?...$(window).resize(function(){ var docheight = $(window).height(); /*唤起键盘时当前窗口高度*/ console.log(docheight...this.scrollBottom(); $('body').scrollTop(99999999); // if(docheight < windheight){ /*唤起键盘高度小于未唤起键盘高度时执行

1.6K20

基础篇章:React Native之 ScrollView 讲解

关于我,我还想说,我这个人身上笑点比较低,随便一触摸就想笑,当然,你们摸我,让我干什么事,我还是很听话,唯独有一点就是你们别想让我,让我是有条件,条件就是必须让我吃饱,吃撑了才可以,这样我才有力气滚动...on-drag 拖拽开始时候隐藏软键盘。 interactive 软键盘伴随拖拽操作同步地消失,并且如果往上滑动会恢复键盘。安卓设备上不支持这个选项,会表现和none一样。...如果为true,滚动视图不会响应点击操作,并且键盘不会自动消失。默认值为false。...pagingEnabled 如果为true,滚动视图滚动视图大小倍数滚动时停止。这可用于水平分页。默认值false。...在ScrollView视图之外视图(该视图overflow属性值必须要为hidden)会从被暂时移除,该设置可以提高滚动性能。

1.9K50
领券