flet icon indicating copy to clipboard operation
flet copied to clipboard

ListView and ListTile: scroll, height, expand properties issues

Open ClearSafety opened this issue 4 months ago • 0 comments

Duplicate Check

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

Describe the bug

ListView has a few issues:

It doesn't have a 'scroll' property. The scroll bar appears only if the property 'expand' is set to true. The 'hight' property doesn't work properly. If you set a value to 'hight' , it will increase the size of the ListView, but will not display all the controls.

ListTile as value passed to controls property of ListView or Column has weird behaviour. It overlaps other controls, specially if you scroll down the control that has it in.

Code sample

Code
First Version: using 'hight' property:
import flet as ft

def main(page: ft.Page):
       
    def click(e):
        option.value = f'Selected {e.control.title.value}'
        page.update()
        
    option = ft.Text()
    
    list_view = ft.ListView(
        controls=[
            ft.ListTile(
                title=ft.Text(f'Option {x}'), 
                on_click=click,
                hover_color='red',
                bgcolor='amber'
            )
            for x in range(1, 100)
        ],
        height=400,
    )

    page.add(option,
             ft.Divider(), 
             ft.Text('Start if tge ListView', size=50), 
             list_view, 
             ft.Divider(), 
             ft.Text('End of the ListView', size=50))

ft.app(target=main)

Second Version: using 'expand' property:
import flet as ft

def main(page: ft.Page):
       
    def click(e):
        option.value = f'Selected {e.control.title.value}'
        page.update()
        
    option = ft.Text()
    
    list_view = ft.ListView(
        controls=[
            ft.ListTile(
                title=ft.Text(f'Option {x}'), 
                on_click=click,
                hover_color='red',
                bgcolor='amber'
            )
            for x in range(1, 100)
        ],
        expand=True,
    )

    page.add(option,
             ft.Divider(), 
             ft.Text('Start if tge ListView', size=50), 
             list_view, 
             ft.Divider(), 
             ft.Text('End of the ListView', size=50))

ft.app(target=main)

To reproduce

  1. Run the repro code.
  2. Scroll down

Expected behavior

It was expected that the ListView doesn't overlap the other controls.

Screenshots / Videos

Captures

[Upload media here]

Operating System

Windows

Operating system details

Windows 11 Pro

Flet version

0.24.1

Regression

No, it isn't

Suggestions

No response

Logs

Logs
[Paste your logs here]

Additional details

No response

ClearSafety avatar Oct 08 '24 21:10 ClearSafety