Как я могу сделать так, чтобы элементы отображались внизу ScrollView?

Чтобы сообщения чата отображались внизу экрана в приложении чата SwiftUI, вы можете использовать ScrollViewReader для программного управления положением прокрутки. Вот рабочее решение:

import SwiftUI

struct ChatView: View {
    @ObservedObject var viewModel: ChatViewModel
    
    var body: some View {
        ScrollViewReader { proxy in
            ScrollView(showsIndicators: false) {
                LazyVStack {
                    ForEach(viewModel.location.chat) { chat in
                        Text(chat.message)
                            .id(chat.id)
                            .padding()
                    }
                }
                .frame(maxWidth: .infinity)
            }
            .onAppear {
                scrollToBottom(proxy: proxy)
            }
            .onChange(of: viewModel.location.chat) { _ in
                scrollToBottom(proxy: proxy)
            }
        }
    }
    
    private func scrollToBottom(proxy: ScrollViewProxy) {
        if let lastMessage = viewModel.location.chat.last {
            withAnimation {
                proxy.scrollTo(lastMessage.id, anchor: .bottom)
            }
        }
    }
}

class ChatViewModel: ObservableObject {
    @Published var location: ChatLocation
    
    init(location: ChatLocation) {
        self.location = location
    }
}

struct ChatLocation {
    var chat: [ChatMessage]
}

struct ChatMessage: Identifiable {
    let id: UUID
    let message: String
}

// Example usage with mock data
struct ContentView: View {
    @StateObject var viewModel = ChatViewModel(location: ChatLocation(chat: [
        ChatMessage(id: UUID(), message: "Hello!"),
        ChatMessage(id: UUID(), message: "How are you?"),
        // Add more messages as needed
    ]))
    
    var body: some View {
        ChatView(viewModel: viewModel)
    }
}

Убедитесь, что ваш viewModel.location.chat правильно идентифицирован как @Published, чтобы SwiftUI мог реагировать на изменения.

Используйте ScrollViewReader с onAppear и onChange для автоматической прокрутки вниз при каждом добавлении сообщений или появлении представления.

Спасибо, что обновили пост и включили больше кода.

Когда я пробую код на симуляторе iPhone 15 под управлением iOS 17.5 (Xcode 15.4), у меня он работает нормально.

• Если я начну с пустого списка и отправлю много сообщений, представление начнет прокручиваться, когда достигнет нижней части экрана, и последнее сообщение всегда будет видно.
• Если я предварительно загружаю ViewModel с кучей сообщений, при запуске он прокручивается до последнего сообщения.

Чтобы предварительно загрузить сообщения, я обновил ViewModel.init:

init(location: Location) {
    self.location = location
    for i in 1...100 {
        currentMessage = "Message \(i)"
        sendMessage()
    }
}

Так что я действительно не знаю, почему у вас это не работает. Тем не менее, есть несколько вещей, которые я бы посоветовал вам изменить. Я не думаю, что изменения помогут решить проблему (которую я не могу воспроизвести), но они могут помочь немного улучшить код:

1. Если вы хотите передать viewModel в ContentView, используйте @ObservedObject вместо @StateObject. Альтернативно, сохраните его как @StateObject и создайте модель в ContentView. В последнем случае также должно быть private:

// ContentView
@StateObject private var viewModel = ViewModel(
    location: Location(name: "Test location")
)

2. В Location и StringChatMessage используйте let вместо id:

let id = UUID()

3. Поскольку StringChatMessage реализует Identifiable, нет необходимости устанавливать .id для элементов в ForEach:

ForEach(viewModel.location.chat) { chat in
    Text(chat.message)
        // .id(chat.id)
}

4. В функции scrollToBottom нет необходимости вызывать .scrollTo асинхронно. Однако вы можете назвать его withAnimation, чтобы прокрутка была анимированной:

private func scrollToBottom(proxy: ScrollViewProxy) {
    if let lastMessage = viewModel.location.chat.last {
        withAnimation {
            proxy.scrollTo(lastMessage.id, anchor: .bottom)
        }
    }
}

5. В настоящее время черновик сообщения сохраняется в ViewModel как currentMessage и затем отправляется при вызове sendMessage. Но действительно ли будут еще какие-то наблюдатели текущего сообщения, кроме ContentView? Я бы предложил сделать currentMessage переменную @State в ContentView и передать текст сообщения в качестве параметра sendMessage:

// ViewModel
// @Published var currentMessage: String = ""

