web-dev-qa-db-ja.com

Swiffi Listを自動的にスクロールする方法

ListViewにコンテンツを追加するときは、自動的にスクロールしてほしいです。

私はSwiffi Listを使っていて、コントローラとしてBindableObjectを使っています。新しいデータがリストに追加されています。

List(chatController.messages, id: \.self) { message in
    MessageView(message.text, message.isMe)
}
 _

メッセージリストに新しいデータを追加すると、リストにスクロールしたいです。しかし私は手動でスクロールしなければなりません。

swiftlistviewswiftuiautoscroll
61
Seb

これは、会話を通じて入力されるチャット内のメッセージの配列のように、動的にデータを動的に取得する観察されたオブジェクトのための私の作業ソリューションです。

メッセージ配列のモデル：

 struct Message: Identifiable, Codable, Hashable {
        
        //MARK: Attributes
        var id: String
        var message: String
        
        init(id: String, message: String){
            self.id = id
            self.message = message
        }
    }
 _

実際のビュー：

@ObservedObject var messages = [Message]()
@State private var scrollTarget: Int?

var scrollView : some View {
    ScrollView(.vertical) {
        ScrollViewReader { scrollView in
            ForEach(self.messages) { msg in
                Text(msg).id(message.id)
            }
            //When you add new element it will scroll automatically to last element or its ID
            .onChange(of: scrollTarget) { target in
                withAnimation {
                    scrollView.scrollTo(target, anchor: .bottom)
                }
            }
            .onReceive(self.$messages) { updatedMessages in
                //When new element is added to observed object/array messages, change the scroll position to bottom, or last item in observed array
                scrollView.scrollTo(umessages.id, anchor: .bottom)
                //Update the scrollTarget to current position
                self.scrollTarget = updatedChats.first!.messages.last!.message_timestamp
            }
        }
    }
}
 _

GitHubのこの完全に実際の例を見てください. https：//github.com/kenagt/autoscrollviewexample

1
Kenan Begić