SwiftUI 弹出键盘不影响布局-六虎

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

我的往期技术文章合集：RickeyBoy – Gitbub

我的独立开发 App：iColors – 规划灵感配色帮手

今天来讲一个简单又实用的细节，如安在 SwiftUI 中防止因为键盘弹起，而影响页面布局的办法。

完成作用

就以我的独立 App 中的一个场景为例：在克己色卡后，需求给色卡命名，这时需求弹起键盘

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

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

VStack() {
    ImageContent() // 中心核心内容
}

想要防止键盘弹起影响布局，需求运用 .ignoresSafeArea(.keyboard, edges: .bottom)，当然，需求增加到 VStack 的外层：

VStack() {
    ImageContent() // 中心核心内容
}
.ignoresSafeArea(.keyboard, edges: .bottom)

不过这种情况下测验，发现并没有修正原有的问题。经过调查发现，除了运用 ignoresSafeArea(.keyboard) 之外，还需求确保目标视图占据全屏！

比如，下面这样使用 Spacer，就能够了：

// 办法 1：通过 Spacer() 撑满全屏
VStack() {
    Spacer()
    ImageContent() // 中心核心内容
    Spacer()
}
.ignoresSafeArea(.keyboard, edges: .bottom)

还有一种更巧妙一点的办法，运用 GeometryReader，这样能够防止需求增加 Spacer 而造成的布局调整

// 办法 2：使用 GeometryReader 包裹一层
GeometryReader { _ in
  VStack() {
      ImageContent() // 中心核心内容
  }
}
.ignoresSafeArea(.keyboard, edges: .bottom)