Fix flicker in the component list in design mode

Since the category items have different heights, the extrapolation of the listview to compute the correct scrollbar height will always be off, unless listview instantiated all items. So let's do that by hand and use a ScrollView.
slint-ui · Jul 12, 2024 · 16996df · 16996df
1 parent 4c73006
commit 16996df
Showing 1 changed file with 35 additions and 33 deletions.
diff --git a/tools/lsp/ui/components/expandable-listview.slint b/tools/lsp/ui/components/expandable-listview.slint
@@ -1,7 +1,7 @@
 // Copyright © SixtyFPS GmbH <info@slint.dev>
 // SPDX-License-Identifier: GPL-3.0-only OR LicenseRef-Slint-Royalty-free-2.0 OR LicenseRef-Slint-Software-3.0
 
-import { ListView, HorizontalBox, Palette } from "std-widgets.slint";
+import { HorizontalBox, Palette, ScrollView } from "std-widgets.slint";
 import { ComponentListItem, ComponentItem } from "../api.slint";
 import { StateLayer } from "./state-layer.slint";
 import { EditorSizeSettings, EditorAnimationSettings, Icons } from "./styling.slint";
@@ -112,7 +112,7 @@ component ItemTemplate {
     ]
 }
 
-export component ExpandableListView inherits ListView {
+export component ExpandableListView inherits ScrollView {
     in property <[ComponentListItem]> known-components;
     in property <length> preview-area-position-x;
     in property <length> preview-area-position-y;
@@ -132,44 +132,46 @@ export component ExpandableListView inherits ListView {
 
     property <bool> preview-visible: preview-area-width > 0px && preview-area-height > 0px;
     property <length> list-spacing: 10px;
-
-    for cli[index] in root.known-components: VerticalLayout {
-        property <int> my-category-index: index;
-
-        header-item := HeaderItemTemplate {
-            text: cli.category;
-        }
 
-        if header-item.open : VerticalLayout {
-            for ci[index] in cli.components: ItemTemplate {
-                property <length> drop-x: self.absolute-position.x + self.mouse-x - root.preview-area-position-x;
-                property <length> drop-y: self.absolute-position.y + self.mouse-y - root.preview-area-position-y;
-                property <bool> on-drop-area:
-                            drop-x >= 0 && drop-x <= root.preview-area-width && drop-y >= 0 && drop-y <= root.preview-area-height;
-                property <ComponentItem> data: ci;
-
-                can-drop-here: !self.data.is-currently-shown && root.can-drop(self.data.name, drop-x, drop-y, on-drop-area);
-                enabled: root.preview-visible;
-                text: ci.name;
-                offset: header-item.offset;
-                height: self.min-height;
+    VerticalLayout {
+        alignment: start;
+        for cli[index] in root.known-components: VerticalLayout {
+            property <int> my-category-index: index;
+            header-item := HeaderItemTemplate {
+                text: cli.category;
+            }
 
-                clicked => {
-                    if ci.is_user_defined && !ci.is_currently_shown {
-                        root.show-preview-for(self.data.name, self.data.defined_at)
+            if header-item.open: VerticalLayout {
+                for ci[index] in cli.components: ItemTemplate {
+                    property <length> drop-x: self.absolute-position.x + self.mouse-x - root.preview-area-position-x;
+                    property <length> drop-y: self.absolute-position.y + self.mouse-y - root.preview-area-position-y;
+                    property <bool> on-drop-area:
+                            drop-x >= 0 && drop-x <= root.preview-area-width && drop-y >= 0 && drop-y <= root.preview-area-height;
+                    property <ComponentItem> data: ci;
+
+                    can-drop-here: !self.data.is-currently-shown && root.can-drop(self.data.name, drop-x, drop-y, on-drop-area);
+                    enabled: root.preview-visible;
+                    text: ci.name;
+                    offset: header-item.offset;
+                    height: self.min-height;
+
+                    clicked => {
+                        if ci.is_user_defined && !ci.is_currently_shown {
+                            root.show-preview-for(self.data.name, self.data.defined_at)
+                        }
                     }
-                }
 
-                pointer-event(event) => {
-                    if self.can-drop-here && event.kind == PointerEventKind.up && event.button == PointerEventButton.left {
-                        root.drop(self.data.name, drop-x, drop-y);
+                    pointer-event(event) => {
+                        if self.can-drop-here && event.kind == PointerEventKind.up && event.button == PointerEventButton.left {
+                            root.drop(self.data.name, drop-x, drop-y);
+                        }
                     }
-                }
 
-                init() => {
-                    root.visible-component = ci;
+                    init() => {
+                        root.visible-component = ci;
+                    }
                 }
-            }   
+            }
         }
     }
 }