flet icon indicating copy to clipboard operation
flet copied to clipboard

scroll_to method doesn't scroll to specific key of ListView layout component if specific item is not visible and ...

Open florian3d opened this issue 1 year ago • 1 comments

Duplicate Check

  • [X] I have searched the opened issues and there are no duplicates

Describe the bug

if slider number value is greater than last visible element order number or less than first visible element order number (the absolute delta depends on window size)

Code sample

Code
import flet

content = ['Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.', 'Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum']

def main(page: flet.Page):

    lv_items = flet.ListView(expand=1, spacing=0, padding=flet.padding.all(0.0), auto_scroll=False)
    page.add(lv_items)

    def bs_scroll_to_show(e):
        scroll_to_slider.max = 100
        scroll_to_slider.divisions = 100
        bs_scroll_to.open=True
        bs_scroll_to.update()
    
    def update_scroll_to_val(e):
        scroll_to_value.value = round(scroll_to_slider.value)
        scroll_to_value.update()

    def bs_scroll_to_dismiss(e):
        bs_scroll_to.open=False
        bs_scroll_to.update()

    def test_scroll_to(e):
        print(round(scroll_to_slider.value))
        # bs_scroll_to_dismiss(e)
        lv_items.scroll_to(key=str(round(scroll_to_slider.value)), duration=500)

    def scroll_to_start(e):
        lv_items.scroll_to(offset=0, duration=250)

    def scroll_to_end(e):
        lv_items.scroll_to(offset=-1, duration=250)

    for i in range(100):
        lv_items.controls.append(
            flet.ListTile(
                    leading=flet.Text(f'{str(i+1)}'.rjust(3, ' '), italic=True, no_wrap=False, text_align=flet.TextAlign.START, color=flet.colors.RED),
                    title=flet.Text(content[i%2], no_wrap=False, overflow=flet.TextOverflow.VISIBLE, font_family='verse_text', text_align=flet.TextAlign.LEFT),
                    dense=True,
                    visual_density=flet.VisualDensity.COMPACT,
                    key=str(i+1),
                    on_click=bs_scroll_to_show
                )
        )

    lv_items.update()

    scroll_to_value = flet.Text('1', size=24)
    scroll_to_slider = flet.Slider(min=1, max=1, value=1, divisions=100, on_change_end=test_scroll_to, on_change=update_scroll_to_val)

    bs_scroll_to = flet.BottomSheet(
        content=flet.Container(
                    content=flet.Column(
            [
                scroll_to_value,
                scroll_to_slider,
                flet.ElevatedButton("to start", on_click=scroll_to_start),
                flet.ElevatedButton("to end", on_click=scroll_to_end),
            ],
            spacing=10,
            tight=True,
            horizontal_alignment=flet.CrossAxisAlignment.CENTER,
            scroll=None
        ), padding=10
        ),
        on_dismiss=bs_scroll_to_dismiss
    )

    page.overlay.append(bs_scroll_to)
    page.update()

flet.app(target=main, view=flet.AppView.FLET_APP)

To reproduce

  1. run code
  2. click on item to show bottom menu
  3. use slider to set number bigger or smaller than last or first visible item order number

Expected behavior

to scroll to specific key (order number in this example is the same as key value)

Screenshots / Videos

Captures

[Upload media here]

https://github.com/user-attachments/assets/0c49c8e9-ed85-4dd4-9360-03646a1ae931

Operating System

Windows

Operating system details

Windows 10 Pro

Flet version

flet-0.24.0 flet-core-0.24.0 flet-runtime-0.24.0

Regression

I'm not sure / I don't know

Suggestions

No response

Logs

Logs
[Paste your logs here]

Additional details

No response

florian3d avatar Sep 03 '24 13:09 florian3d

This issue could be solved by setting the cache_extent parameter of the ListView to a big value.

We will work on a proper solution, but you can try the above while waiting.

ndonkoHenri avatar Nov 27 '24 08:11 ndonkoHenri