当键盘显示并且列表位于底部时,我如何插入SwiftUI列表?



当键盘显示并且列表滚动到底部时,我试图通过键盘的高度插入列表的底部。我知道这个问题已经在不同的场景中被问到,但我还没有找到任何合适的解决方案。这是专门针对聊天应用程序的,下面的简单代码演示了这个问题:

@State var text: String = ""
@FocusState private var keyboardVisible: Bool
var body: some View {
NavigationView {
VStack {
List {
ForEach(1...100, id: .self) { item in
Text("(item)")
}
}
.navigationTitle("Conversations")
.toolbar {
ToolbarItem(placement: .navigationBarTrailing) {
Button {
keyboardVisible = false
} label: {
Text("Hide Keyboard")
}
}
}
ZStack {
Color.red
.frame(height: 44)
TextEditor(text: $text)
.frame(height: 32)
.focused($keyboardVisible)
}
}
}
}

如果滚动到末尾并点击textEditor,文本编辑器会按预期的方式随着键盘向上移动,但列表不会向上移动内容。我想知道如何才能实现这一点,并使它与键盘一起平滑地向上移动。

你别提尝试它,但这正是我们有ScrollViewReader()。在这种情况下使用它有一点问题,可以解决。问题是keyboardVisible在键盘完全打开之前就改变了。如果你在那个点滚动,你将切断List条目的底部。因此,我们需要用DispatchQueue.main.asyncAfter(deadline:)来延迟读者。这造成了足够的延迟,当阅读器实际读取位置时,键盘处于全高,滚动到底部完成它的工作。

@State var text: String = ""
@FocusState private var keyboardVisible: Bool
var body: some View {
NavigationView {
VStack {
ScrollViewReader { scroll in
List {
ForEach(1...100, id: .self) { item in
Text("(item)")
}
}
.onChange(of: keyboardVisible, perform: { _ in
if keyboardVisible {
withAnimation(.easeIn(duration: 1)) {
scroll.scrollTo(100) // this would be your array.count - 1,
// but you hard coded your ForEach
}
// The scroll has to wait until the keyboard is fully up
// this causes it to wait just a bit.
DispatchQueue.main.asyncAfter(deadline: .now() + 0.5) {
// this helps make it look deliberate and finished
withAnimation(.easeInOut(duration: 1)) {
scroll.scrollTo(100) // this would be your array.count - 1,
// but you hard coded your ForEach
}
}
}
})
.navigationTitle("Conversations")
.toolbar {
ToolbarItem(placement: .navigationBarTrailing) {
Button {
keyboardVisible = false
} label: {
Text("Hide Keyboard")
}
}
}
ZStack {
Color.red
.frame(height: 44)
TextEditor(text: $text)
.frame(height: 32)
.focused($keyboardVisible)
}
}
}
}
}

编辑:我把代码改成了滚动两次。第一种方法是立即开始滚动,第二种方法是在键盘完成工作后滚动。它开始得很快,结束得很顺利。我还在代码中为下一个人留下了注释;你不需要他们。

相关内容

  • 没有找到相关文章

最新更新