Flet Button와 Event

Flet

Flet에서 버튼(Button)은 사용자와의 상호작용을 처리하는 중요한 위젯 중 하나입니다. 버튼을 사용하면 클릭 이벤트를 처리할 수 있으며, Flet에서 제공하는 여러 종류의 버튼이 있습니다. 각각의 버튼은 다양한 스타일을 제공하며, 주로 버튼 클릭 시 실행할 이벤트 핸들러 함수를 설정하여 동작을 제어합니다.

다음은 Flet의 버튼 종류와 이벤트 처리 방법에 대한 설명입니다.

1. Flet에서 제공하는 버튼 종류

Flet은 다양한 버튼 스타일을 제공합니다. 주로 사용하는 버튼은 다음과 같습니다.

1) ElevatedButton

설명: Raised 버튼 스타일로, 약간의 그림자 효과가 있는 버튼입니다. 가장 일반적으로 사용되는 버튼 타입입니다.

예시:

  import flet as ft

  def main(page: ft.Page):
      def button_clicked(e):
          page.add(ft.Text("ElevatedButton이 클릭되었습니다!"))

      button = ft.ElevatedButton("클릭하세요", on_click=button_clicked)
      page.add(button)

  ft.app(target=main)

2) TextButton

설명: 일반적인 텍스트 버튼으로, 배경이 없는 버튼입니다. 텍스트만 표시되며, 클릭하면 텍스트가 강조됩니다.

예시:

  def main(page: ft.Page):
      def button_clicked(e):
          page.add(ft.Text("TextButton이 클릭되었습니다!"))

      button = ft.TextButton("텍스트 버튼", on_click=button_clicked)
      page.add(button)

  ft.app(target=main)

3) OutlinedButton

설명: 외곽선만 있는 버튼으로, 버튼 주위에 테두리가 있는 스타일입니다. 일반적으로 텍스트와 함께 사용됩니다.

예시:

  def main(page: ft.Page):
      def button_clicked(e):
          page.add(ft.Text("OutlinedButton이 클릭되었습니다!"))

      button = ft.OutlinedButton("외곽선 버튼", on_click=button_clicked)
      page.add(button)

  ft.app(target=main)

4) IconButton

설명: 텍스트 없이 아이콘만 표시되는 버튼입니다. 주로 간단한 아이콘 기반의 인터페이스에서 사용됩니다.

예시:

  def main(page: ft.Page):
      def button_clicked(e):
          page.add(ft.Text("IconButton이 클릭되었습니다!"))

      button = ft.IconButton(icon=ft.icons.FAVORITE, on_click=button_clicked)
      page.add(button)

  ft.app(target=main)

 

Button 타입 비교

import flet as ft

def main(page: ft.Page):
    page.theme_mode = ft.ThemeMode.LIGHT
    page.title="Button Types"

    def button_clicked(e):
        page.add(ft.Text("ElevatedButton이 클릭되었습니다!"))

    button1 = ft.ElevatedButton("클릭하세요", on_click=button_clicked)
    button2 = ft.TextButton("텍스트 버튼", on_click=button_clicked)
    button3 = ft.OutlinedButton("외곽선 버튼", on_click=button_clicked)
    button4 = ft.IconButton(icon=ft.icons.FAVORITE, on_click=button_clicked)
    page.add(button1, button2, button3, button4)

ft.app(target=main)

 

Button 타입

---

2. Flet에서 버튼 클릭 이벤트 처리

Flet에서 버튼을 클릭할 때 발생하는 이벤트를 처리하는 방법은 매우 간단합니다. on_click 속성에 함수(이벤트 핸들러)를 전달하여 버튼 클릭 시 실행할 동작을 정의할 수 있습니다.

1) 버튼 클릭 이벤트 처리

이벤트 핸들러는 버튼이 클릭되었을 때 호출되는 함수로, 클릭 이벤트가 발생하면 해당 함수가 실행됩니다. 이 함수는 이벤트 객체(e)를 매개변수로 받습니다.

예시:

  import flet as ft

  def main(page: ft.Page):
      # 버튼 클릭 이벤트 핸들러 함수
      def button_clicked(e):
          page.add(ft.Text("버튼이 클릭되었습니다!"))

      # ElevatedButton 생성
      button = ft.ElevatedButton("클릭하세요", on_click=button_clicked)

      # 페이지에 버튼 추가
      page.add(button)

  # 앱 실행
  ft.app(target=main)