func sendMessage(text: String) {
    location.chat.append(StringChatMessage(isUser: true, message: text))
    location.chat.append(StringChatMessage(isUser: false, message: "*reply*"))
}

// ContentView
@State private var currentMessage: String = ""

TextField("Message", text: $currentMessage)
    // ... modifiers as before
Button {
    viewModel.sendMessage(text: currentMessage)
    currentMessage = ""
} label: {
    // ...
}

6. Как я предлагал в комментарии, вы можете использовать .scrollPosition вместе с .scrollTargetLayout и вообще удалить ScrollViewReader. Это может быть проще, не в последнюю очередь потому, что вам не нужно передавать параметр ScrollViewProxy как параметр scrollToBottom:

// ContentView
@State private var scrollPosition: UUID?

// ScrollViewReader { proxy in
    ScrollView(showsIndicators: false) {
        LazyVStack {
            // ...
        }
        .scrollTargetLayout()
        .frame(maxWidth: .infinity)
    }
    .scrollPosition(id: $scrollPosition, anchor: .bottom)
    .onAppear {
        scrollToBottom()
    }
    .onChange(of: viewModel.location.chat) {
        scrollToBottom()
    }
// }

private func scrollToBottom() {
    if let lastMessage = viewModel.location.chat.last {
        withAnimation {
            scrollPosition = lastMessage.id
        }
    }
}

7. Если вы укажете initial: true в модификатор .onChange, вы можете удалить обратный вызов .onAppear. Вы также можете получить последнее сообщение из обновленного массива, которое передается замыканию, что означает, что вы можете выполнить всю автоматическую прокрутку в обратном вызове .onChange и удалить функцию scrollToBottom.

Вот полностью обновленный ContentView, который работает следующим образом:

struct ContentView: View {
    @StateObject private var viewModel = ViewModel(
        location: Location(name: "Test location")
    )
    @State private var currentMessage: String = ""
    @State private var scrollPosition: UUID?

    var body: some View {
        VStack {
            ScrollView(showsIndicators: false) {
                LazyVStack {
                    ForEach(viewModel.location.chat) { chat in
                        Text(chat.message)
                    }
                }
                .scrollTargetLayout()
                .frame(maxWidth: .infinity)
            }
            .scrollPosition(id: $scrollPosition, anchor: .bottom)
            .onChange(of: viewModel.location.chat, initial: true) { oldVal, newVal in
                if let lastMessage = newVal.last {
                    withAnimation {
                        scrollPosition = lastMessage.id
                    }
                }
            }
            HStack {
                TextField("Message", text: $currentMessage)
                    .frame(height: 40)
                    .padding([.leading, .trailing], 12)
                    .overlay {
                        RoundedRectangle(cornerRadius: 20)
                            .stroke(Color.black.opacity(0.4))
                    }
                Button {
                    viewModel.sendMessage(text: currentMessage)
                    currentMessage = ""
                } label: {
                    Image(systemName: "paperplane.fill")
                        .foregroundStyle(Color.white)
                        .frame(width: 40, height: 40)
                        .background(Color.accentColor)
                        .clipShape(Circle())
                }
            }
            .padding([.leading, .trailing, .bottom], 12)
        }
    }
}

РЕДАКТИРОВАТЬ В своем комментарии вы объяснили, что хотите, чтобы содержимое внутри ScrollView начиналось снизу, а не сверху. Чтобы это работало следующим образом:

• оберните ScrollViewGeometryReader, чтобы измерить используемое пространство
• установите высоту ScrollView как minHeight на LazyVStack, с выравниванием .bottom.

GeometryReader { proxy in
    ScrollView(showsIndicators: false) {
        LazyVStack {
            // ...
        }
        .scrollTargetLayout()
        .frame(maxWidth: .infinity, minHeight: proxy.size.height, alignment: .bottom)
    }
    // ...other modifiers as before
}

EDIT2 Что касается анимации - если я правильно понимаю, вы хотите, чтобы новое сообщение добавлялось внизу пустого ScrollView с какой-то анимацией нажатия снизу, верно? Вы можете попробовать эти изменения:

• Добавьте модификатор .transition к Text, показывающему сообщение:

Text(chat.message)
    .transition(.push(from: .bottom))

• Оберните вызов sendMessage с помощью withAnimation:

Button {
    withAnimation {
        viewModel.sendMessage(text: currentMessage)
    }
    currentMessage = ""
} label: {
    // ...
}