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

iOS14键盘回避问题和IgnoresSafeArea修饰符问题中的SwiftUI

iOS 14 键盘回避问题和 ignoresSafeArea 修饰符问题中的 SwiftUI

基础概念

在 iOS 开发中,键盘回避(Keyboard Avoidance)是指当键盘弹出时,应用程序界面能够自动调整,以确保用户仍然可以访问重要的交互元素,如输入框。ignoresSafeArea 是 SwiftUI 中的一个修饰符,用于指示视图应该忽略安全区域(Safe Area)的约束。安全区域通常包括屏幕边缘的区域,这些区域可能会被刘海、圆角或其他界面元素遮挡。

相关优势

  • 键盘回避:确保用户在键盘弹出时仍然可以轻松地与应用程序交互,提升用户体验。
  • ignoresSafeArea:允许开发者更灵活地布局视图,特别是在处理特殊屏幕设计(如刘海屏)时。

类型

  • 自动键盘回避:系统自动调整视图位置以避免被键盘遮挡。
  • 手动键盘回避:开发者通过代码手动调整视图位置。

应用场景

  • 当用户在输入框中输入文本时,键盘弹出可能会遮挡输入框,此时需要键盘回避。
  • 在设计包含刘海屏或圆角屏幕的应用时,可能需要使用 ignoresSafe面积 来确保内容不会被屏幕的特殊设计遮挡。

遇到的问题及原因

在 iOS 14 中,可能会遇到键盘回避不工作或 ignoresSafeArea 修饰符导致内容被错误地裁剪的问题。

原因
  • 键盘回避问题:可能是由于视图的布局约束没有正确设置,或者是因为某些视图覆盖了输入框,导致系统无法正确计算回避距离。
  • ignoresSafeArea 问题:可能是由于过度使用 ignoresSafeArea 修饰符,导致内容被不恰当地放置在屏幕的非安全区域内。

解决方法

键盘回避问题

确保输入框的视图在 ZStackVStack 中正确布局,并且没有其他视图覆盖它。可以使用 GeometryReader 来动态调整视图位置。

代码语言:txt
复制
struct ContentView: View {
    @State private var text = ""

    var body: some View {
        GeometryReader { geometry in
            VStack {
                TextField("Enter text", text: $text)
                    .frame(height: 40)
                    .background(Color.gray.opacity(0.2))
                    .cornerRadius(10)
                    .padding(.all, 20)

                Spacer()
            }
            .frame(width: geometry.size.width, height: geometry.size.height)
            .background(Color.white)
            .cornerRadius(20)
            .padding(.bottom, geometry.safeAreaInsets.bottom + 20) // Adjust padding based on safe area
        }
    }
}
ignoresSafeArea 问题

谨慎使用 ignoresSafeArea 修饰符,只在必要时使用。可以通过嵌套视图来控制哪些部分应该忽略安全区域。

代码语言:txt
复制
struct ContentView: View {
    var body: some View {
        ZStack {
            Color.blue
                .ignoresSafeArea() // Only the blue background ignores safe area

            VStack {
                Text("Hello, World!")
                    .padding(.all, 20)
            }
            .background(Color.white)
            .cornerRadius(20)
            .padding(.safeAreaInsets) // This view respects safe area
        }
    }
}

参考链接

通过以上方法和示例代码,可以有效解决 iOS 14 中的键盘回避问题和 ignoresSafeArea 修饰符问题。

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

相关·内容

掌握 SwiftUI Safe Area

