flet-dev / flet

Flet enables developers to easily build realtime web, mobile and desktop apps in Python. No frontend experience required.
https://flet.dev
Apache License 2.0
9.59k stars 372 forks source link

ListView(of ListTiles) display is buggy if ListTile height is smaller than 20 #453

Open YouJiacheng opened 1 year ago

YouJiacheng commented 1 year ago
from pathlib import Path

import flet
from flet import ListView, ListTile, Page, Text
from flet import UserControl

class DirectoryView(UserControl):
    def __init__(self, expand: bool | int | None = None):
        super().__init__(expand=expand, height=1000)
        self.current_working_dir = Path('~').expanduser()
        self.file_list = list(self.current_working_dir.iterdir())

    def build(self):
        selected: int | None = None

        def select():
            if selected is not None:
                item_list[selected].selected = True

        def deselect():
            if selected is not None:
                item_list[selected].selected = False

        def build_item(i: int, path: Path):
            def on_click(_):
                nonlocal selected
                deselect()
                selected = i
                select()
                self.update()

            return ListTile(title=Text(path.name, size=10), on_click=on_click, height=20)
        item_list: list[ListTile] = [build_item(i, path) for i, path in enumerate(self.file_list)]
        return ListView(item_list)

def main(page: Page):
    page.add(DirectoryView())

flet.app(target=main)

image I clicked .cache, but actually .config was selected, because display was abnormal.

YouJiacheng commented 1 year ago

Text size=20 + ListTile height=40 has NO problem.

YouJiacheng commented 1 year ago

Replace ListTile with Container has NO problem. It seems that this is a ListTile bug.

ndonkoHenri commented 2 weeks ago

ListTile.minTileHeight implemented in https://github.com/flutter/flutter/pull/145244 should fix this issue. Will add it once Flet bumps to Flutter 0.22.0