2) 버튼에 전달할 추가 데이터

버튼을 클릭할 때 추가 데이터를 전달해야 하는 경우, 이벤트 핸들러를 호출할 때 람다 함수를 사용할 수 있습니다. 람다 함수를 사용하면 특정 데이터와 함께 이벤트 핸들러를 호출할 수 있습니다.

예시:

  def main(page: ft.Page):
      def button_clicked(e, message):
          page.add(ft.Text(message))

      # 람다 함수로 클릭 시 추가 데이터를 전달
      button = ft.ElevatedButton("메시지 출력", 
      	on_click=lambda e: button_clicked(e, "버튼이 클릭되었습니다!"))
      page.add(button)

  ft.app(target=main)

3) 상태 기반 버튼 동작

Flet에서는 상태 기반의 애플리케이션도 쉽게 만들 수 있습니다. 버튼 클릭 시 상태를 변경하고, 그 상태에 따라 동작을 달리할 수 있습니다.

예시: 버튼을 클릭할 때마다 카운터가 증가하는 애플리케이션

  def main(page: ft.Page):
      count = 0  # 상태 변수

      # 버튼 클릭 이벤트 처리
      def increment_counter(e):
          nonlocal count
          count += 1
          page.add(ft.Text(f"카운트: {count}"))

      # 버튼 생성
      button = ft.ElevatedButton("카운트 증가", on_click=increment_counter)
      page.add(button)

  ft.app(target=main)

4) 비동기 함수와 버튼

Flet은 비동기 함수도 지원하므로, 버튼 클릭 시 비동기 작업을 실행할 수 있습니다. 예를 들어, API 호출이나 긴 작업을 처리하는 비동기 함수를 버튼 클릭 이벤트에 연결할 수 있습니다.

예시:

  import asyncio

  async def main(page: ft.Page):
      async def button_clicked(e):
          page.add(ft.Text("비동기 작업 시작..."))
          await asyncio.sleep(2)  # 2초 대기
          page.add(ft.Text("비동기 작업 완료"))

      button = ft.ElevatedButton("비동기 작업 실행", on_click=button_clicked)
      page.add(button)

  ft.app(target=main)

 

5) 로딩 상태 표시(Loading state)

버튼을 클릭하면 해당 버튼을 로딩 상태로 전환해 진행 중인 작업을 사용자에게 시각적으로 나타낼 수 있습니다.

예시:

  def main(page: ft.Page):
      async def button_clicked(e):
          # 버튼을 로딩 상태로 변경
          button.text = "로딩 중..."
          button.disabled = True
          button.update()

          await asyncio.sleep(2)  # 2초 대기

          # 작업이 끝난 후 버튼을 원래 상태로 되돌림
          button.text = "클릭하세요"
          button.disabled = False
          button.update()

      button = ft.ElevatedButton("클릭하세요", on_click=button_clicked)
      page.add(button)

  ft.app(target=main)

 

---

728x90

3. 버튼의 추가 옵션

Flet의 버튼에는 다양한 옵션이 있어, 디자인 및 동작을 커스터마이즈할 수 있습니다.

1) icon 속성

버튼에 아이콘을 추가할 수 있습니다. 아이콘과 텍스트를 함께 표시하려면 icon 속성을 사용합니다.

예시:

  button = ft.ElevatedButton("좋아요", icon=ft.icons.THUMB_UP)

2) disabled 속성

버튼을 비활성화 상태로 설정하려면 disabled=True 속성을 사용합니다. 비활성화된 버튼은 클릭할 수 없으며, 회색으로 표시됩니다.

예시:

  button = ft.ElevatedButton("비활성화된 버튼", disabled=True)

3) style 속성

버튼의 스타일을 사용자 정의할 수 있습니다. Flet은 여러 가지 기본 스타일을 제공하며, 버튼의 배경색, 텍스트 색상 등을 설정할 수 있습니다.

예시: 버튼의 배경색과 텍스트 색상 변경

  button = ft.ElevatedButton(
      "스타일 버튼",
      style=ft.ButtonStyle(
          bgcolor=ft.colors.BLUE,  # 배경색
          color=ft.colors.WHITE    # 텍스트 색상
      )
  )

