Flet ListView

ListView는 Flet에서 중요한 UI 컴포넌트 중 하나로, 많은 항목들을 스크롤 가능한 리스트 형태로 표시하는데 사용됩니다.

• ListView는 Flet에서 스크롤 가능한 목록을 만드는 데 사용됩니다.
• 많은 항목을 효율적으로 표시할 수 있어 채팅, 데이터 목록 등 다양한 경우에 활용할 수 있습니다.
• 속성으로는 spacing, padding, expand, auto_scroll 등이 있으며, scroll_direction을 통해 수평/수직 스크롤을 조절할 수 있습니다.

Flet의 ListView는 데이터를 유연하고 효율적으로 보여주는 데 유용하며, 다양한 사용자 인터페이스에 쉽게 적용될 수 있는 강력한 도구입니다.

1. Flet ListView 개요

ListView는 스크롤 가능한 위젯으로, 여러 개의 자식 요소를 포함할 수 있는 컨테이너입니다. 데이터나 항목들이 많을 경우, ListView를 사용하여 사용자에게 스크롤 가능한 목록 형태로 보여줄 수 있습니다. ListView는 수평 또는 수직 방향으로 스크롤 가능하며, 동적인 항목 추가 및 제거도 지원합니다.

2. 기본 사용법

Flet에서 ListView를 사용하려면 다음과 같은 기본적인 구조로 사용할 수 있습니다:

import flet as ft

def main(page: ft.Page):
    list_view = ft.ListView(expand=True, spacing=10, padding=20)

    for i in range(10):
        list_view.controls.append(ft.Text(f"Item {i}"))

    page.add(list_view)

ft.app(target=main)

ListView

코드 설명:

• ListView(expand=True, spacing=10, padding=20): ListView 인스턴스를 생성합니다. 여기서:
  • expand=True: ListView가 페이지에 최대한의 공간을 차지하도록 확장되도록 설정합니다.
  • spacing=10: 리스트 아이템들 사이의 간격을 10으로 설정합니다.
  • padding=20: 리스트의 가장자리에 20의 여백을 줍니다.
• list_view.controls.append(): 리스트에 새로운 컨트롤(예: 텍스트)을 추가합니다.

3. 주요 속성

• spacing: 각 항목들 사이의 간격을 설정합니다.
• padding: 리스트뷰 가장자리와 항목들 사이의 간격을 조정합니다.
• expand: True로 설정하면 ListView가 가능한 많은 공간을 차지합니다. 반대로, 크기를 수동으로 설정할 수 있습니다.
• auto_scroll: True로 설정하면 항목이 추가될 때마다 자동으로 스크롤됩니다. 채팅 애플리케이션과 같은 경우에 유용합니다.

4. 동적 데이터 추가

ListView에 동적으로 데이터를 추가할 수도 있습니다. 이를 통해 사용자 입력 또는 실시간 데이터를 리스트에 반영할 수 있습니다.

import flet as ft

def main(page: ft.Page):
    list_view = ft.ListView(expand=True, auto_scroll=True)

    def add_item(e):
        list_view.controls.append(ft.Text(f"New item {len(list_view.controls) + 1}"))
        page.update()

    add_button = ft.ElevatedButton("Add Item", on_click=add_item)

    page.add(list_view, add_button)

ft.app(target=main)

동적 데이터 추가

코드 설명:

• auto_scroll=True: 새로운 항목이 추가될 때 리스트가 자동으로 스크롤됩니다.
• add_item() 함수: 버튼 클릭 시 새로운 항목을 ListView에 추가하고 페이지를 업데이트합니다.

728x90

5. 스크롤 방향 설정

ListView는 기본적으로 수직 방향으로 스크롤되지만, scroll_direction 속성을 통해 수평 스크롤로 변경할 수도 있습니다.

list_view = ft.ListView(expand=True, scroll_direction="horizontal")

• scroll_direction: "horizontal"로 설정하면 리스트가 수평으로 스크롤됩니다. 기본값은 "vertical"입니다.

6. 활용 예시: 채팅 애플리케이션

ListView는 채팅 애플리케이션처럼 항목이 실시간으로 추가되고 사용자에게 자동으로 보여줘야 하는 경우에 유용합니다.

import flet as ft

def main(page: ft.Page):
    chat_view = ft.ListView(expand=True, auto_scroll=True)

    def send_message(e):
        chat_view.controls.append(ft.Text(f"User: {message_box.value}"))
        message_box.value = ""
        page.update()

    message_box = ft.TextField(hint_text="Enter your message")
    send_button = ft.ElevatedButton("Send", on_click=send_message)

    page.add(chat_view, message_box, send_button)

ft.app(target=main)

채팅 어플리케이션 활용 예