language-servers/slint
1
0
Fork 0
mirror of https://github.com/slint-ui/slint.git synced 2025-10-03 15:14:35 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions 5

Added scrolled callback to ListView and ScrollView (#5964)

Browse source
This commit is contained in:
FloVanGH 2024-08-27 10:18:43 +00:00 • committed by GitHub
parent f5d950cf0c
commit 039f33eaae
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
9 changed files with 88 additions and 66 deletions
Download patch file Download diff file Expand all files Collapse all files

1
CHANGELOG.md
View file

@ -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.

5
docs/reference/src/language/widgets/listview.md
View file

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

4
docs/reference/src/language/widgets/scrollview.md
View file

@ -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

2
internal/compiler/widgets/cosmic/scrollview.slint
View file

@ -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;

60
internal/compiler/widgets/cupertino/scrollview.slint
View file

@ -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);
y: root.horizontal ? (parent.height - self.height) / 2 : root.offset + (root.track-size - i-thumb.height) * (-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 - 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))
: (i-touch-area.mouse-y - i-touch-area.pressed-y) * (root.maximum / (root.track-size - i-thumb.height))
root.horizontal ? (touch-area.mouse-x - touch-area.pressed-x) * (root.maximum / (root.track-size - thumb.width))
: (touch-area.mouse-y - touch-area.pressed-y) * (root.maximum / (root.track-size - thumb.height))
)));
}
}
@ -86,15 +86,17 @@ 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-height <=> i-flickable.height;
in-out property <length> viewport-width <=> i-flickable.viewport-width;
in-out property <length> viewport-height <=> i-flickable.viewport-height;
in-out property <length> viewport-x <=> i-flickable.viewport-x;
in-out property <length> viewport-y <=> i-flickable.viewport-y;
out property <length> visible-width <=> flickable.width;
out property <length> visible-height <=> flickable.height;
in-out property <length> viewport-width <=> flickable.viewport-width;
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;
// 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;
@ -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-x <=> i-horizontal-bar.value;
viewport-y <=> vertical-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;
page-size: i-flickable.height;
visible: i-flickable.viewport-height > i-flickable.height;
maximum: flickable.viewport-height - flickable.height;
page-size: 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;
page-size: i-flickable.width;
visible: i-flickable.viewport-width > i-flickable.width;
maximum: flickable.viewport-width - flickable.width;
page-size: flickable.width;
visible: flickable.viewport-width > flickable.width;
}
}

76
internal/compiler/widgets/fluent/scrollview.slint
View file

@ -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;
i-down-scroll-button.opacity: 1;
up-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);
y: root.horizontal ? parent.height - 4px - self.height : root.offset + (root.track-size - i-thumb.height) * (-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 - 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))
: (i-touch-area.mouse-y - i-touch-area.pressed-y) * (root.maximum / (root.track-size - i-thumb.height))
root.horizontal ? (touch-area.mouse-x - touch-area.pressed-x) * (root.maximum / (root.track-size - thumb.width))
: (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,15 +127,17 @@ component ScrollBar inherits Rectangle {
export component ScrollView {
in property <bool> enabled: true;
out property <length> visible-width <=> i-flickable.width;
out property <length> visible-height <=> i-flickable.height;
in-out property <length> viewport-width <=> i-flickable.viewport-width;
in-out property <length> viewport-height <=> i-flickable.viewport-height;
in-out property <length> viewport-x <=> i-flickable.viewport-x;
in-out property <length> viewport-y <=> i-flickable.viewport-y;
out property <length> visible-width <=> flickable.width;
out property <length> visible-height <=> flickable.height;
in-out property <length> viewport-width <=> flickable.viewport-width;
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;
// 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;
@ -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-x <=> i-horizontal-bar.value;
viewport-y <=> vertical-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;
y: i-flickable.y;
height: i-flickable.height;
x: flickable.width + flickable.x - self.width;
y: flickable.y;
height: flickable.height;
horizontal: false;
maximum: i-flickable.viewport-height - i-flickable.height;
page-size: i-flickable.height;
visible: i-flickable.viewport-height > i-flickable.height;
maximum: flickable.viewport-height - flickable.height;
page-size: 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;
x: i-flickable.x;
y: flickable.height + flickable.y - self.height;
x: flickable.x;
horizontal: true;
maximum: i-flickable.viewport-width - i-flickable.width;
page-size: i-flickable.width;
visible: i-flickable.viewport-width > i-flickable.width;
maximum: flickable.viewport-width - flickable.width;
page-size: flickable.width;
visible: flickable.viewport-width > flickable.width;
}
}

2
internal/compiler/widgets/material/scrollview.slint
View file

@ -96,6 +96,8 @@ export component ScrollView {
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;
horizontal-stretch: 1;

2
internal/compiler/widgets/qt/internal-scrollview.slint
View file

@ -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;

2
internal/compiler/widgets/qt/scrollview.slint
View file

@ -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;