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)
相关推荐
2301_8210465215 分钟前
Python与Go结合
ios·iphone
他们都不看好你,偏偏你最不争气1 小时前
【iOS】AFNetworking
开发语言·macos·ios·objective-c
zhanggui3 小时前
iOS Debug Symbols
ios·xcode·debug symbox
库奇噜啦呼8 小时前
【iOS】static、const、extern关键字
ios
zzywxc7879 小时前
AI工具全景洞察:从智能编码到模型训练的全链路剖析
人工智能·spring·ios·prompt·ai编程
前端 贾公子10 小时前
《Vuejs设计与实现》第 16 章(解析器) 上
vue.js·flutter·ios
Digitally19 小时前
如何将大型音频文件从 iPhone 发送到不同的设备
ios·iphone
吴Wu涛涛涛涛涛Tao1 天前
Flutter 实现「可拖拽评论面板 + 回复输入框 + @高亮」的完整方案
android·flutter·ios
大熊猫侯佩1 天前
iOS 26 仅需几行代码让 SwiftUI 7 液态玻璃界面焕发新春
前端·swiftui·apple