slint/examples/carousel/ui/carousel.slint

// Copyright © SixtyFPS GmbH <info@slint-ui.com>
// SPDX-License-Identifier: GPL-3.0-only OR LicenseRef-Slint-commercial

import { Theme } from "theme.slint";

export Carousel := FocusScope {
    callback move-right();
    callback move-left();
    callback move-focus-up();

    property <int> selected-index;
    property <length> spacing;
    property <length> itemWidth;
    property <int> count: 0;
    property <length> center-x: (width - Theme.size-big) / 2;
    property <duration> duation: Theme.duration-regular;

    forward-focus: focus-scope;
    height: Theme.size-big;

    move-right => { 
        root.selected-index = min(root.selected-index + 1, root.count - 1);
    }

    move-left => {  
        root.selected-index = max(root.selected-index - 1, 0);
    }
    
    focus-scope:= FocusScope {
        key-pressed(event) => {
            if(event.text == Keys.UpArrow) {
                root.move-focus-up();
                return accept;
            }

            if(event.text == Keys.RightArrow) {
                root.move-right();
                return accept;
            }

            if(event.text == Keys.LeftArrow) {
                root.move-left();
                return accept;
            }

            return accept;
        }
    }

    TouchArea { 
        width: parent.width;
        height: parent.height;

        clicked => {
            focus-scope.focus()
        }
     }


    Rectangle {  
        clip: true;
        background: transparent;
       
        Flickable {
            interactive: false;
            animate viewport-x { duration: duation; easing: ease-in; }
            viewport-x: center-x - root.selected-index * (root.itemWidth + root.spacing);
    
            HorizontalLayout { 
                spacing <=> root.spacing;
        
                @children
            }
        }
    }  
}