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)
相关推荐
谈吐大方的鹏sir37 分钟前
SwiftUI-Button组件学习
ios
谈吐大方的鹏sir3 小时前
SwiftUI-Image组件学习
ios
鹏多多.4 小时前
flutter-完美解决键盘弹出遮挡输入框的问题
android·flutter·ios·前端框架
杂雾无尘6 小时前
SwiftUI 动画新技能,让你的应用「活」起来!
ios·swiftui·swift
林大鹏天地6 小时前
iOS18系统 [YYKVStorage _dbClose] 偶现崩溃
ios
林大鹏天地7 小时前
使用Xcode16打包后,App在暗夜模式下,iOS18 切换Tabbar的item,会有一根白色线条闪过。
ios
2501_915909067 小时前
iOS 加固工具实战解析,主流平台审核机制与工具应对策略
android·ios·小程序·https·uni-app·iphone·webview
东坡肘子7 小时前
Blender 正在开发 iPad 版本 | 肘子的 Swift 周报 #095
swiftui·swift·apple
2501_915106329 小时前
iOS WebView 调试实战,第三方脚本加载失败与内容安全策略冲突问题排查指南
android·ios·小程序·https·uni-app·iphone·webview
笑尘pyrotechnic21 小时前
DocC的简单使用
ios·objective-c