Add linking the navigation bar with the content example

[zhuyu4839]

Like:

[hunger]

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

[zhuyu4839]

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)?

[zhuyu4839]

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

[zhuyu4839]

How to fix like this? And how to resolve when window size changed?

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

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

    preferred-height: 100px;

    HorizontalBox {
        ScrollView {
            VerticalLayout {
                red := Rectangle {
                    background: Colors.red;
                    preferred-width: 200px;
                    height: self.width / 2;
                }
                green := Rectangle {
                    background: Colors.green;
                    preferred-width: 200px;
                    height: self.width / 2;
                }
                blue := Rectangle {
                    background: Colors.blue;
                    preferred-width: 200px;
                    height: self.width / 2;
                }
            }
            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;
        }
    }
}

[hunger]

With a bit of math :-)

You can get the y position of red, green and blue Rectangles and calculate the value when to show any of those from that (taking the viewport width and height into account).

If you have a dynamic number of Elements in the layout you probably need something a bit more scalable. Maybe along these lines?

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

component ColorFeedback inherits Rectangle {
    preferred-width: 200px;
    height: self.width / 2;

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

    callback update-color(color: color);

    changed dummy => {
        if marker >= self.y && marker < self.y + self.height {
            update-color(self.background);
        }
    }

}

export component Demo {
    property <color> positional-color;

    preferred-height: 100px;

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

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

            VerticalLayout {
                red := ColorFeedback {
                    marker <=> scroll.marker-y;
                    update-color(color) => { root.positional-color = color; }

                    background: Colors.red;
                }
                green := ColorFeedback {
                    marker <=> scroll.marker-y;
                    update-color(color) => { root.positional-color = color; }

                    background: Colors.green;
                }
                blue := ColorFeedback {
                    marker <=> scroll.marker-y;
                    update-color(color) => { root.positional-color = color; }

                    background: Colors.blue;
                }
            }
        }

        Text {
            text: root.positional-color-name();
        }
    }
}

[zhuyu4839]

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.

[zhuyu4839]

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 :-)