SwiftUI 弹出键盘不影响布局

关于我:大厂摸鱼 + 业余独立开发,之后会输出深度技术文章 + 独立开发技巧

我的往期技术文章合集:RickeyBoy - Gitbub

我的独立开发 App:iColors - 设计灵感 配色助手

今天来讲一个简单又实用的细节,如何在 SwiftUI 中避免因为键盘弹起,而影响页面布局的方法。

实现效果

就以我的独立 App 中的一个场景为例:在自制色卡后,需要给色卡命名,这时需要弹起键盘

优化前 优化后
键盘弹起后,背景布局受影响 键盘弹起后,不影响其他布局

实现方案

先看看原本的布局代码,非常简单的一个 VStack 结构

Swift 复制代码
VStack() {
    ImageContent() // 中央核心内容
}

想要避免键盘弹起影响布局,需要使用 .ignoresSafeArea(.keyboard, edges: .bottom),当然,需要添加到 VStack 的外层:

Swift 复制代码
VStack() {
    ImageContent() // 中央核心内容
}
.ignoresSafeArea(.keyboard, edges: .bottom)

不过这种情况下测试,发现并没有修复原有的问题。经过调查发现,除了使用 ignoresSafeArea(.keyboard) 之外,还需要确保目标视图占据全屏!

比如,下面这样利用 Spacer,就可以了:

Swift 复制代码
// 方法 1:通过 Spacer() 撑满全屏
VStack() {
    Spacer()
    ImageContent() // 中央核心内容
    Spacer()
}
.ignoresSafeArea(.keyboard, edges: .bottom)

还有一种更巧妙一点的方法,使用 GeometryReader,这样可以避免需要添加 Spacer 而造成的布局调整

Swift 复制代码
// 方法 2:利用 GeometryReader 包裹一层
GeometryReader { _ in
  VStack() {
      ImageContent() // 中央核心内容
  }
}
.ignoresSafeArea(.keyboard, edges: .bottom)
相关推荐
他们都不看好你,偏偏你最不争气1 小时前
【iOS】多界面传值
ios
MaoJiu18 小时前
Flutter混合开发:在iOS工程中嵌入Flutter Module
flutter·ios
2501_9159214320 小时前
小团队如何高效完成 uni-app iOS 上架,从分工到工具组合的实战经验
android·ios·小程序·uni-app·cocoa·iphone·webview
2501_9160088921 小时前
uni-app iOS 文件管理与 itools 配合实战,多工具协作的完整流程
android·ios·小程序·https·uni-app·iphone·webview
Digitally1 天前
如何将视频从 iPhone 转移到 Mac
macos·ios·iphone
2501_916007471 天前
uni-app iOS 文件调试常见问题与解决方案:结合 itools、克魔、iMazing 的实战经验
android·ios·小程序·https·uni-app·iphone·webview
豆豆(设计前端)1 天前
使用 Uni-app 打包 外链地址APK 及 iOS 注意事项
ios·uni-app
库奇噜啦呼1 天前
属性关键字
ios
2501_915918411 天前
uni-app 项目 iOS 上架踩坑经验总结 从证书到审核的避坑指南
android·ios·小程序·https·uni-app·iphone·webview
游戏开发爱好者81 天前
iOS 上架 uni-app 流程全解析,从打包到发布的完整实践
android·ios·小程序·https·uni-app·iphone·webview