Added scrolled callback to ListView and ScrollView (#5964)

CHANGELOG.md

@@ -12,6 +12,7 @@ All notable changes to this project are documented in this file.
 ### Widgets
 
  - Fixed `TextEdit` not invoking `edited` callbacks (#5848).
+ - Added `scrolled` callback to `ListView` and `ScrollView`.
  - Do not trigger `current-item-changed` on `StandardListView` if `current-item` is set on the same value.
  - Fixed `TimePickerPopup` does not open minute view by click on selected hour.
 

docs/reference/src/language/widgets/listview.md

@@ -9,6 +9,11 @@ Elements are only instantiated if they are visible
 
 Same as [`ScrollView`](#scrollview)
 
+
+### Callbacks
+
+Same as [`ScrollView`](#scrollview)
+
 ### Example
 
 ```slint

docs/reference/src/language/widgets/scrollview.md

@@ -18,6 +18,10 @@ using for loops may be added in the future and is tracked in issue #407.
 -   **`viewport-x`** and **`viewport-y`** (_in-out_ _length_): The `x` and `y` properties of the viewport. Usually these are negative
 -   **`visible-width`** and **`visible-height`** (_out_ _length_): The size of the visible area of the ScrollView (not including the scrollbar)
 
+### Callbacks
+
+-   **`scrolled()`**: Invoked when `viewport-x` or `viewport-y` is changed by a user action (dragging, scrolling).
+
 ### Example
 
 ```slint

internal/compiler/widgets/cosmic/scrollview.slint

@@ -87,6 +87,8 @@ export component ScrollView {
     // FIXME: remove. This property is currently set by the ListView and is used by the native style to draw the scrollbar differently when it has focus
     in-out property <bool> has-focus;
 
+    callback scrolled <=> flickable.flicked;
+
     min-height: 50px;
     min-width: 50px;
     horizontal-stretch: 1;

internal/compiler/widgets/cupertino/scrollview.slint

@@ -5,7 +5,7 @@ import { CupertinoPalette, Icons } from "styling.slint";
 
 export component ScrollBar inherits Rectangle {
     in property <bool> enabled;
-    out property <bool> has-hover: i-touch-area.has-hover;
+    out property <bool> has-hover: touch-area.has-hover;
     in-out property <bool> horizontal;
     in-out property <length> maximum;
     in-out property <length> page-size;
@@ -19,16 +19,16 @@ export component ScrollBar inherits Rectangle {
     background: transparent;
 
     states [
-        hover when i-touch-area.has-hover : {
+        hover when touch-area.has-hover : {
             background: CupertinoPalette.foreground.with-alpha(0.2);
-            i-border.background: CupertinoPalette.foreground.with-alpha(0.2);
+            border.background: CupertinoPalette.foreground.with-alpha(0.2);
             pad: 4px;
         }
     ]
 
     animate width, height, pad, background { duration: 150ms; easing: ease-out; }
 
-    i-border := Rectangle {
+    border := Rectangle {
         x: 0;
         y: 0;
         width: !root.horizontal ? 0.8px : parent.width;
@@ -36,11 +36,11 @@ export component ScrollBar inherits Rectangle {
         background: transparent;
     }
 
-    i-thumb := Rectangle {
+    thumb := Rectangle {
         width: !root.horizontal ? parent.width - 2 * root.pad : root.maximum <= 0phx ? 0phx : max(32px, root.track-size * root.page-size / (root.maximum + root.page-size));
         height: root.horizontal ? parent.height - 2 * root.pad : root.maximum <= 0phx ? 0phx : max(32px, root.track-size * (root.page-size / (root.maximum + root.page-size)));
-        x: !root.horizontal ? (parent.width - self.width) / 2 : root.offset + (root.track-size - i-thumb.width) * (-root.value / root.maximum);
+        x: !root.horizontal ? (parent.width - self.width) / 2 : root.offset + (root.track-size - thumb.width) * (-root.value / root.maximum);
-        y: root.horizontal ? (parent.height - self.height) / 2 : root.offset + (root.track-size - i-thumb.height) * (-root.value / root.maximum);
+        y: root.horizontal ? (parent.height - self.height) / 2 : root.offset + (root.track-size - thumb.height) * (-root.value / root.maximum);
         border-radius: (root.horizontal ? self.height : self.width) / 2;
         background: CupertinoPalette.foreground;
         opacity: 0.6;
@@ -50,7 +50,7 @@ export component ScrollBar inherits Rectangle {
         animate width, height { duration: 100ms; easing: ease-out; }
     }
 
-    i-touch-area := TouchArea {
+    touch-area := TouchArea {
         property <length> pressed-value;
 
         width: parent.width;
@@ -65,8 +65,8 @@ export component ScrollBar inherits Rectangle {
         moved => {
             if (self.enabled && self.pressed) {
                 root.value = -max(0px, min(root.maximum, self.pressed-value + (
-                    root.horizontal ? (i-touch-area.mouse-x - i-touch-area.pressed-x) * (root.maximum / (root.track-size - i-thumb.width))
+                    root.horizontal ? (touch-area.mouse-x - touch-area.pressed-x) * (root.maximum / (root.track-size - thumb.width))
-                               : (i-touch-area.mouse-y - i-touch-area.pressed-y) * (root.maximum / (root.track-size - i-thumb.height))
+                               : (touch-area.mouse-y - touch-area.pressed-y) * (root.maximum / (root.track-size - thumb.height))
                 )));
             }
         }
@@ -86,14 +86,16 @@ export component ScrollBar inherits Rectangle {
 
 export component ScrollView {
     in property <bool> enabled: true;
-    out property <length> visible-width <=> i-flickable.width;
+    out property <length> visible-width <=> flickable.width;
-    out property <length> visible-height <=> i-flickable.height;
+    out property <length> visible-height <=> flickable.height;
-    in-out property <length> viewport-width <=> i-flickable.viewport-width;
+    in-out property <length> viewport-width <=> flickable.viewport-width;
-    in-out property <length> viewport-height <=> i-flickable.viewport-height;
+    in-out property <length> viewport-height <=> flickable.viewport-height;
-    in-out property <length> viewport-x <=> i-flickable.viewport-x;
+    in-out property <length> viewport-x <=> flickable.viewport-x;
-    in-out property <length> viewport-y <=> i-flickable.viewport-y;
+    in-out property <length> viewport-y <=> flickable.viewport-y;
     // FIXME: remove. This property is currently set by the ListView and is used by the native style to draw the scrollbar differently when it has focus
     in-out property <bool> has-focus;
+    
+    callback scrolled <=> flickable.flicked;
 
     min-height: 50px;
     min-width: 50px;
@@ -102,39 +104,39 @@ export component ScrollView {
     preferred-height: 100%;
     preferred-width: 100%;
 
-    i-flickable := Flickable {
+    flickable := Flickable {
         x: 2px;
         y: 2px;
         interactive: false;
-        viewport-y <=> i-vertical-bar.value;
+        viewport-y <=> vertical-bar.value;
-        viewport-x <=> i-horizontal-bar.value;
+        viewport-x <=> horizontal-bar.value;
         width: 100%;
         height: 100%;
 
         @children
     }
 
-    i-vertical-bar := ScrollBar {
+    vertical-bar := ScrollBar {
         enabled: root.enabled;
         x: parent.width  - self.width;
         y: 0;
         width: self.has-hover ? 20px : 12px;
-        height: i-horizontal-bar.visible ? parent.height - i-horizontal-bar.height : parent.height;
+        height: horizontal-bar.visible ? parent.height - horizontal-bar.height : parent.height;
         horizontal: false;
-        maximum:  i-flickable.viewport-height - i-flickable.height;
+        maximum:  flickable.viewport-height - flickable.height;
-        page-size:  i-flickable.height;
+        page-size:  flickable.height;
-        visible: i-flickable.viewport-height > i-flickable.height;
+        visible: flickable.viewport-height > flickable.height;
     }
 
-    i-horizontal-bar := ScrollBar {
+    horizontal-bar := ScrollBar {
         enabled: root.enabled;
-        width: i-vertical-bar.visible ? parent.width - i-vertical-bar.width : parent.width;
+        width: vertical-bar.visible ? parent.width - vertical-bar.width : parent.width;
         height: self.has-hover ? 20px : 12px;
         y: parent.height - self.height;
         x: 0;
         horizontal: true;
-        maximum:  i-flickable.viewport-width - i-flickable.width;
+        maximum:  flickable.viewport-width - flickable.width;
-        page-size:  i-flickable.width;
+        page-size:  flickable.width;
-        visible: i-flickable.viewport-width > i-flickable.width;
+        visible: flickable.viewport-width > flickable.width;
     }
 }

internal/compiler/widgets/fluent/scrollview.slint

@@ -9,7 +9,7 @@ component ScrollViewButton inherits TouchArea {
     width: 8px;
     height: 8px;
 
-    i-icon := Image {
+    icon := Image {
         x: (parent.width - self.width) / 2;
         y: (parent.height - self.height) / 2;
         width: parent.width;
@@ -23,11 +23,11 @@ component ScrollViewButton inherits TouchArea {
     states [
         pressed when root.pressed : {
             opacity: 1;
-            i-icon.width: 6px;
+            icon.width: 6px;
         }
         hover when root.has-hover : {
             opacity: 1;
-            i-icon.colorize: FluentPalette.text-secondary;
+            icon.colorize: FluentPalette.text-secondary;
         }
     ]
 }
@@ -48,28 +48,28 @@ component ScrollBar inherits Rectangle {
     border-radius: 7px;
 
     states [
-        hover when i-touch-area.has-hover || i-down-scroll-button.has-hover || i-up-scroll-button.has-hover : {
+        hover when touch-area.has-hover || down-scroll-button.has-hover || up-scroll-button.has-hover : {
             root.background: FluentPalette.alternate-background;
             root.size: 6px;
-            i-up-scroll-button.opacity: 1;
+            up-scroll-button.opacity: 1;
-            i-down-scroll-button.opacity: 1;
+            down-scroll-button.opacity: 1;
         }
     ]
 
     animate size { duration: 150ms; easing: ease-out; }
 
-    i-thumb := Rectangle {
+    thumb := Rectangle {
         width: !root.horizontal ? root.size : root.maximum <= 0phx ? 0phx : max(16px, root.track-size * root.page-size / (root.maximum + root.page-size));
         height: root.horizontal ? root.size : root.maximum <= 0phx ? 0phx : max(16px, root.track-size * (root.page-size / (root.maximum + root.page-size)));
-        x: !root.horizontal ? parent.width - 4px - self.width : root.offset + (root.track-size - i-thumb.width) * (-root.value / root.maximum);
+        x: !root.horizontal ? parent.width - 4px - self.width : root.offset + (root.track-size - thumb.width) * (-root.value / root.maximum);
-        y: root.horizontal ? parent.height - 4px - self.height : root.offset + (root.track-size - i-thumb.height) * (-root.value / root.maximum);
+        y: root.horizontal ? parent.height - 4px - self.height : root.offset + (root.track-size - thumb.height) * (-root.value / root.maximum);
         border-radius: (root.horizontal ? self.height : self.width) / 2;
         background: FluentPalette.border;
 
         animate width, height { duration: 150ms; easing: ease-out; }
     }
 
-    i-touch-area := TouchArea {
+    touch-area := TouchArea {
         property <length> pressed-value;
 
         width: parent.width;
@@ -84,8 +84,8 @@ component ScrollBar inherits Rectangle {
         moved => {
             if (self.enabled && self.pressed) {
                 root.value = -max(0px, min(root.maximum, self.pressed-value + (
-                    root.horizontal ? (i-touch-area.mouse-x - i-touch-area.pressed-x) * (root.maximum / (root.track-size - i-thumb.width))
+                    root.horizontal ? (touch-area.mouse-x - touch-area.pressed-x) * (root.maximum / (root.track-size - thumb.width))
-                               : (i-touch-area.mouse-y - i-touch-area.pressed-y) * (root.maximum / (root.track-size - i-thumb.height))
+                               : (touch-area.mouse-y - touch-area.pressed-y) * (root.maximum / (root.track-size - thumb.height))
                 )));
             }
         }
@@ -102,7 +102,7 @@ component ScrollBar inherits Rectangle {
         }
     }
 
-    i-up-scroll-button := ScrollViewButton {
+    up-scroll-button := ScrollViewButton {
         opacity: 0;
         x: !root.horizontal ? (parent.width - self.width) / 2 : 4px;
         y: root.horizontal ? (parent.height - self.height) / 2 : 4px;
@@ -113,7 +113,7 @@ component ScrollBar inherits Rectangle {
         }
     }
 
-    i-down-scroll-button := ScrollViewButton {
+    down-scroll-button := ScrollViewButton {
         opacity: 0;
         x: !root.horizontal ? (parent.width - self.width) / 2 : root.width - self.width - 4px;
         y: root.horizontal ? (parent.height - self.height) / 2 : root.height - self.height - 4px;
@@ -127,14 +127,16 @@ component ScrollBar inherits Rectangle {
 
 export component ScrollView {
     in property <bool> enabled: true;
-    out property <length> visible-width <=> i-flickable.width;
+    out property <length> visible-width <=> flickable.width;
-    out property <length> visible-height <=> i-flickable.height;
+    out property <length> visible-height <=> flickable.height;
-    in-out property <length> viewport-width <=> i-flickable.viewport-width;
+    in-out property <length> viewport-width <=> flickable.viewport-width;
-    in-out property <length> viewport-height <=> i-flickable.viewport-height;
+    in-out property <length> viewport-height <=> flickable.viewport-height;
-    in-out property <length> viewport-x <=> i-flickable.viewport-x;
+    in-out property <length> viewport-x <=> flickable.viewport-x;
-    in-out property <length> viewport-y <=> i-flickable.viewport-y;
+    in-out property <length> viewport-y <=> flickable.viewport-y;
     // FIXME: remove. This property is currently set by the ListView and is used by the native style to draw the scrollbar differently when it has focus
     in-out property <bool> has-focus;
+    
+    callback scrolled <=> flickable.flicked;
 
     min-height: 50px;
     min-width: 50px;
@@ -143,37 +145,37 @@ export component ScrollView {
     preferred-height: 100%;
     preferred-width: 100%;
 
-    i-flickable := Flickable {
+    flickable := Flickable {
         interactive: false;
-        viewport-y <=> i-vertical-bar.value;
+        viewport-y <=> vertical-bar.value;
-        viewport-x <=> i-horizontal-bar.value;
+        viewport-x <=> horizontal-bar.value;
         width: parent.width;
         height: parent.height;
 
         @children
     }
 
-    i-vertical-bar := ScrollBar {
+    vertical-bar := ScrollBar {
         enabled: root.enabled;
         width: 14px;
-        x: i-flickable.width + i-flickable.x - self.width;
+        x: flickable.width + flickable.x - self.width;
-        y: i-flickable.y;
+        y: flickable.y;
-        height:  i-flickable.height;
+        height:  flickable.height;
         horizontal: false;
-        maximum:  i-flickable.viewport-height - i-flickable.height;
+        maximum:  flickable.viewport-height - flickable.height;
-        page-size:  i-flickable.height;
+        page-size:  flickable.height;
-        visible: i-flickable.viewport-height > i-flickable.height;
+        visible: flickable.viewport-height > flickable.height;
     }
 
-    i-horizontal-bar := ScrollBar {
+    horizontal-bar := ScrollBar {
         enabled: root.enabled;
-        width:  i-flickable.width;
+        width:  flickable.width;
         height: 14px;
-        y: i-flickable.height + i-flickable.y - self.height;
+        y: flickable.height + flickable.y - self.height;
-        x: i-flickable.x;
+        x: flickable.x;
         horizontal: true;
-        maximum:  i-flickable.viewport-width - i-flickable.width;
+        maximum:  flickable.viewport-width - flickable.width;
-        page-size:  i-flickable.width;
+        page-size:  flickable.width;
-        visible: i-flickable.viewport-width > i-flickable.width;
+        visible: flickable.viewport-width > flickable.width;
     }
 }

internal/compiler/widgets/material/scrollview.slint

@@ -95,6 +95,8 @@ export component ScrollView {
     in-out property <length> viewport-height <=> flickable.viewport-height;
     in-out property <length> viewport-x <=> flickable.viewport-x;
     in-out property <length> viewport-y <=> flickable.viewport-y;
+    
+    callback scrolled <=> flickable.flicked;
 
     min-height: 50px;
     min-width: 50px;

internal/compiler/widgets/qt/internal-scrollview.slint

@@ -23,6 +23,8 @@ export component InternalScrollView {
     out property <length> native-padding-bottom: native.native-padding-bottom;
     in property <length> header-height: 0;
 
+    callback scrolled <=> fli.flicked;
+
     preferred-height: 100%;
     preferred-width: 100%;
     min-height: native.min-height;

internal/compiler/widgets/qt/scrollview.slint

@@ -13,6 +13,8 @@ export component ScrollView {
     in-out property <length> viewport-x <=> internal.viewport-x;
     in-out property <length> viewport-y <=> internal.viewport-y;
 
+    callback scrolled <=> internal.scrolled;
+
     min-height: internal.min-height;
     min-width: internal.min-width;
     horizontal-stretch: 1;