How to keep List scroll to bottom way?

[zhangsan-feng]

For example, when I click to switch group chats and want the scroll bar to move to the latest bottom, it doesn't work.

https://longbridge.github.io/gpui-component/docs/components/virtual-list I looked at the document and this is how it is used Working in message subscription but it will locate the position of the previous message instead of the latest message.

[zhangsan-feng]

impl MessagePage{
pub fn history_message_component(&self, window: &mut Window, cx: &mut Context) -> impl IntoElement {

    v_virtual_list(
        cx.entity().clone(),
        "history_message_component_vm_list",
        Rc::new(
            self
                .message_group
                .get(self.select_index)
                .map(|group| {
                    group
                        .history
                        .iter()
                        .map(|line| {
                            let line_count = line.message.matches('\n').count() + 1;
                            let base_height = 70.0;
                            let extra_per_line = 20.0;
                            let total_height = base_height + (line_count - 1) as f32 * extra_per_line;

                            size(px(200.), px(total_height))
                        })
                        .collect::<Vec<_>>()
                })
                .unwrap_or_default()
        ),
        |view, visible_range, _, cx| {
            visible_range
                .map(|ix| {
                    let global_state = cx.global::<GlobalState>().0.clone().read(cx).clone();
                    let message = view.message_group[view.select_index].history[ix].clone();

                    if global_state.user_state.user_id == message.send_user_id{
                        h_flex()
                            .size_full()
                            .justify_end()
                            .items_start()
                            .mr_3()
                            .child(
                                v_flex()
                                    .mr_2()
                                    .child(Label::new(message.send_user_name).text_right())
                                    .child(Label::new(message.message).w(px(400.)).text_right().mr_2())
                            )
                            .child(Avatar::new().src(message.send_user_avatar).mr_4())

                    }else{
                        h_flex()
                            .ml_3()
                            .items_start()
                            .child(Avatar::new().src(message.send_user_avatar).ml_4())
                            .child(
                                v_flex()
                                    .ml_2()
                                    .child(Label::new(message.send_user_name).text_left())
                                    .child(Label::new(message.message).w(px(400.)).text_left().ml_2())
                            )
                    }


                })
                .collect()
        },
    )
        .track_scroll(&self.history_message_scroll_handle)

}

} history message code

[huacnlee]

In this case, you should use gpui::list, the gpui::ListState has ListAlignment::Bottom option.

https://github.com/huacnlee/zed/blob/6f7d3d35f05fc993663652097b3cc4acce5080c4/crates/gpui/src/elements/list.rs#L226

For example in Zed:

https://github.com/huacnlee/zed/blob/6f7d3d35f05fc993663652097b3cc4acce5080c4/crates/acp_tools/src/acp_tools.rs#L146-L154

NOTE: Next time when you submit issue, please make tidy Markdown style. Unless that, I may will ignore.

[zhangsan-feng]

Thank you, I'll take a look at the examples first.

[zhangsan-feng]

Today, I followed the example to study and modified the code, and it really works.