How to create a log output widget with auto scroll to bottom?

[AllenDang]

I need a widget to display runtime log which support auto scroll to bottom when new log string is added.

Ideally, TextEdit or ScrollView+Text might have some function like "Scroll To XY", I could invoke it to control the scroll position programable, but I didn't find any clue from document and examples.

Any hint?

[ogoffart]

That's a feature that make sense. I wonder what API it should have.

Right now, you will have to set the content-y manually to go to the end like so:

                log_view.viewport-y = min(0px, - log_view.viewport-height + log_view.visible-height);

Full example

[aurexav]

+1.

An issue to track this would be better.

[nic-obert]

Are there any plans for an out-of-the-box autoscroll feature? I currently have to manually implement a scroll-to-bottom function like @ogoffart suggested and manually invoke it from the backend code every time I want to add a new output line to a ListView.
It would be nice to leave UI functionality, like automatic scroll-to-bottom, out of the backend code.

[igiona]

You can kind-of do this fully on the UI side:

                    autoscroll_timer := Timer {
                        interval: 100ms;
                        running: autoscroll.checked;
                        triggered() => {
                            log_view.viewport-y = min(0px, - log_view.viewport-height + log_view.visible-height);
                        }
                    }

                    autoscroll := CheckBox {
                        text: "Autoscroll";
                        checked: true;
                    }

Of course it's a bit a waste of resources since the timer runs even if the list never changes ....
An out-of-the box solution would be much appreciated ;)

[werner291]

Hi! I was looking at this pattern for a chat app, starting from the timer-based polling shape upthread, and ran into the harder version of the problem: how to keep auto-scroll-to-bottom when the user is allowed to scroll up at any time. The trick I found was to stop trying to tell "user scroll" apart from "layout shift". The observation: the only direction layout-induced motion can move viewport-y is downward (more negative, in Slint's vp-y ≤ 0 convention) when content is appended. So any upward motion is the user, by definition.

That collapses the whole thing to a three-rule state machine on a polling Timer:

1. If viewport-y increased since the last poll → sticky = false.
2. If viewport-y is at or below the bottom + a small margin → sticky = true.
3. If sticky and viewport-height grew since the last poll → write viewport-y = height - viewport-height.

Packaged as a reusable component:

export component StickyBottomList inherits Rectangle {
    in property <length> up_tolerance: 0px;
    in property <length> bottom_margin: 16px;
    in property <duration> poll_interval: 100ms;
    out property <bool> sticky_to_bottom: true;
    out property <bool> has_unseen_growth: false;
    public function snap_to_bottom() { /* set sticky, write vp-y, clear */ }

    private property <length> prev_vp_y: 0;
    private property <length> prev_vp_h: 0;

    listview := Flickable {
        VerticalLayout { @children }
    }

    Timer {
        interval: root.poll_interval;
        running: true;
        triggered => {
            if (listview.viewport-y > prev_vp_y + root.up_tolerance) {
                sticky_to_bottom = false;
            }
            if (listview.viewport-y
                <= (listview.height - listview.viewport-height) + root.bottom_margin) {
                sticky_to_bottom = true;
                has_unseen_growth = false;
            }
            if (listview.viewport-height > prev_vp_h) {
                if (sticky_to_bottom) {
                    listview.viewport-y = listview.height - listview.viewport-height;
                } else {
                    has_unseen_growth = true;
                }
            }
            prev_vp_y = listview.viewport-y;
            prev_vp_h = listview.viewport-height;
        }
    }
}

The has_unseen_growth output is handy for driving a "new messages below" pill that calls snap_to_bottom().

[RyanHope]

any updates on this?