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

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

![Videotogif (2).gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2960906/a4e56352-f4ea-4a78-9a47-2a4147d4758a.gif)


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

<details><summary>アイテム(テキストやカードなど)のコンポーネント</summary>

```py
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) #削除ボタンを押したときに自分を対象に削除を実行
```
</details>

<details><summary>アイテムを表示するコンポーネント(RowやColumnなど)</summary>

```py
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()
```
</details>

## コード全体

```py
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)
```