std-list-view: bring selected into view (#2246)

* std-list-view: bring selected into view

* Update internal/compiler/widgets/fluent-base/std-widgets-base.slint

Co-authored-by: Simon Hausmann <simon.hausmann@slint-ui.com>

* code review

---------

Co-authored-by: Simon Hausmann <simon.hausmann@slint-ui.com>
This commit is contained in:
Florian Blasius 2023-02-17 12:50:09 +00:00 committed by GitHub
parent aba5797eaa
commit 1b04601750
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
5 changed files with 91 additions and 19 deletions

View file

@ -503,8 +503,12 @@ export component ListView inherits ScrollView {
}
component StandardListViewBase inherits ListView {
private property <length> item-height: self.viewport-height / self.model.length;
private property <length> current-item-y: self.viewport-y + current-item * item-height;
in property<[StandardListViewItem]> model;
in-out property<int> current-item: -1;
for item[idx] in root.model : Rectangle {
l := HorizontalLayout {
padding: 8px;
@ -519,7 +523,26 @@ component StandardListViewBase inherits ListView {
touch := TouchArea {
width: parent.width;
height: parent.height;
clicked => { root.current-item = idx; }
clicked => {
set-current-item(idx);
}
}
}
public function set-current-item(index: int) {
if(index < 0 || index >= model.length) {
return;
}
current-item = index;
if(current-item-y < 0) {
self.viewport-y += 0 - current-item-y;
}
if(current-item-y + item-height > self.visible-height) {
self.viewport-y -= current-item-y + item-height - self.visible-height;
}
}
}
@ -527,11 +550,11 @@ component StandardListViewBase inherits ListView {
export component StandardListView inherits StandardListViewBase {
FocusScope {
key-pressed(event) => {
if (event.text == Key.UpArrow && root.current-item > 0) {
root.current-item -= 1;
if (event.text == Key.UpArrow) {
root.set-current-item(root.current-item - 1);
return accept;
} else if (event.text == Key.DownArrow && root.current-item + 1 < root.model.length) {
root.current-item += 1;
} else if (event.text == Key.DownArrow) {
root.set-current-item(root.current-item + 1);
return accept;
}
reject

View file

@ -11,13 +11,35 @@ export component ListView inherits ScrollView {
}
component StandardListViewBase inherits ListView {
private property <length> item-height: self.viewport-height / self.model.length;
private property <length> current-item-y: self.viewport-y + current-item * item-height;
in property<[StandardListViewItem]> model;
in-out property<int> current-item: -1;
for item[idx] in root.model : Item {
selected: idx == root.current-item;
text: item.text;
clicked => { root.current-item = idx; }
clicked => {
set-current-item(idx);
}
}
public function set-current-item(index: int) {
if(index < 0 || index >= model.length) {
return;
}
current-item = index;
if(current-item-y < 0) {
self.viewport-y += 0 - current-item-y;
}
if(current-item-y + item-height > self.visible-height) {
self.viewport-y -= current-item-y + item-height - self.visible-height;
}
}
}
@ -25,11 +47,11 @@ component StandardListViewBase inherits ListView {
export component StandardListView inherits StandardListViewBase {
FocusScope {
key-pressed(event) => {
if (event.text == Key.UpArrow && root.current-item > 0) {
root.current-item -= 1;
if (event.text == Key.UpArrow) {
root.set-current-item(root.current-item - 1);
return accept;
} else if (event.text == Key.DownArrow && root.current-item + 1 < root.model.length) {
root.current-item += 1;
} else if (event.text == Key.DownArrow) {
root.set-current-item(root.current-item + 1);
return accept;
}
reject

View file

@ -143,15 +143,38 @@ export component ListView inherits ScrollView {
}
component StandardListViewBase inherits ListView {
private property <length> item-height: self.viewport-height / self.model.length;
private property <length> current-item-y: self.viewport-y + current-item * item-height;
in property<[StandardListViewItem]> model;
in-out property<int> current-item: -1;
for item[i] in root.model : NativeStandardListViewItem {
item: item;
index: i;
is-selected: root.current-item == i;
has-hover: ta.has-hover;
ta := TouchArea {
clicked => { root.current-item = i; }
clicked => {
set-current-item(i);
}
}
}
public function set-current-item(index: int) {
if(index < 0 || index >= model.length) {
return;
}
root.current-item = index;
if(current-item-y < 0) {
self.viewport-y += 0 - current-item-y;
}
if(current-item-y + item-height > self.visible-height) {
self.viewport-y -= current-item-y + item-height - self.visible-height;
}
}
}
@ -159,15 +182,14 @@ component StandardListViewBase inherits ListView {
export component StandardListView inherits StandardListViewBase {
FocusScope {
key-pressed(event) => {
if (event.text == Key.UpArrow && root.current-item > 0) {
root.current-item -= 1;
accept
} else if (event.text == Key.DownArrow && root.current-item + 1 < root.model.length) {
root.current-item += 1;
accept
} else {
reject
if (event.text == Key.UpArrow) {
root.set-current-item(root.current-item - 1);
return accept;
} else if (event.text == Key.DownArrow) {
root.set-current-item(root.current-item + 1);
return accept;
}
reject
}
}
}