---

Flet에서 버튼은 다양한 종류와 스타일로 제공되며, 버튼 클릭 이벤트를 쉽게 처리할 수 있습니다. Flet의 ElevatedButton, TextButton, OutlinedButton, IconButton 등 다양한 버튼을 통해 애플리케이션의 UI를 구성할 수 있으며, 이벤트 핸들러를 사용하여 버튼 클릭 시 다양한 동작을 수행하도록 할 수 있습니다. 또한, 버튼의 아이콘, 스타일, 상태(비활성화 등) 등을 설정하여 버튼의 외관과 동작을 쉽게 조정할 수 있습니다.

Button 이벤트

Flet에서 버튼은 사용자와 상호작용을 처리할 수 있는 주요 UI 요소 중 하나입니다. 버튼의 이벤트는 주로 클릭 이벤트와 관련이 있지만, Flet은 버튼과 관련된 다양한 이벤트 및 고급 기능을 제공합니다. 이러한 이벤트와 기능을 활용하여 더욱 상호작용적이고 동적인 애플리케이션을 만들 수 있습니다.

다음은 Flet에서 버튼 이벤트의 종류와 고급 기능에 대한 설명입니다.

1. 버튼의 기본 이벤트 종류

Flet에서 버튼에 대한 기본적인 이벤트는 클릭 이벤트입니다. 하지만 클릭뿐만 아니라 버튼과 관련된 여러 이벤트도 사용할 수 있습니다.

1) on_click (버튼 클릭 이벤트)

설명: 사용자가 버튼을 클릭했을 때 호출되는 기본 이벤트입니다. 가장 많이 사용하는 이벤트 중 하나이며, 버튼을 클릭할 때 특정 동작을 수행하도록 설정합니다.

예시:

  def main(page: ft.Page):
      def button_clicked(e):
          page.add(ft.Text("버튼이 클릭되었습니다!"))

      button = ft.ElevatedButton("클릭", on_click=button_clicked)
      page.add(button)

  ft.app(target=main)

2) on_long_press (버튼 길게 누름 이벤트)

설명: 버튼을 길게 누를 때 발생하는 이벤트입니다. 모바일 또는 터치스크린 장치에서 주로 유용하게 사용할 수 있습니다. 일반적인 클릭과는 다른 동작을 처리하고자 할 때 유용합니다.

예시:

  def main(page: ft.Page):
      def button_long_press(e):
          page.add(ft.Text("버튼이 길게 눌렸습니다!"))

      button = ft.ElevatedButton("길게 누르세요", on_long_press=button_long_press)
      page.add(button)

  ft.app(target=main)

3) on_hover (마우스 호버 이벤트)

설명: 버튼 위에 마우스를 올릴 때 발생하는 호버(hover) 이벤트입니다. 마우스를 버튼 위로 이동하면 시각적인 변화를 주거나, 특정 동작을 수행할 수 있습니다.

예시:

  def main(page: ft.Page):
      def button_hover(e):
          page.add(ft.Text("마우스가 버튼 위에 있습니다!"))

      button = ft.ElevatedButton("Hover 버튼", on_hover=button_hover)
      page.add(button)

  ft.app(target=main)

4) on_focus (포커스 이벤트)

설명: 버튼이 포커스를 받았을 때 발생하는 이벤트입니다. 주로 키보드로 버튼을 선택하거나, 탭을 통해 버튼을 선택할 때 사용됩니다.

예시:

  def main(page: ft.Page):
      def button_focused(e):
          page.add(ft.Text("버튼이 포커스를 받았습니다!"))

      button = ft.ElevatedButton("포커스 받기", on_focus=button_focused)
      page.add(button)

  ft.app(target=main)

5) on_blur (포커스 해제 이벤트)

설명: 버튼에서 포커스가 해제될 때 발생하는 이벤트입니다. 예를 들어, 버튼이 선택되었다가 다른 UI 요소로 이동할 때 발생합니다.

예시:

  def main(page: ft.Page):
      def button_blurred(e):
          page.add(ft.Text("버튼에서 포커스가 해제되었습니다!"))

      button = ft.ElevatedButton("포커스 해제", on_blur=button_blurred)
      page.add(button)

  ft.app(target=main)