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

当键盘出现在SwiftUI中时,将TextEditor (在列表中)上移

基础概念

在SwiftUI中,TextEditor 是一个视图,允许用户输入和编辑文本。当键盘弹出时,可能会遮挡住 TextEditor 视图,影响用户体验。为了确保 TextEditor 在键盘弹出时仍然可见,可以使用一些技巧将其上移。

相关优势

  1. 提升用户体验:确保用户在输入时始终能看到他们正在编辑的内容。
  2. 避免遮挡:防止键盘遮挡重要的输入区域。

类型

  1. 使用 GeometryReaderPreferenceKey:通过监听键盘高度变化来调整 TextEditor 的位置。
  2. 使用 ScrollViewVStack:通过滚动视图来确保 TextEditor 始终可见。

应用场景

适用于需要用户输入文本的应用,如聊天应用、笔记应用、表单填写等。

问题及解决方法

问题:当键盘弹出时,TextEditor 被遮挡。

原因

键盘弹出时,视图布局没有相应调整,导致 TextEditor 被遮挡。

解决方法

使用 GeometryReaderPreferenceKey 来监听键盘高度变化,并调整 TextEditor 的位置。

代码语言:txt
复制
import SwiftUI

struct ContentView: View {
    @State private var keyboardHeight: CGFloat = 0

    var body: some View {
        GeometryReader { geometry in
            VStack {
                List {
                    TextEditor(text: $text)
                        .frame(height: 100)
                        .background(Color.gray.opacity(0.2))
                        .cornerRadius(10)
                        .padding(.all, 10)
                        .offset(y: -keyboardHeight)
                }
            }
            .background(GeometryReader {
                Color.clear.preference(key: KeyboardHeightPreferenceKey.self, value: -$0.frame(in: .named("screen")).size.height)
            })
            .onPreferenceChange(KeyboardHeightPreferenceKey.self) { value in
                keyboardHeight = value
            }
            .frame(maxWidth: .infinity, maxHeight: .infinity)
            .edgesIgnoringSafeArea(.all)
        }
    }
}

struct KeyboardHeightPreferenceKey: PreferenceKey {
    static var defaultValue: CGFloat = 0

    static func reduce(value: inout CGFloat, nextValue: () -> CGFloat) {
        value += nextValue()
    }
}

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

参考链接

SwiftUI TextEditor GeometryReader PreferenceKey

通过上述方法,可以确保当键盘弹出时,TextEditor 视图能够自动上移,避免被键盘遮挡。

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

相关·内容

深入了解 SwiftUI 5 ScrollView 的新功能

SwiftUI 5.0 ,苹果大幅强化了 ScrollView 功能。新增了大量新颖、完善的 API。本文将对这些新功能进行介绍,希望能够让它们更多、更早的帮助到有需要的开发者。...之前 List 或 TextEditor 实现类似操作是十分困难的。 默认的 ContentMarginPlacement(.automatic)导致指示器与内容之间的长度不一致。...仅适用于 ScrollView ForEach 的数据源遵循 Identifiable 协议,无需显式使用 id 修饰符设置标识 与 scrollTargetLayout 配合使用,可以获取当前的滚动位置...(视图标识) 不支持锚点设定,固定锚点为子视图的 center 正如 优化 SwiftUI List 显示大数据集的响应效率[6] 一文所提到的,数据集很大,也会出现性能问题。...就我个人而言, SwiftUI 5 ,ScrollView 的原生方案已经能够满足大多数需求,因此我们看到更多人采用 ScrollView + LazyStack 的组合方式。

77920

