1
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 1 year has passed since last update.

【Flet】削除ボタンの作り方

Posted at

いくつかのアイテムがリスト状になっているページで、削除ボタンを押したときに特定のものだけを削除する機能の作り方です。
もっとシンプルなやり方があったらコメントで教えてください。

Videotogif (2).gif

コード

削除ボタンを機能させるには削除されるアイテムのコンポーネントとアイテムを表示するコンポーネントの二つが必要となります。
ここでは単純に、削除ボタンを持ったテキストを縦に並べたページを作り、削除ボタンを押すとそのテキストが削除される機能を作ります。

アイテム(テキストやカードなど)のコンポーネント
class Display_Text(UserControl):
    def __init__(self, text, delete):
        super().__init__()
        self.text = text
        self.delete = delete #削除機能の受け取り

    def build(self):
        self.display_text = Text(value=self.text)

        return Column(
            controls=[
                Row(
                    controls=[
                        self.display_text,
                        IconButton(
                            icons.DELETE_OUTLINE,
                            on_click=self.delete_clicked,
                        ),
                    ],
                )
            ]
        )

    def delete_clicked(self, e):
        self.delete(self) #削除ボタンを押したときに自分を対象に削除を実行
アイテムを表示するコンポーネント(RowやColumnなど)
class Display(UserControl):
    def build(self):
        self.enter_text = TextField()
        self.texts = Column() #RowやListviewに変更可能

        return Column(
            controls=[
                Row(
                    controls=[
                        self.enter_text,
                        FloatingActionButton(icon=icons.ADD, on_click=self.add_clicked),
                    ],
                ),
                self.texts,
            ],
        )

    def add_clicked(self, e):
        text = Display_Text(self.enter_text.value, self.delete)
        self.texts.controls.append(text)
        self.enter_text.value = ""
        self.update()

    def delete(self, text):
        self.texts.controls.remove(text)
        self.update()

コード全体

import flet
from flet import (
    Text,
    Column,
    FloatingActionButton,
    IconButton,
    Page,
    Row,
    TextField,
    UserControl,
    icons
)


class Display_Text(UserControl):
    def __init__(self, text, delete):
        super().__init__()
        self.text = text
        self.delete = delete

    def build(self):
        self.display_text = Text(value=self.text)

        return Column(
            controls=[
                Row(
                    controls=[
                        self.display_text,
                        IconButton(
                            icons.DELETE_OUTLINE,
                            on_click=self.delete_clicked,
                        ),
                    ],
                )
            ]
        )

    def delete_clicked(self, e):
        self.delete(self)


class Display(UserControl):
    def build(self):
        self.enter_text = TextField()
        self.texts = Column()

        return Column(
            controls=[
                Row(
                    controls=[
                        self.enter_text,
                        FloatingActionButton(icon=icons.ADD, on_click=self.add_clicked),
                    ],
                ),
                self.texts,
            ],
        )

    def add_clicked(self, e):
        text = Display_Text(self.enter_text.value, self.delete)
        self.texts.controls.append(text)
        self.enter_text.value = ""
        self.update()

    def delete(self, text):
        self.texts.controls.remove(text)
        self.update()


def main(page: Page):

    app = Display()
    page.add(app)


flet.app(target=main)
1
0
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
1
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?