感谢您花时间帮助他人:)
例如，我已经检查了所有解决方案这个帖子 https://stackoverflow.com/questions/61726424/swiftui-chat-app-the-woes-of-reversed-list-and-context-menu，但没有一个对我们有用。
也发表在苹果开发者 https://developer.apple.com/forums/thread/723770，我在这里发表也是希望好运。谢谢！
当我们构建聊天时，我们需要以与 List/ScrollView 相反的顺序显示消息。这就是为什么我们要把一切颠倒过来。
在 iOS 15 和 iOS 16（14 中没有）上，在反向 List/ScrollView 上显示 contextMenu 时会出现奇怪的行为（似乎是错误）。
根据您使用的方法，它甚至会消失。让我们深入了解一下。
反转用户界面的要点是像聊天列表一样，在底部显示最后一条消息，然后滚动到顶部，而不是正常（相反）的行为）。
import SwiftUI
struct ContentView: View {
var body: some View {
ScrollView { // It also happens using List (instead ScrollView + LazyVStack)
LazyVStack {
ForEach(1..<101, id: \.self) { msg in
messageView(msg)
.upsideDown() // Upside down each element, you can try .upsideDownBis()
}
}
}
.upsideDown() // Upside down entire ScrollView, you can try .upsideDownBis()
}
private func messageView(_ msg: Int) -> some View {
Text("Msg no. \(msg)")
.padding()
.background(Color.red.cornerRadius(8))
.contextMenu {
Button(action: {
print("A")
}) {
Text("Button A")
}
Button(action: {
print("B")
}) {
Text("Button B")
}
}
}
}
// Just for setting upside down list/ ScrollView
extension View {
func upsideDown() -> some View {
self
.rotationEffect(Angle(radians: .pi))
.scaleEffect(x: -1, y: 1, anchor: .center)
}
// This one just rotates, does not disappear.
func upsideDownBis() -> some View {
self
.rotationEffect(Angle(radians: .pi))
}
}
iOS 15/16 应用 upsideDown() 修饰符时 -> 错误：
iOS 15/16 when applying upsideDownBis() modifier -> Undesired animation:
如前所述，每个解决方案发布于这个帖子 https://stackoverflow.com/questions/61726424/swiftui-chat-app-the-woes-of-reversed-list-and-context-menu和其他一些。除此之外的想法是：
要在 SwiftUI 中创建聊天应用程序，请使用以下关键 SwiftUI 功能：
下面的示例是提供一种高效的仅 SwiftUI 方法，而不需要进行颠倒的 UI 和其他建议。
典型的聊天行为包括：
消息类型具有 ScrollViewReader 所需的唯一标识符：
struct Message: Codable, Hashable, Identifiable {
var id: UUID
var text: String
}
GeometryReader 和 minHeight 用于强制 VStack 填充可用的显示区域。如果列表不够大以填充显示，则 Spacer() 会将列表推到底部：
struct ChatStyleScrollView<Content: View>: View {
let content: Content
init(@ViewBuilder content: () -> Content) {
self.content = content()
}
var body: some View {
GeometryReader { proxy in
ScrollView(.vertical, showsIndicators: false) {
VStack {
Spacer()
content
}
.frame(minHeight: proxy.size.height)
}
}
}
}
您提供的 messageView() 函数已修改为使用 Message 类型而不是 Int。 ChatStyleScrollView 放置在 ScrollViewReader 中并使用 Message.id 滚动到底部：
struct ContentView: View {
@State private var messages: [Message] = []
@State private var text: String = ""
@State private var targetMessage: Message?
var body: some View {
VStack(spacing: 0) {
ScrollViewReader { scrollView in
ChatStyleScrollView() {
ForEach(messages) { msg in
messageView(msg)
}
}
.onChange(of: targetMessage) { msg in
if let msg = msg {
withAnimation(.default) {
scrollView.scrollTo(msg.id)
}
}
}
HStack {
TextField("Message", text: $text)
.frame(height: 44)
Button(action: send) { Text("Send") }
}
.padding(.horizontal)
}
}
}
private func send() {
guard !text.isEmpty else { return }
let msg = Message(id: UUID(), text: text)
messages.append(msg)
text = ""
targetMessage = msg
}
private func messageView(_ msg: Message) -> some View {
HStack {
Text("Msg no. \(msg.text)")
.padding()
.background(Color.red.cornerRadius(8))
.contextMenu {
Button(action: {
print("A")
}) {
Text("Button A")
}
Button(action: {
print("B")
}) {
Text("Button B")
}
}
}
.frame(maxWidth: .infinity)
.id(msg.id)
}
}
该代码基于在 SwiftUI 中实现反向滚动 https://www.thirdrocktechkno.com/blog/implementing-reversed-scrolling-behaviour-in-swiftui/作者：拉特内什·简