Ask Apple 2022 与 SwiftUI 有关的问答(

假设我们想创建一个类似于 iMessage 的视图,在那里你可以看到一个信息列表(与本例无关),视图的底部有一个文本框。当用户点击文本字段键盘会在其工具栏中出现一个文本字段。...最近,我注意到 SwiftUI 视图的 onAppear 在意想不到的时间启动,比如 UITabBarController 被创建,而不是视图本身出现时。...2、视图出现在 UITabBarController ,推荐的执行代码的方法是什么?...A:如果你 iOS 使用 UITextField 遇到性能问题,你可以尝试避免每个视图都是 UITextField ,默认渲染为 Text ,文本被点击动态切换为 UITextField 。...WindowGroup 和 OpenWindowActionQ: macOS 是否可以创建新窗口附加参数?我同一个子上下文中创建一个新的托管对象,并希望这个对象发送到一个新的窗口。

12.2K20
  • 掌握 SwiftUI 的 Safe Area

    UIKit ,开发者需要利用 safeAreaInsets 或 safeAreaLayoutGuide ,才能确保视图放置界面的可见部分。 SwiftUI 对上述过程进行了彻底的简化。...视图尚未在屏幕可见,该视图的 safeAreaInset 也为 0 。... SwiftUI ,开发者通常只有需要获取 StatusBar + NavBar 的高度或 HomeIndeicator + TabBar 的高度才会使用到 safeAreaInsets 。...从 iOS 14 开始,SwiftUI 计算视图的安全区域键盘在屏幕的覆盖区域(iPadOS 下,键盘缩小后键盘的覆盖区域将被忽略)也一并进行考虑。...safeAreaInsetList2 遗憾的是, iOS 15 之前,SwiftUI 并没有提供调整视图安全区的手段,如果我们想通过 SwiftUI 的手段创建一个自定义 Tabbar 列表中最后的内容将被

    7.6K31

    SwiftUI WWDC 24 之后的新变化

    我们还在 TabSection 实例使用 tabViewStyle 视图修饰符,特定的标签部分分组并移动到侧边栏。...英雄动画SwiftUI 引入了 matchedTransitionSource 和 navigationTransition,我们可以在任何 NavigationLink 实例配对使用。...extension EnvironmentValues { @Entry var itemsPerPage: Int = 10}预览新的 Previewable 宏允许我们预览引入状态,而无需将其包装到额外的包装视图中...框架的下一版本包括许多新 API,如窗口推送、TextField 和 TextEditor 视图中的文本选择观察、搜索焦点监控、自定义文本渲染、新的 MeshGradient 类型等等,我无法一篇文章涵盖所有内容...总结在 WWDC 24 SwiftUI 再次通过引入更多新功能来提升其成熟度,以赶上 UIKit。

    6600

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

    在任何SwiftUI应用,你都可以使用场景内容放到屏幕。场景包含要在屏幕显示的视图和控件。场景还定义了这些视图和控件出现在屏幕的外观。...图为虚拟3D键盘。这个人的右手敲击着J键。 直接输入。一个人的手指与屏幕的项目占据相同的空间,系统就会报告一个交互。额外的手指和手部动作定义手势类型。...这张照片显示了一个人的手桌子的物理键盘上打字。一个虚拟的建议条显示物理键盘的上方。 键盘输入。人们可以使用连接的鼠标、触控板或键盘与项目交互、触发菜单命令和执行手势。...指定的手势发生在实体SwiftUI执行提供的闭包。 下面的示例一个点击手势识别器添加到上一个示例的球体视图中。...如果不取消可见空间,那么您尝试打开另一个空间,系统发出运行时警告。

    88040

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

    事件 onEditingChanged TextField 获得焦点(进入可编辑状态),onEditingChanged调用给定的方法并传递true值; TextField 失去焦点,再次调用方法并传递...接受到的SubmitTriggers值不包含在 onSubmit 设置的SubmitTriggers,传递终止。... SwiftUI 3.0 之前,我们必须在主视图上另外绘制或者使用非 SwiftUI 的方式来解决问题, SwiftUI 3.0 ,由于添加了原生设置键盘辅助视图(下文具体介绍)的功能,解决上述问题将不再困难...另外,有时候为了提高交互体验,我们可以希望用户录入结束后,无需点击return按键,通过点击屏幕其他区域或者以滚动列表的方式来取消键盘。同样也需要使用编程的方式让键盘消失。...键盘辅助视图集成到 toolbar 的逻辑也有些令人令人费解。 通过 UIKit 创建 当前阶段,通过 UIKit 来创建键盘辅助视图仍是 SwiftUI 下的最优方案。

    13.2K10

    SwiftUI 布局 —— 尺寸(

    这并非意味着尺寸 SwiftUI 不重要,事实恰恰相反,正是由于 SwiftUI 尺寸是一个十分复杂的概念,苹果绝大多数有关尺寸的配置和表述都隐藏到了引擎盖之下,刻意对其进行了包装与淡化。...淡化尺寸概念的初衷或许是出于以下两点: 引导开发者转型到声明式编程逻辑,转变使用精准尺寸的习惯 掩盖 SwiftUI 复杂的尺寸概念,减少初学者的困扰 但无论如何淡化或掩盖,涉及更加高级、复杂、精准的布局... Layout 协议,对应的是 sizeThatFits 方法。经过该阶段的协商,SwiftUI 确定视图所在屏幕的位置和尺寸。... SwiftUI ,只有符合 View 协议的 component 才能被 ViewBuilder[3] 所处理。因此任何一种布局容器,最终都会被包装并以 View 的形式出现在代码。...父视图想获得子视图最大模式下的需求尺寸,会为其提供该模式的建议尺寸 明确尺寸模式 非 0 或 infinity 的数值。

    4.7K20

    AnyView 对 SwiftUI 性能的影响

    在这个测试,我们通过整个消息列表三次滚动。没有 AnyView下面是没有泛型实现的动画卡顿记录。...以下是动画卡顿仪器配置文件的结果。你可以在此示例中看到一些更多的橙色。有更多的动画卡顿超过了可接受的延迟时间 33 毫秒。这导致执行测试仪器和视觉都出现一些可见的卡顿。...需要更新视图,仅对其进行更改(例如,向视图添加另一个反应)。有 AnyView当我们在这种情况下使用 AnyView ,事情就变得有趣了 - 短时间内对屏幕的视图进行频繁更新。...仅浏览数据,如果你视图包装在 AnyView ,则会比不包装慢大约 10%。如果你浏览数据更改数据,则此差异增加到约 17%,而且这些故障在这里更加明显。...这意味着,列表发生更改时,我们实际重新创建了整个列表。这也解释了为什么 AnyView 实现随着时间的推移变慢 - 每次重绘都需要从头开始创建更多内容。

    11900

    SwiftUI WWDC作为开发者的我最激动的部分

    但是pad或者tv还是要写不同的代码去做在不同的平台运行。 Flutter受关注的最大原因应该是一份代码多平台运行吧,如果Apple划分的四大平台需要四份UI代码,想想是一件多么恐怖的事情。...SwiftUI 所有Apple平台都是原生的 ---- SwiftUI创造世界最创新、最直观的用户界面方面积累了数十年的经验。...用户喜欢苹果生态系统的所有方面,比如控件和特定于平台的体验,都可以代码很好地表现出来。SwiftUI是真正的本地应用程序, ?...SwiftUI语法是什么样的呢 ---- SwiftUI使用声明性语法,因此您可以简单地声明用户界面应该做什么。例如,您可以编写一个包含文本字段的项列表,然后描述每个字段的对齐方式、字体和颜色。...您在设计画布工作,您编辑的所有内容都与相邻编辑器的代码完全同步。您键入时,代码作为预览立即可见,并且您对该预览所做的任何更改都会立即出现在您的代码

    2.3K30

    LeetCode周赛296,难度较低的新人练习场

    你可以 nums 划分成一个或多个 子序列 ,使 nums 的每个元素都 恰好 出现在一个子序列。...表面上看子序列需要保证元素顺序和原来一样,但实际本题当中,子序列当中的相对顺序并不重要,我们不关心子序列当中的元素是如何排列的,我们只关心要用到多少子序列。...题目保证第 i 个操作: operations[i][0] nums 存在。 operations[i][1] nums 不存在。 请你返回执行完所有操作后的数组。...删除:光标所在处删除文本(模拟键盘的删除键)。 移动:光标往左或者往右移动。 删除文本,只有光标左边的字符会被删除。...请你实现 TextEditor 类: TextEditor() 用空文本初始化对象。 void addText(string text) text 添加到光标所在位置。

    29120

    LeetCode 6093. 设计一个文本编辑器(双栈)

    题目 请你设计一个带光标的文本编辑器,它可以实现以下功能: 添加:光标所在处添加文本。 删除:光标所在处删除文本(模拟键盘的删除键)。 移动:光标往左或者往右移动。...删除文本,只有光标左边的字符会被删除。 光标会留在文本内,也就是说任意时候 0 <= cursor.position <= currentText.length 都成立。...请你实现 TextEditor 类: TextEditor() 用空文本初始化对象。 void addText(string text) text 添加到光标所在位置。...添加完后光标 text 的右边。 int deleteText(int k) 删除光标左边 k 个字符。返回实际删除的字符数目。...string cursorLeft(int k) 光标向左移动 k 次。返回移动后光标左边 min(10, len) 个字符,其中 len 是光标左边的字符数目。

    37330

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

    本节的内容仅代表我考虑处理上述问题的想法和思路。其中不少功能已经超出了原本的需求,增加这些功能一方面有利于更多地融汇以前博客的知识点,另一方面也提高了解题的乐趣。...ForEach ( 上面的代码使用了隐式 ForEach 形式 )的 View 添加显式标识符后( 使用 id 修饰器),视图刷新,List 将会为 ForEach 的所有视图创建实例( 并非渲染...List ,每个视图进入显示窗口都会调用它的 onAppear,每个视图退出显示窗口都会调用它的 onDisapper。..._25_53搜索条出现时,让 TextField 获得焦点通过 @FocusState ,让 TextField 搜索条出现时,自动获得焦点,从而自动开启键盘。...每周也会对当周博客的新文章以及 Twitter 发布的 Tips 进行汇总,并通过邮件列表的形式发送给订阅者。订阅 邮件列表[14],可以及时获得每周的 Tips 汇总。

    4.2K30

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

    连锁动画Q: SwiftUI ,如何实现连锁动画?例如,我想先给一个视图做动画,动画完成后立即启动另一个动画。A:不幸的是,目前不可能实现连锁动画。...A:解决办法:保留 TextField ,但它不能被编辑,有条件地设置 disabled(true),它可以编辑使用 disabled(false) 。...Q&A ( 集锦 - 简体中文 )下文中的问题来自开发者与苹果工程师【 集锦 - 简体中文 】频道进行的中文讨论( 没有出现在英文 SwiftUI 频道 )。我直接对其进行了复制粘贴。...这是一个多个版本中都出现过的奇怪问题。 SwiftUI 早期版本,当在 iOS 中使用系统中文输入法,很容易触发这种情况。但后期逐步得到了修复。...每周也会对当周博客的新文章以及 Twitter 发布的 Tips 进行汇总,并通过邮件列表的形式发送给订阅者。订阅下方的 邮件列表[23],可以及时获得每周的 Tips 汇总。

    14.8K30

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

    子视图进入惰性容器的可视区域SwiftUI 会调用它的 onAppear 闭包,子视图退出可视区域,会调用 onDisappear 闭包。...协调器具备的众多功能,“行缓存”是其中很有特点的一个。所谓行缓存,便是指 Core Data 从 SQLite 获取数据,首先将数据以接近原始存储格式的形式保存在行缓存( 内存 )。...它保证了,只真正对数据有需求,才对数据进行获取( 实例化 )。提高了性能的同时,也尽量减少了对内存的占用。 本例,只有视图首次出现在 List 的可视区域,Item 才会被填充数据。...数据的多份拷贝 图片数据从 SQLite 经 Core Data 最终通过 SwiftUI 显示,实际在内存至少保存了三份拷贝: 行缓存 托管对象上下文( 托管对象被填充后 ) 显示该图片的 SwiftUI...} 最终的代码,我们对图片数据在内存的三个备份实现了有效的控制。同一间( 理想情况下 ),只有出现在可视区域的图片数据才会保存在内存

    1.3K10

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

    子视图进入惰性容器的可视区域SwiftUI 会调用它的 onAppear 闭包,子视图退出可视区域,会调用 onDisappear 闭包。...图片 协调器具备的众多功能,“行缓存”是其中很有特点的一个。所谓行缓存,便是指 Core Data 从 SQLite 获取数据,首先将数据以接近原始存储格式的形式保存在行缓存( 内存 )。...它保证了,只真正对数据有需求,才对数据进行获取( 实例化 )。提高了性能的同时,也尽量减少了对内存的占用。 本例,只有视图首次出现在 List 的可视区域,Item 才会被填充数据。...数据的多份拷贝 图片数据从 SQLite 经 Core Data 最终通过 SwiftUI 显示,实际在内存至少保存了三份拷贝: 行缓存 托管对象上下文( 托管对象被填充后 ) 显示该图片的 SwiftUI...} 最终的代码,我们对图片数据在内存的三个备份实现了有效的控制。同一间( 理想情况下 ),只有出现在可视区域的图片数据才会保存在内存

    2.4K40

    「Spring认证」Spring 依赖注入

    SpellChecker 独立实现,并在 TextEditor 实例化时提供给 TextEditor。整个过程由 Spring 框架控制。...此实例将用于调用 setter 方法来初始化 TextEditor 的属性。 因此,DI 存在于两个主要变体,以下两个子章节通过示例涵盖它们 - 不。...依赖注入类型和描述 1 基于构造函数的依赖注入容器调用带有多个参数的类构造函数,基于构造函数的 DI 就完成了,每个参数代表对另一个类的依赖。...2 基于 Setter 的依赖注入基于 Setter 的 DI 是通过容器调用无参数构造函数或无参数静态工厂方法来实例化 bean 后调用 bean 的 setter 方法来完成的。...使用 DI 原则,代码更清晰,对象提供依赖项,解耦更有效。该对象不查找其依赖项,也不知道依赖项的位置或类,而是由 Spring 框架处理所有事情。

    52820

    AVKit框架详细解析(四) —— 基于AVKit 和 AVFoundation框架的视频流App的构建

    注意:视频可能无法模拟器播放。 真实设备运行该应用程序缓解该问题。 入门项目是一个 vlogger 应用程序,您将使用 AVKit 和 AVFoundation 添加功能和特性。...现在,是时候您的视频剪辑列表添加到播放器,以便它可以开始播放它们。...它到达最后一个视频,您将再次所有剪辑添加到队列谈到“跟踪”播放器的信息,唯一的途径就是使用键值观察(KVO)。 是的,这是 Apple 提出的最奇怪的 API 之一。...Context) { uiView.setVolume(volume) uiView.setRate(rate) } 这一次,您还向 updateUIView(_:context:) 添加了一些行,以说明视图屏幕音量和速率的变化...尝试设备运行。

    6.9K10

    Xcode 11 初体验

    Assistant、和 Vesion Editor下的Autor 选项卡合并为一项,并从主导航移除,向下移到每个编辑面板,组成 Editor Option。...指定文件打开位置 上面我们介绍了窗口分割, Xcode 11 ,你还可以按住 Option + Shift,然后左边点击要打开的文件,这时会出现窗口选择提示 你可以用键盘,或者鼠标任意方式选择你要打开这个文件的窗口...,选中后点击鼠标左键或者键盘的Enter 键,就可以指定窗口打开这个文件了。...Resolving 三方框架 设计工具(Design Tools) 可以随时查看各设备的效果以及作出更改。 开发和调试,随时暗黑和明亮模式之间进行切换。...Git Tab页面,会展示出当前本地 Branches 列表、Stash Changes 列表、Tags 列表、Remotes 远程仓库列表

    3.2K10

    如何在 SwiftUI 创建悬浮操作按钮

    尽管它来自 Android,但在一些 iOS 应用也可以看到这种模式。以下是 Twitter 应用悬浮操作按钮的示例。Twitter App 最重要的操作步骤,发布推文使用悬浮操作按钮。...如下图,右下角有一个蓝底中间有加号的按钮。下面我们就来详细介绍一下还如何实现这个悬浮按钮需求。创建悬浮操作按钮如何 SwiftUI 创建一个类似 Twitter App 的悬浮按钮。...以下是一个简单的列表视图,嵌套在导航视图和选项卡视图中,列表显示了 item 加索引内容。...,是需要实现需求的第一步,悬浮按钮应该出现在屏幕的主要内容前面。...一个按钮放在内容视图上。这将在列表视图上添加一个加号图像按钮。示例运行截图如下:悬浮按钮位于屏幕的右下角接着,是需要实现需求的第二步,使按钮与内容视图对齐到右下角。

    14432
    领券