Add linking the navigation bar with the content example

[jesses2025smith]

Like:

[hunger]

Do you have the code for this example? That would make it clearer what you actually want to do.

[jesses2025smith]

The code is here.

I hope that when I select function 2, 3, or 4 on the left navigation bar, the right side will scroll accordingly;
when the right side scrolls, the left navigation bar will follow the changes.

[hunger]

So you want the right side-menu always show the color the cursor is on? Or the color at a fixed point on the screen (e.g. the top edge of the scroll view)?

[jesses2025smith]

2025-03-10-18-48-14.mp4

I hope the navigation and content like first gif.

[hunger]

Would this get you started?

import { Button, HorizontalBox, ScrollView, AboutSlint } from "std-widgets.slint";

export component Demo {
    property <string> positional-color: "red";

    height: 100px;

    HorizontalBox {
        ScrollView {        
            VerticalLayout {
                red := Rectangle {
                    background: Colors.red;
                    height: 200px;
                }
                green := Rectangle {
                    background: Colors.green;
                    height: 200px;
                }
                blue := Rectangle {
                    background: Colors.blue;
                    height: 200px;
                }
            }
            changed viewport-y => {
                if self.viewport-y <= -400px {
                    root.positional-color = "blue";
                } else  if self.viewport-y <= -200px {
                    positional-color = "green";
                } else {
                    positional-color = "red";
                }
            }
        }

        Text {
            text: root.positional-color;
        }
    }
}

Slintpad link

[jesses2025smith]

How to scroll to target position when the color button clicked?

import { Button, HorizontalBox, ScrollView, AboutSlint } from "std-widgets.slint";

component ColorFeedback inherits Rectangle {
    preferred-height: 200px;
    preferred-width: 200px;
    height: self.width * 0.2;

    in property <int> index;
    in property <length> marker;
    // Ugly workaround to #7747 :-/
    private property <length> dummy: marker;

    callback update-index(index: int);

    changed dummy => {
        debug("index:", self.index, "y:", self.y, "y+height:", self.y + self.height, "marker:", self.marker);
        if ((marker >= self.y) && (marker < self.y + self.height)) {
            update-index(self.index);
        }
    }

}

export component AppWindow inherits Window {
    title: "Slint Demo";
//    icon: @image-url("app.svg");
    preferred-width: 500px;
    preferred-height: 80px;
    default-font-size: 14px;

    property <[color]> colors: [Colors.red, Colors.green, Colors.blue];

    property <int> current-index;

    function color-name(c: color) -> string {
        if (c == Colors.red) {
            return "red";
        }
        if (c == Colors.green) {
            return "green";
        }
        if (c == Colors.blue) {
            return "blue";
        }
        return "unknown";
    }

    VerticalLayout {
        scroll := ScrollView {
            // position of the middle of the ScrollView, relative to the origin of the ScrollView
            private property <length> marker-y: (self.visible-height * 0.2) + abs(self.viewport-y);

            VerticalLayout {
                Rectangle {
                    VerticalLayout {
                        for c[i] in colors: ColorFeedback {
                            index: i;
                            marker <=> scroll.marker-y;
                            update-index(index) => { root.current-index = index; }

                            background: c;
                        }
                    }
                }
            }
        }

        HorizontalLayout {
            alignment: start;
            spacing: 10px;
            for c[i] in colors: r := Rectangle {
                property <int> index: i;
//                callback selected(height: length);

                Text {
                    text: color-name(c);
                }

                TouchArea {
                    mouse-cursor: pointer;
                    clicked => {
                        // TODO
                    }
                }

                states [
                    active when root.current-index == self.index: {
                        r.background: root.colors[self.index];
                    }
                ]
            }
        }
    }
}

[hunger]

Set the viewport-y to the expected value and you should be done.

[jesses2025smith]

But it doesn't work.

[hunger]

Works for me(TM):

[...]

        HorizontalLayout {
            alignment: start;
            spacing: 10px;
            for c[i] in colors: r := Rectangle {
                property <int> index: i;

                Text {
                    text: color-name(c);
                }

                TouchArea {
                    mouse-cursor: pointer;
                    clicked => {
                        scroll.viewport-y = -1.0 * 80px * index;
                    }
                }

                states [
                    active when root.current-index == self.index: {
                        r.background: root.colors[self.index];
                    }
                ]
            }
        }

[...]

This is a bit simplistic of course, but I am sure you will figure something out :-)

[jesses2025smith]

How to fix when height of ColorFeedback changed?
My train of thought is saved all heights to an array when height changed.
But how to save the original height?
Or is there any better way?