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

当键盘出现在SwiftUI中时,将TextEditor (在列表中)上移

基础概念

在SwiftUI中,TextEditor 是一个视图,允许用户输入和编辑文本。当键盘弹出时,可能会遮挡住 TextEditor 视图,影响用户体验。为了确保 TextEditor 在键盘弹出时仍然可见,可以使用一些技巧将其上移。

相关优势

  1. 提升用户体验:确保用户在输入时始终能看到他们正在编辑的内容。
  2. 避免遮挡:防止键盘遮挡重要的输入区域。

类型

  1. 使用 GeometryReaderPreferenceKey:通过监听键盘高度变化来调整 TextEditor 的位置。
  2. 使用 ScrollViewVStack:通过滚动视图来确保 TextEditor 始终可见。

应用场景

适用于需要用户输入文本的应用,如聊天应用、笔记应用、表单填写等。

问题及解决方法

问题:当键盘弹出时,TextEditor 被遮挡。

原因

键盘弹出时,视图布局没有相应调整,导致 TextEditor 被遮挡。

解决方法

使用 GeometryReaderPreferenceKey 来监听键盘高度变化,并调整 TextEditor 的位置。

代码语言:txt
复制
import SwiftUI

struct ContentView: View {
    @State private var keyboardHeight: CGFloat = 0

    var body: some View {
        GeometryReader { geometry in
            VStack {
                List {
                    TextEditor(text: $text)
                        .frame(height: 100)
                        .background(Color.gray.opacity(0.2))
                        .cornerRadius(10)
                        .padding(.all, 10)
                        .offset(y: -keyboardHeight)
                }
            }
            .background(GeometryReader {
                Color.clear.preference(key: KeyboardHeightPreferenceKey.self, value: -$0.frame(in: .named("screen")).size.height)
            })
            .onPreferenceChange(KeyboardHeightPreferenceKey.self) { value in
                keyboardHeight = value
            }
            .frame(maxWidth: .infinity, maxHeight: .infinity)
            .edgesIgnoringSafeArea(.all)
        }
    }
}

struct KeyboardHeightPreferenceKey: PreferenceKey {
    static var defaultValue: CGFloat = 0

    static func reduce(value: inout CGFloat, nextValue: () -> CGFloat) {
        value += nextValue()
    }
}

struct ContentView_Previews: PreviewProvider {
    static var previews: some View {
        ContentView()
    }
}

参考链接

SwiftUI TextEditor GeometryReader PreferenceKey

通过上述方法,可以确保当键盘弹出时,TextEditor 视图能够自动上移,避免被键盘遮挡。

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

相关·内容

没有搜到相关的合辑

领券