•all(默认)上述两种安全区域划分合集 iOS 13 并没有提供键盘自动避让功能,开发者需要编写一些额外代码来解决软键盘不恰当遮盖视图(如 TextField )问题。...从 iOS 14 开始,SwiftUI 计算视图安全区域时,将软键盘在屏幕上覆盖区域(iPadOS 下,将软键盘缩小后键盘覆盖区域将被忽略)也一并进行考虑。...尽管通过 ignoresSafeArea 可以解决上述问题,但在什么位置添加、如何设定还是有一点讲究。...safeAreaInset 修饰符出现解决了上述问题。通过 safeAreaInset,我们可以缩小视图安全区域,以确保所有内容都可以按预期显示。...相同代码,在 iPhone 8 下表现 image-20211120172325088 iOS 15.2 之前版本,safeAreaInset 对 List Form 支持有问题(ScrollView

7.7K31

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

本文将对 SwiftUI zIndex 修饰符做以介绍,包括:使用方法、zIndex 作用域、通过 zIndex 避免动画异常、为什么 zIndex 需要设置稳定值以及在多种布局容器内使用 zIndex...访问我博客 www.fatbobman.com[1] 可以获得更好阅读体验 zIndex 修饰符SwiftUI 中,开发者使用 zIndex 修饰符来控制重叠视图间显示顺序,具有较大 zIndex...在没有指定 zIndex 值时候,SwiftUI 默认会给视图一个为 0 zIndex 值。...通过为视图指定稳定 zIndex 值,可以避免上述问题。下面的代码,为每个视图添加了稳定 zIndex 值,该值并不会因为有视图被删除就发生变化。...zIndex 并非 ZStack 专利 尽管大多数人都是在 ZStack 中使用 zIndex ,但 zIndex 也同样可以使用在 VStack HStack 中,且通过 spacing 配合

1.8K30
  • SwiftUI 方式进行布局

    本文将通过用多种手段完成同一需求方式,展示 SwiftUI 布局系统强大与灵活,并通过这些示例让开发者对 SwiftUI 布局逻辑有更多认识理解。...我们也可以使用其他修饰符( 例如:padding、postion )采用该布局思路实现上述需求。 .offset(y: show ?...有关这方面的内容,请参阅 SwiftUI 布局 —— 尺寸( 下 )[4] 一文中“面子里子”章节。...VStack 纵向需求尺寸为视图一与视图二高度,而通过 overlay 嵌套,纵向需求尺寸仅为视图二高度( 尽管视觉上视图一在视图二上方且紧密相连 )。...布局 —— 尺寸( 下 ): https://www.fatbobman.com/posts/layout-dimensions-2/#面子里子 [5] SwiftUI 布局 —— 尺寸( 上 )

    3.3K00

    SwiftUI 方式进行布局

    最近时常有朋友反映,尽管 SwiftUI 布局系统学习门槛很低,但当真正面对要求较高设计需求时,好像又无从下手。SwiftUI 真的具备创建复杂用户界面的能力吗?...本文将通过用多种手段完成同一需求方式,展示 SwiftUI 布局系统强大与灵活,并通过这些示例让开发者对 SwiftUI 布局逻辑有更多认识理解。 可在 此处 获取本文代码。...我们也可以使用其他修饰符( 例如:padding、postion )采用该布局思路实现上述需求。 .offset(y: show ?...有关这方面的内容,请参阅 SwiftUI 布局 —— 尺寸( 下 ) 一文中“面子里子”章节。...VStack 纵向需求尺寸为视图一与视图二高度,而通过 overlay 嵌套,纵向需求尺寸仅为视图二高度( 尽管视觉上视图一在视图二上方且紧密相连 )。

    4.8K80

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

    视图为您界面提供基本内容,您可以使用SwiftUI修饰符自定义视图外观行为。...人眼睛表明了互动目标。为了开始互动,人们用一只或两只手同时触摸拇指食指。额外手指手部动作定义手势类型。 图为虚拟3D键盘。这个人右手敲击着J键。 直接输入。...当一个人手指与屏幕上项目占据相同空间时,系统就会报告一个交互。额外手指手部动作定义手势类型。 这张照片显示了一个人手在桌子上物理键盘上打字。一个虚拟建议条显示在物理键盘上方。...键盘输入。人们可以使用连接鼠标、触控板或键盘与项目交互、触发菜单命令执行手势。 构建并运行你app页面链接 在模拟器中构建并运行你应用,看看它看起来如何。...使用修饰符定位SwiftUI视图,使用转换组件定位RealityKit实体。SwiftUI最初将空间原点放在人脚上,但可以根据其他事件改变这个原点。

    95140

    探索 App Clips

    ◆ ◆  ◆ 开发 App Clips从iOS14开始支持,所以可以直接用SwiftUI进行开发,这也是苹果所推荐开发形式。...因为App Clips是从iOS14推出,而SwiftUI是从iOS13推出,所以我们可以选择使用SwiftUI进行开发,这也是苹果推荐开发方案,当然也可以选择UIKit方式。...◆ ◆  ◆ 客户端代码 客户端进行开发时,无论采用UIKit还是SwiftUI,都是通过NSUserActivity对App Clips传入URL做解析处理,并根据URL处理不同业务逻辑,这块 ...对于URL处理,使用UIKitSwiftUI处理方式不同,如果是UIKit则采用下面的方法处理URL传参。 UIKit通过UIScene代理方法接收回调,例如下面的方式。...但是对于App Clips审核标准,经过苹果开发者团队沟通,截止目前还未有审核标准发出,估计要等iOS14出来应该就会有审核标准出来。

    1.9K20

    解析SwiftUI布局细节(二)循环轮播+复杂布局

    2、稍微复杂点View布局思路一些细节知识 3、SwiftUI循环轮播图 这次总结首页UI布局如下,我们下面一点点解析: ?...界面跳转问题 ---- 正常界面跳转逻辑实现是比较简单,我们先看看这个很简单正常跳转,再说说我们问题: NavigationView{ VStack{...NavigationView + NavigationLink 界面跳转,在苹果给 SwiftUI 使用例子中就是这样写,当然我们在正常使用中这样写也没啥问题,那我们界面跳转问题是什么呢?...,都比较简单,可能是就是这个 environmentObject (我把它称为环境变量)这个是需要特别说明一个变量,从名字上可以看出,这个修饰符是针对全局环境。...传送门在这 下面是我们值得细说一些点: 1、值得注意 TabView + PageTabViewStyle 这是在iOS14中新出一个值得我们注意点,PageTabViewStyle

    12.1K20

    SwiftUI 布局 —— 尺寸( 下 )

    本篇中,我们将通过对视图修饰器 frame offset 仿制进一步加深对 SwiftUI 布局机制理解,并通过一些示例展示在布局时需要注意问题。...面子里子 与 UIKit AppKit 类似,SwiftUI 布局操作是在视图层面( 里子 )进行,而所有针对关联图层( backing layer )操作仍是通过 Core Animation...中,offset 修饰符对应是 Core Animation 中 CGAffineTransform 操作。....这种包装行为作用为( 以 MyFrameLayout 举例 ): 简化代码 改善由 Layout 协议 callAsFunction 所带来多括号问题 预处理子视图 在 SwiftUI 布局 ——...当 min 或( ) max 有值时,会按如下规则返回 _FlexFrameLayout 在该维度上需求尺寸( 下图来自于 SwiftUI-Lab[6] ) frame-flow-chart

    2.7K40

    SwiftUI内容边距

    前言SwiftUI 引入了一组视图修饰符,使我们能够有效地管理视图中安全区域。在许多情况下,安全区域是你希望放置内容地方。...200 : 0) } }}我们通过使用 horizontalSizeClass 环境值 safeAreaPadding 视图修饰符,将内容移动到了 iPad 上中心。...幸运是,SwiftUI 引入了新 contentMargins 视图修饰符,使我们能够在视图中移动特定类型内容。...总结本文介绍了 SwiftUI内容边距管理,通过对比安全区域概念,解释了内容边距重要性。文章从创建示例开始,展示了在列表视图中如何处理内容边距问题。...最后,引入了 contentMargins 视图修饰符,并详细解释了其用法参数,以及如何使用它来管理内容边距。通过本文,读者可以更好地理解并掌握 SwiftUI 中内容边距管理技巧。

    17632

    优化在 SwiftUI List 中显示大数据集响应效率

    本文将通过一个优化列表视图案例,展现在 SwiftUI 中查找问题、解决问题思路,其中也会对 SwiftUI 视图显式标识、@FetchRequest 动态设置、List 运作机制等内容有所涉及...列表视图初始化 body 求值 如果对 SwiftUI NavigationView 有一定了解的话,应该知道 SwiftUI 会对 NavigationLink 目标视图进行预实例化(但不会对...)中视图类型具体位置来区分视图。...除非没有其他选择,否则我并不推荐大家对 UIKit ( AppKit ) 控件进行重新包装,应使用尽可能微小侵入方式对 SwiftUI 原生控件进行补充完善。...生产中处理方式 本文为了演示 id 修饰符在 ForEach 中异常状况以及问题排查思路,创建了一个在生产环境中几乎不可能使用范例。

    9.2K20

    iOS14适配汇总:【1、隐私权限相关:定位、相册、IDFA 2、KVC相关3、UIView相关;4、网络相关】

    【定位授权新增了精确模糊定位 可根据不同需求设置不同定位精确度】向用户申请临时开启一次精确位置权限方案(不同场景可定义不同purposeKey) iOS14隐私权限适配:【相册权限】 iOS14...,tabbar不显示问题 iOS14适配:【解决iOS14下pop多层控制器至首页时,tabbar不显示问题】方案1:重写pushViewController;方案2: hook hidesBottomBarWhenPush...【 采用hook全局性地解决UITableViewCell兼容问题】往cell添加子视图方式不规范,导致contentView 置于自定义控件上层,引发界面无响应(注意处理相关方法) 因此问题涉及是添加子视图...cell.addSubView方法,因此与之对应方法(UITableViewCell *)[SubView superview] cell.subviews方法 都要注意谨慎使用处理 iOS14适配...方法处理机制(问题:无法显示图片) IV、第三方框架相关 4.1 QMUIKit iOS14 下首次唤起键盘卡住主线程 Main Thread Checker: UI API called on a

    1.6K30

    SwiftUI 中布局工作原理

    在幕后,SwiftUI 执行第四步:尽管它将位置大小存储为浮点数,但在渲染时,SwiftUI 会将所有像素舍入到最接近值,这样我们图形仍然清晰。....background(Color.red) } } 你会看到背景色紧紧围绕着文本本身——它只占用足够空间来适应我们提供内容。 现在,想想这个问题:ContentView有多大?...在 Project3 为什么 SwiftUI 修饰符顺序很重要?...SwiftUI:好,我把你放在中间。 如果你还记得为什么 SwiftUI 修饰符顺序很重要?。也就是说,这个代码: Text("Hello, World!")...当你听苹果公司 SwiftUI 工程师谈论修饰符时,你会听到他们把它们称为视图——“the frame view”、“ the background view”等等。

    3.8K20

    如何让 SwiftUI 列表变得更加灵活

    中初版概念 API 编写,下面让我们尝试使用新功能来为我们列表实现自定义样式,并且使代码更加健壮。...元素绑定自定义滑动操作 接下来,让我们看看如何将完全自定义滑动操作添加到列表中。...,即使我们应用程序在较旧操作系统版本上运行,也是没有问题。...在列表中使用 refreshable 修饰符就可以完成,然后使用该修饰符闭包 await 调用视图模型异步 reload 方法: struct ArticleList: View { @ObservedObject...总结 SwiftUI 正在变得更加灵活强大,后面我将继续探索更多新推出 API,并在这里发布分享,欢迎持续关注,为了防止丢失,建议为本号设置星标。

    4.9K41

    SwiftUI TextField进阶——格式与校验

    作为UITextField(NSTextField)SwiftUI封装,苹果为开发者提供了众多构造方法修饰符以提高其使用便利性、定制性。...但SwiftUI在封装中也屏蔽了不少高级接口功能,增加了开发者实现某些特定需要复杂性。...SwiftUI修饰方法) 以上原则,在SheetKit——SwiftUI模态视图扩展库[3]用NavigationViewKit增强SwiftUI导航视图[4]中均有体现。...如何在TextField中屏蔽无效字符 现有屏蔽字符方法 在SwiftUI中,可以通过设置仅使用特定键盘类型来实现一定程度上录入限制。...其他需要注意问题 在使用上面的思路进行实际编程前,我们还需要考虑其他几个问题: 本地化 本文提供演示代码[6]中实现了对IntDouble两种类型实时处理。

    8.2K20

    SwiftUI 动画机制

    同所有 SwiftUI 视图修饰符一样,在代码中所处位置决定了修饰符作用对象范围。 animation 作用对象仅限于它所在视图层次及该层次子节点。 上面两段代码没有对错之分。...ViewBuilder 研究(下) —— 从模仿中学习[7] 显式标识 在 SwiftUI 中,为视图设置显式识别有两种方式:ForEach id 修饰符。...控件动画问题 SwiftUI不少控件是采用对 UIKit( AppKit )控件进行封装实现,当前动画处理并不到位。...相较于控件动画,控制器动画问题则更加难以解决。...除了动画逻辑可以更 SwiftUI 化外,最好也能将 AnyTransition 用于控制器过渡设定。 动画性能问题 响应式动画反应略逊于命令式动画几乎是必然

    14.8K40

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

    ,我可以隐藏一个并将焦点转移到键盘上。...然后根据它焦点状态来定制它显示样式。希望这对你设计有用。自从 SwiftUI 3.0 提供了 safeAreaInset 视图修饰器之后,实现问题中案例将不再是难事。...我是 SwiftUI 新手。我问题是关于场景。几乎所有教程示例代码库中,只使用了一个 WindowGroup 场景,所有内容都嵌套在 ContentView 中。...对我来说,这似乎是一个完全合理实现。如果你遇到了性能问题或者希望大幅扩展你所绘制图片数量,可以试一下 .drawingGroup Canvas APIs ,它们都可以用于更密集地绘制。...我正以聊天室、Twitter、博客留言等讨论为灵感,从中选取有代表性问题技巧制作成 Tips ,发布在 Twitter 上。

    12.3K20

    深入了解 SwiftUI 5 中 ScrollView 新功能

    它只会影响最近一个视图。 对于全面屏额外安全区域,safeAreaInset safeAreaPadding 处理逻辑不一致。...,但当数据集很大时,仍然会有较严重性能问题。...可采用 优化在 SwiftUI List 中显示大数据集响应效率[5] 一文中介绍方式来解决。 scrollPostion(id:) 使用此修饰符可以让滚动视图滚动到特定位置。...(视图标识) 不支持锚点设定,固定锚点为子视图 center 正如 优化在 SwiftUI List 中显示大数据集响应效率[6] 一文所提到,当数据集很大时,也会出现性能问题。...总结 我完全没有想到,在 SwiftUI 5 中,苹果对 ScrollView 进行了全面增强。值得赞赏是,他们不仅提供了一些一直期待功能,而且在 API 设计实现完成度上都非常出色。

    83620

    高级 SwiftUI 动画 — Part 1:Paths

    显式动画 VS 隐式动画 在SwiftUI中,有两种类型动画。显式隐式。隐式动画是你用 .animation() 修饰符指定那些动画。...你可能会,为什么我需要关心所有这些小细节。SwiftUI 已经为不透明度制作了动画,而不需要我担心这一切。是的,这是真的,但只要 SwiftUI 知道如何将数值从原点插值到终点。...然而,它默认实现被设置为EmptyAnimatableData。所以它什么都不做。 为了解决我们问题,我们将首先改变边属性类型,从Int到Double。这样我们就可以有小数数字。...你只需要添加 .drawingGroup() 修饰符: FlowerView().drawingGroup() 根据 WWDC 2019, Session 237(用SwiftUI构建自定义视图):绘图组是一种特殊渲染方式...它将打开改变我们视图动画新方法大门。与 Paths 一样,SwiftUI 没有关于如何在两个不同变换矩阵之间转换内置知识。GeometryEffect将有助于我们这样做。

    3.8K20

    iOS14来啦!你们准备好了吗?

    本次主题演讲没有现场观众、欢呼掌声,但如约推出了iOS14。根据官方给出更新信息及iOS14 Beta 1实际体验,小编初步感受到了一些iOS14新变化。...; 为 iPhone XR、iPhone XS iPhone XS Max 增加了视频快录功能; 当麦克风和摄像头被调用时,状态栏会显示绿色或橙色指示灯; Safari 浏览器增加隐私报告功能,可以显示被拦截跨站点跟踪器...; 可以设置默认浏览器电子邮件 App; 增加了五笔键盘; Siri 采用了紧凑型设计,在处理用户提问时不再占用整个屏幕; AirPods Pro AirPods (第二代)可在设备之间根据用户使用场景自动切换音频源...后续关注 1.持续关注 iOS14在推出Beta 1与9月份推出正式版之间,还会推出多个Beta版本,需要持续关注每个Beta版本更新情况,例如:修复了哪些问题、新版本已知问题、功能是否有调整(大家可以持续关注微信公众号...总结 以上是根据官方给出更新信息及iOS14 Beta 1实际体验,提取一些测试点,希望大家补充与指正!

    66930

    解析SwiftUI布局细节(一)

    )容器,它们前面的VH也就是这两单词首字母,提醒一下你要是记不住的话可以记这一点。...当然这个横向纵向也是相对你手机屏幕是竖直还是水平,不是绝对,这个理解一下也容易!...那他普通闭包区别也就在@ViewBuilder上,我们就把重点转移到对@ViewBuilder理解上了。...我们要再往深入挖掘一下,因为后面还有个问题需要我们注意,在ViewBuilder最后一个Extension中buildBlock代码是这样 @available(iOS 13.0, macOS...我想加一个点击除了输入框之外收起键盘操作,我们具体实现方法其实就是在最底层添加了一个View,然后在它上面添加了点击手势,具体得我们看看代码: /// 定义一个常见背景View struct Background

    2.4K10
    领券