家計簿アプリを作成する⑥【自作コントロール(2)】

Flet

自作コントロール

各画面で使用する共通コントロール

My_Controlクラスに定義

import flet as ft
from datetime import datetime
from db.master_adapter import Master_Adapter
from db.models import Master
from common.const import Const
from config.config import Config


class My_Control:
    """
    自作コントロール
    """

ドロップダウン

背景色、一覧背景色を白色に設定したドロップダウン

ドロップダウンの値が変わった時、選択されたドロップダウン情報を保持する
メソッド「value_clear」でドロップダウンの値と選択情報を初期値にする

    class MyDropdown(ft.Dropdown):
        """
        背景色、リストの背景色を白に設定した自作ドロップダウン
        """

        def __init__(
            self,
            value=None,
            autofocus=None,
            text_align=None,
            elevation=None,
            options=None,
            label_content=None,
            enable_filter=None,
            enable_search=None,
            editable=False,
            max_menu_height=None,
            menu_height=None,
            menu_width=None,
            expanded_insets=None,
            selected_suffix=None,
            input_filter=None,
            capitalization=None,
            options_fill_horizontally=None,
            padding=None,
            trailing_icon=None,
            leading_icon=None,
            select_icon=None,
            selected_trailing_icon=None,
            on_change=None,
            on_focus=None,
            on_blur=None,
            enable_feedback=None,
            item_height=None,
            alignment=None,
            hint_content=None,
            icon_content=None,
            select_icon_size=None,
            icon_size=None,
            select_icon_enabled_color=None,
            icon_enabled_color=None,
            select_icon_disabled_color=None,
            icon_disabled_color=None,
            bgcolor=ft.Colors.WHITE,
            error_style=None,
            error_text=None,
            text_size=18,
            text_style=None,
            label=None,
            label_style=None,
            icon=None,
            border=None,
            color=None,
            focused_color=None,
            focused_bgcolor=None,
            border_width=None,
            border_color=None,
            border_radius=None,
            focused_border_width=None,
            focused_border_color=None,
            content_padding=None,
            dense=None,
            filled=True,
            fill_color=ft.Colors.WHITE,
            hover_color=None,
            hint_text=None,
            hint_style=None,
            helper_text=None,
            helper_style=None,
            prefix=None,
            prefix_text=None,
            prefix_style=None,
            prefix_icon=None,
            disabled_hint_content=None,
            suffix=None,
            suffix_icon=None,
            suffix_text=None,
            suffix_style=None,
            counter=None,
            counter_text=None,
            counter_style=None,
            ref=None,
            key=None,
            width=None,
            expand=None,
            expand_loose=None,
            col=None,
            opacity=None,
            rotate=None,
            scale=None,
            offset=None,
            aspect_ratio=None,
            animate_opacity=None,
            animate_size=None,
            animate_position=None,
            animate_rotation=None,
            animate_scale=None,
            animate_offset=None,
            on_animation_end=None,
            tooltip=None,
            visible=None,
            disabled=None,
            data=None,
        ):
            super().__init__(
                value,
                autofocus,
                text_align,
                elevation,
                options,
                label_content,
                enable_filter,
                enable_search,
                editable,
                max_menu_height,
                menu_height,
                menu_width,
                expanded_insets,
                selected_suffix,
                input_filter,
                capitalization,
                options_fill_horizontally,
                padding,
                trailing_icon,
                leading_icon,
                select_icon,
                selected_trailing_icon,
                on_change,
                on_focus,
                on_blur,
                enable_feedback,
                item_height,
                alignment,
                hint_content,
                icon_content,
                select_icon_size,
                icon_size,
                select_icon_enabled_color,
                icon_enabled_color,
                select_icon_disabled_color,
                icon_disabled_color,
                bgcolor,
                error_style,
                error_text,
                text_size,
                text_style,
                label,
                label_style,
                icon,
                border,
                color,
                focused_color,
                focused_bgcolor,
                border_width,
                border_color,
                border_radius,
                focused_border_width,
                focused_border_color,
                content_padding,
                dense,
                filled,
                fill_color,
                hover_color,
                hint_text,
                hint_style,
                helper_text,
                helper_style,
                prefix,
                prefix_text,
                prefix_style,
                prefix_icon,
                disabled_hint_content,
                suffix,
                suffix_icon,
                suffix_text,
                suffix_style,
                counter,
                counter_text,
                counter_style,
                ref,
                key,
                width,
                expand,
                expand_loose,
                col,
                opacity,
                rotate,
                scale,
                offset,
                aspect_ratio,
                animate_opacity,
                animate_size,
                animate_position,
                animate_rotation,
                animate_scale,
                animate_offset,
                on_animation_end,
                tooltip,
                visible,
                disabled,
                data,
            )

        def change_dropdown(self, e):
            """
            選択した項目のdataをドロップダウンのdataに代入する
            """
            for option in self.options:
                if option.key == e.data:
                    self.data = option.data
                    return

        def value_clear(self):
            """
            値を初期化する
            """
            self.value = self.options[0].key
            self.data = self.options[0].data

日付時刻選択ドロップダウン

年月日時分を選択するドロップダウン

年はコンフィグで設定した範囲の一覧を表示する
初期値は画面表示時の年月日、00時00分

年月日変更時に選択されている年月日情報を保持する
年月が変更された場合、日付ドロップダウンの一覧を変更する

メソッド「set_initial_value」各ドロップダウンの値と選択情報を初期値にする

    class Datetime_Dropdown:
        """
        自作日付時刻選択ドロップダウン
        """

        def __init__(self, arg_page):
            self.page = arg_page
            self.control = None
            # 今日の日付取得
            self.today = datetime.now()
            # 年リスト
            year_options = []
            # コンフィグで設定した開始年から終了年までのリストを作成する
            config = Config()
            for year in range(
                int(config.datetime_dropdown.start_year),
                int(config.datetime_dropdown.end_year) + 1,
            ):
                year_options.append(
                    ft.DropdownOption(
                        key=year, content=ft.Text(year, size=18), data=year
                    )
                )
            # 年ドロップダウン作成
            self.year = My_Control.MyDropdown(
                label=ft.Text(value="年", size=18, weight=ft.FontWeight.BOLD),
                options=year_options,
                width=110,
                menu_height=200,
                on_change=lambda e: self.day_create(
                    self.year.value, self.month.value, self.day.value
                ),
            )
            # 月リスト
            month_options = []
            # 月リスト作成
            for month in range(1, 13):
                month = f"{month:02}"
                month_options.append(
                    ft.DropdownOption(
                        key=month, content=ft.Text(month, size=18), data=month
                    )
                )
            # 月ドロップダウン作成
            self.month = My_Control.MyDropdown(
                label=ft.Text(value="月", size=18, weight=ft.FontWeight.BOLD),
                options=month_options,
                width=100,
                menu_height=200,
                on_change=lambda e: self.day_create(
                    self.year.value, self.month.value, self.day.value
                ),
            )
            # 日リスト
            day_options = []
            # 日ドロップダウン作成
            self.day = My_Control.MyDropdown(
                label=ft.Text(value="日", size=18, weight=ft.FontWeight.BOLD),
                options=day_options,
                width=100,
                menu_height=200,
                on_change=lambda e: self.set_data(
                    self.year.value, self.month.value, self.day.value
                ),
            )
            # 日リスト作成
            self.day_create(
                self.today.strftime("%Y"),
                self.today.strftime("%m"),
                self.today.strftime("%d"),
            )
            # 時リスト
            hour_options = []
            # 時リスト作成
            for hour in range(0, 24):
                hour = f"{hour:02}"
                hour_options.append(
                    ft.DropdownOption(
                        key=hour, content=ft.Text(hour, size=18), data=hour
                    )
                )
            # 時ドロップダウン作成
            self.hour = My_Control.MyDropdown(
                label=ft.Text(value="時", size=18, weight=ft.FontWeight.BOLD),
                options=hour_options,
                width=100,
                menu_height=200,
                on_change=lambda e: self.hour.change_dropdown(e),
            )
            # 分リスト
            minute_options = []
            # 分リスト作成
            for minute in range(0, 60):
                minute = f"{minute:02}"
                minute_options.append(
                    ft.DropdownOption(
                        key=minute, content=ft.Text(minute, size=18), data=minute
                    )
                )
            # 分ドロップダウン作成
            self.minute = My_Control.MyDropdown(
                label=ft.Text(value="分", size=18, weight=ft.FontWeight.BOLD),
                options=minute_options,
                width=100,
                menu_height=200,
                on_change=lambda e: self.minute.change_dropdown(e),
            )
            # 表示ボタン作成
            self.search = ft.FilledButton(
                content=ft.Text("表示", size=18),
                width=100,
                height=40,
            )
            # 初期値設定
            self.set_initial_value()
            self.control = ft.Row(
                controls=[
                    self.year,
                    self.month,
                    self.day,
                    self.hour,
                    self.minute,
                    self.search,
                ],
                spacing=0,
            )

        def day_create(self, arg_year, arg_month, arg_day):
            """
            日付を作成する
            """
            year = int(arg_year)
            month = int(arg_month)
            day = int(arg_day)
            days = None
            # 各月の日付設定
            if month == 2:
                if year % 4 == 0:
                    if year % 100 == 0 and year % 400 != 0:
                        days = 28
                    else:
                        days = 29
                else:
                    days = 28
            elif month == 4 or month == 6 or month == 9 or month == 11:
                days = 30
            else:
                days = 31
            # 日作成
            day_options = []
            for i in range(1, days + 1):
                i = f"{i:02}"
                day_options.append(
                    ft.DropdownOption(key=i, content=ft.Text(i, size=18), data=i)
                )
            # 日表示設定
            if day > days:
                day = days
            self.day.options = day_options
            self.set_data(year, month, day)

        def set_data(self, arg_year, arg_month, arg_day):
            """
            dataに値を代入する
            """
            self.year.data = f"{arg_year}"
            self.month.data = f"{arg_month:02}"
            self.day.data = f"{arg_day:02}"
            self.page.update()

        def set_initial_value(self):
            """
            初期値を設定する
            """
            self.year.value = self.today.strftime("%Y")
            self.year.data = self.today.strftime("%Y")
            self.month.value = self.today.strftime("%m")
            self.month.data = self.today.strftime("%m")
            self.day.value = self.today.strftime("%d")
            self.day.data = self.today.strftime("%d")
            self.hour.value = "00"
            self.hour.data = "00"
            self.minute.value = "00"
            self.minute.data = "00"

入出金区分ドロップダウン

入出金区分を選択するドロップダウン

マスターから取得した入出金区分を一覧に表示する
初期値はマスターから取得した入出金区分の1行目

入出金区分変更時に選択されている入出金区分情報を保持する

        class HAB_Kbn_Dropdown(MyDropdown):
        """
        入出金区分ドロップダウン
        """

        def __init__(
            self,
            value=None,
            autofocus=None,
            text_align=None,
            elevation=None,
            options=None,
            label_content=None,
            enable_filter=None,
            enable_search=None,
            editable=False,
            max_menu_height=None,
            menu_height=None,
            menu_width=None,
            expanded_insets=None,
            selected_suffix=None,
            input_filter=None,
            capitalization=None,
            options_fill_horizontally=None,
            padding=None,
            trailing_icon=None,
            leading_icon=None,
            select_icon=None,
            selected_trailing_icon=None,
            on_change=None,
            on_focus=None,
            on_blur=None,
            enable_feedback=None,
            item_height=None,
            alignment=None,
            hint_content=None,
            icon_content=None,
            select_icon_size=None,
            icon_size=None,
            select_icon_enabled_color=None,
            icon_enabled_color=None,
            select_icon_disabled_color=None,
            icon_disabled_color=None,
            bgcolor=ft.Colors.WHITE,
            error_style=None,
            error_text=None,
            text_size=18,
            text_style=None,
            label=ft.Text(value="入出金区分", size=18, weight=ft.FontWeight.BOLD),
            label_style=None,
            icon=None,
            border=None,
            color=None,
            focused_color=None,
            focused_bgcolor=None,
            border_width=None,
            border_color=None,
            border_radius=None,
            focused_border_width=None,
            focused_border_color=None,
            content_padding=None,
            dense=None,
            filled=True,
            fill_color=ft.Colors.WHITE,
            hover_color=None,
            hint_text=None,
            hint_style=None,
            helper_text=None,
            helper_style=None,
            prefix=None,
            prefix_text=None,
            prefix_style=None,
            prefix_icon=None,
            disabled_hint_content=None,
            suffix=None,
            suffix_icon=None,
            suffix_text=None,
            suffix_style=None,
            counter=None,
            counter_text=None,
            counter_style=None,
            ref=None,
            key=None,
            width=100,
            expand=None,
            expand_loose=None,
            col=None,
            opacity=None,
            rotate=None,
            scale=None,
            offset=None,
            aspect_ratio=None,
            animate_opacity=None,
            animate_size=None,
            animate_position=None,
            animate_rotation=None,
            animate_scale=None,
            animate_offset=None,
            on_animation_end=None,
            tooltip=None,
            visible=None,
            disabled=None,
            data=None,
        ):
            # マスターアダプターインスタンス化
            master_adapter = Master_Adapter()
            # 入出金区分取得
            HAB_kbn_list = master_adapter.fill_HAB_kbn()
            HAB_kbn_options = []
            HAB_kbn_row: Master
            # オプションに入出金区分をセットする
            for HAB_kbn_row in HAB_kbn_list.return_row:
                HAB_kbn_options.append(
                    ft.DropdownOption(
                        key=HAB_kbn_row.m_text,
                        content=ft.Text(HAB_kbn_row.m_text, size=18),
                        data=HAB_kbn_row.m_code,
                    )
                )
            options = HAB_kbn_options
            # 初期値の設定
            value = HAB_kbn_list.return_row[0].m_text
            data = HAB_kbn_list.return_row[0].m_code
            # ドロップダウン変更時のメソッドを設定
            on_change = lambda e: self.change_dropdown(e)
            super().__init__(
                value,
                autofocus,
                text_align,
                elevation,
                options,
                label_content,
                enable_filter,
                enable_search,
                editable,
                max_menu_height,
                menu_height,
                menu_width,
                expanded_insets,
                selected_suffix,
                input_filter,
                capitalization,
                options_fill_horizontally,
                padding,
                trailing_icon,
                leading_icon,
                select_icon,
                selected_trailing_icon,
                on_change,
                on_focus,
                on_blur,
                enable_feedback,
                item_height,
                alignment,
                hint_content,
                icon_content,
                select_icon_size,
                icon_size,
                select_icon_enabled_color,
                icon_enabled_color,
                select_icon_disabled_color,
                icon_disabled_color,
                bgcolor,
                error_style,
                error_text,
                text_size,
                text_style,
                label,
                label_style,
                icon,
                border,
                color,
                focused_color,
                focused_bgcolor,
                border_width,
                border_color,
                border_radius,
                focused_border_width,
                focused_border_color,
                content_padding,
                dense,
                filled,
                fill_color,
                hover_color,
                hint_text,
                hint_style,
                helper_text,
                helper_style,
                prefix,
                prefix_text,
                prefix_style,
                prefix_icon,
                disabled_hint_content,
                suffix,
                suffix_icon,
                suffix_text,
                suffix_style,
                counter,
                counter_text,
                counter_style,
                ref,
                key,
                width,
                expand,
                expand_loose,
                col,
                opacity,
                rotate,
                scale,
                offset,
                aspect_ratio,
                animate_opacity,
                animate_size,
                animate_position,
                animate_rotation,
                animate_scale,
                animate_offset,
                on_animation_end,
                tooltip,
                visible,
                disabled,
                data,
            )

詳細種類ドロップダウン

詳細種類を選択するドロップダウン

マスターから取得した詳細種類を一覧に表示する
初期値はマスターから取得した詳細種類の1行目

詳細種類変更時に選択されている詳細種類情報を保持する

    class HABkinds_Dropdown(MyDropdown):
        """
        詳細種類ドロップダウン
        """

        def __init__(
            self,
            value=None,
            autofocus=None,
            text_align=None,
            elevation=None,
            options=None,
            label_content=None,
            enable_filter=None,
            enable_search=None,
            editable=False,
            max_menu_height=None,
            menu_height=None,
            menu_width=None,
            expanded_insets=None,
            selected_suffix=None,
            input_filter=None,
            capitalization=None,
            options_fill_horizontally=None,
            padding=None,
            trailing_icon=None,
            leading_icon=None,
            select_icon=None,
            selected_trailing_icon=None,
            on_change=None,
            on_focus=None,
            on_blur=None,
            enable_feedback=None,
            item_height=None,
            alignment=None,
            hint_content=None,
            icon_content=None,
            select_icon_size=None,
            icon_size=None,
            select_icon_enabled_color=None,
            icon_enabled_color=None,
            select_icon_disabled_color=None,
            icon_disabled_color=None,
            bgcolor=ft.Colors.WHITE,
            error_style=None,
            error_text=None,
            text_size=18,
            text_style=None,
            label=ft.Text(value="詳細種類", size=18, weight=ft.FontWeight.BOLD),
            label_style=None,
            icon=None,
            border=None,
            color=None,
            focused_color=None,
            focused_bgcolor=None,
            border_width=None,
            border_color=None,
            border_radius=None,
            focused_border_width=None,
            focused_border_color=None,
            content_padding=None,
            dense=None,
            filled=True,
            fill_color=ft.Colors.WHITE,
            hover_color=None,
            hint_text=None,
            hint_style=None,
            helper_text=None,
            helper_style=None,
            prefix=None,
            prefix_text=None,
            prefix_style=None,
            prefix_icon=None,
            disabled_hint_content=None,
            suffix=None,
            suffix_icon=None,
            suffix_text=None,
            suffix_style=None,
            counter=None,
            counter_text=None,
            counter_style=None,
            ref=None,
            key=None,
            width=None,
            expand=None,
            expand_loose=None,
            col=None,
            opacity=None,
            rotate=None,
            scale=None,
            offset=None,
            aspect_ratio=None,
            animate_opacity=None,
            animate_size=None,
            animate_position=None,
            animate_rotation=None,
            animate_scale=None,
            animate_offset=None,
            on_animation_end=None,
            tooltip=None,
            visible=None,
            disabled=None,
            data=None,
        ):
            # マスターアダプターインスタンス化
            master_adapter = Master_Adapter()
            # 詳細種類を取得
            HABkinds_list = master_adapter.fill_HABkinds()
            HABkinds_options = []
            HABkinds_row: Master
            # オプションに詳細種類をセット
            for HABkinds_row in HABkinds_list.return_row:
                HABkinds_options.append(
                    ft.DropdownOption(
                        key=HABkinds_row.m_text,
                        content=ft.Text(HABkinds_row.m_text, size=18),
                        data=HABkinds_row.m_code,
                    )
                )
            options = HABkinds_options
            # 初期値を設定
            value = HABkinds_list.return_row[0].m_text
            data = HABkinds_list.return_row[0].m_code
            # ドロップダウン変更時のメソッドを設定
            on_change = lambda e: self.change_dropdown(e)
            super().__init__(
                value,
                autofocus,
                text_align,
                elevation,
                options,
                label_content,
                enable_filter,
                enable_search,
                editable,
                max_menu_height,
                menu_height,
                menu_width,
                expanded_insets,
                selected_suffix,
                input_filter,
                capitalization,
                options_fill_horizontally,
                padding,
                trailing_icon,
                leading_icon,
                select_icon,
                selected_trailing_icon,
                on_change,
                on_focus,
                on_blur,
                enable_feedback,
                item_height,
                alignment,
                hint_content,
                icon_content,
                select_icon_size,
                icon_size,
                select_icon_enabled_color,
                icon_enabled_color,
                select_icon_disabled_color,
                icon_disabled_color,
                bgcolor,
                error_style,
                error_text,
                text_size,
                text_style,
                label,
                label_style,
                icon,
                border,
                color,
                focused_color,
                focused_bgcolor,
                border_width,
                border_color,
                border_radius,
                focused_border_width,
                focused_border_color,
                content_padding,
                dense,
                filled,
                fill_color,
                hover_color,
                hint_text,
                hint_style,
                helper_text,
                helper_style,
                prefix,
                prefix_text,
                prefix_style,
                prefix_icon,
                disabled_hint_content,
                suffix,
                suffix_icon,
                suffix_text,
                suffix_style,
                counter,
                counter_text,
                counter_style,
                ref,
                key,
                width,
                expand,
                expand_loose,
                col,
                opacity,
                rotate,
                scale,
                offset,
                aspect_ratio,
                animate_opacity,
                animate_size,
                animate_position,
                animate_rotation,
                animate_scale,
                animate_offset,
                on_animation_end,
                tooltip,
                visible,
                disabled,
                data,
            )

会社選択ドロップダウン

CSV提供会社を選択するドロップダウン

マスターから取得した会社名を一覧に表示する
初期値はマスターから取得した会社名の1行目

会社名変更時に選択されている会社名情報を保持する

    class CSV_Company_Dropdown(MyDropdown):
        """
        会社選択ドロップダウン
        """

        def __init__(
            self,
            value=None,
            autofocus=None,
            text_align=None,
            elevation=None,
            options=None,
            label_content=None,
            enable_filter=None,
            enable_search=None,
            editable=False,
            max_menu_height=None,
            menu_height=None,
            menu_width=None,
            expanded_insets=None,
            selected_suffix=None,
            input_filter=None,
            capitalization=None,
            options_fill_horizontally=None,
            padding=None,
            trailing_icon=None,
            leading_icon=None,
            select_icon=None,
            selected_trailing_icon=None,
            on_change=None,
            on_focus=None,
            on_blur=None,
            enable_feedback=None,
            item_height=None,
            alignment=None,
            hint_content=None,
            icon_content=None,
            select_icon_size=None,
            icon_size=None,
            select_icon_enabled_color=None,
            icon_enabled_color=None,
            select_icon_disabled_color=None,
            icon_disabled_color=None,
            bgcolor=ft.Colors.WHITE,
            error_style=None,
            error_text=None,
            text_size=18,
            text_style=None,
            label=ft.Text(value="CSV提供会社", size=18, weight=ft.FontWeight.BOLD),
            label_style=None,
            icon=None,
            border=None,
            color=None,
            focused_color=None,
            focused_bgcolor=None,
            border_width=None,
            border_color=None,
            border_radius=None,
            focused_border_width=None,
            focused_border_color=None,
            content_padding=None,
            dense=None,
            filled=True,
            fill_color=ft.Colors.WHITE,
            hover_color=None,
            hint_text=None,
            hint_style=None,
            helper_text=None,
            helper_style=None,
            prefix=None,
            prefix_text=None,
            prefix_style=None,
            prefix_icon=None,
            disabled_hint_content=None,
            suffix=None,
            suffix_icon=None,
            suffix_text=None,
            suffix_style=None,
            counter=None,
            counter_text=None,
            counter_style=None,
            ref=None,
            key=None,
            width=None,
            expand=None,
            expand_loose=None,
            col=None,
            opacity=None,
            rotate=None,
            scale=None,
            offset=None,
            aspect_ratio=None,
            animate_opacity=None,
            animate_size=None,
            animate_position=None,
            animate_rotation=None,
            animate_scale=None,
            animate_offset=None,
            on_animation_end=None,
            tooltip=None,
            visible=None,
            disabled=None,
            data=None,
        ):
            # マスターアダプターインスタンス化
            master_adapter = Master_Adapter()
            # 会社名を取得
            CSV_company_list = master_adapter.fill_CSV_company()
            CSV_company_list_options = []
            CSV_company_list_row: Master
            # オプションに会社名をセット
            for CSV_company_list_row in CSV_company_list.return_row:
                CSV_company_list_options.append(
                    ft.DropdownOption(
                        key=CSV_company_list_row.m_text,
                        content=ft.Text(CSV_company_list_row.m_text, size=18),
                        data=CSV_company_list_row.m_code,
                    )
                )
            options = CSV_company_list_options
            # 初期値を設定
            value = CSV_company_list.return_row[0].m_text
            data = CSV_company_list.return_row[0].m_code
            # ドロップダウン変更時のメソッドを設定
            on_change = lambda e: self.change_dropdown(e)
            super().__init__(
                value,
                autofocus,
                text_align,
                elevation,
                options,
                label_content,
                enable_filter,
                enable_search,
                editable,
                max_menu_height,
                menu_height,
                menu_width,
                expanded_insets,
                selected_suffix,
                input_filter,
                capitalization,
                options_fill_horizontally,
                padding,
                trailing_icon,
                leading_icon,
                select_icon,
                selected_trailing_icon,
                on_change,
                on_focus,
                on_blur,
                enable_feedback,
                item_height,
                alignment,
                hint_content,
                icon_content,
                select_icon_size,
                icon_size,
                select_icon_enabled_color,
                icon_enabled_color,
                select_icon_disabled_color,
                icon_disabled_color,
                bgcolor,
                error_style,
                error_text,
                text_size,
                text_style,
                label,
                label_style,
                icon,
                border,
                color,
                focused_color,
                focused_bgcolor,
                border_width,
                border_color,
                border_radius,
                focused_border_width,
                focused_border_color,
                content_padding,
                dense,
                filled,
                fill_color,
                hover_color,
                hint_text,
                hint_style,
                helper_text,
                helper_style,
                prefix,
                prefix_text,
                prefix_style,
                prefix_icon,
                disabled_hint_content,
                suffix,
                suffix_icon,
                suffix_text,
                suffix_style,
                counter,
                counter_text,
                counter_style,
                ref,
                key,
                width,
                expand,
                expand_loose,
                col,
                opacity,
                rotate,
                scale,
                offset,
                aspect_ratio,
                animate_opacity,
                animate_size,
                animate_position,
                animate_rotation,
                animate_scale,
                animate_offset,
                on_animation_end,
                tooltip,
                visible,
                disabled,
                data,
            )

円グラフ

引数dataに「表示したい名称と値を設定した連想配列」と「背景色」を配列で渡し、インスタンス化することで円グラフを作成

    class MyPieChart(ft.PieChart):
        """
        円グラフ
        """

        def __init__(
            self,
            sections=None,
            center_space_color=None,
            center_space_radius=None,
            sections_space=None,
            start_degree_offset=None,
            animate=None,
            on_chart_event=None,
            ref=None,
            width=None,
            height=None,
            left=None,
            top=None,
            right=None,
            bottom=None,
            expand=None,
            expand_loose=None,
            col=None,
            opacity=None,
            rotate=None,
            scale=None,
            offset=None,
            aspect_ratio=None,
            animate_opacity=None,
            animate_size=None,
            animate_position=None,
            animate_rotation=None,
            animate_scale=None,
            animate_offset=None,
            on_animation_end=None,
            tooltip=None,
            badge=None,
            visible=None,
            disabled=None,
            data=None,
        ):
            data_list: dict = data[0]
            color_list = data[1]
            # PieChartSection のリストを作成
            sections = []
            # 全体の合計値を計算
            total_value = sum(data_list.values())
            for i, (label, value) in enumerate(data_list.items()):
                # 各セクションのパーセンテージを計算
                percentage = (value / total_value) * 100 if total_value > 0 else 0
                sections.append(
                    ft.PieChartSection(
                        value=value,
                        # 色のリストから割り当てる
                        color=color_list[i],  
                        # 扇の半径
                        radius=150,
                        # ラベルとパーセンテージをタイトルに
                        title=f"{label}\n{percentage:.1f}% {value}円",
                        title_style=ft.TextStyle(
                            size=14, color=ft.Colors.BLACK, weight=ft.FontWeight.BOLD
                        ),
                    )
                )
            sections = sections
            # 各セクション間のスペース
            sections_space = 2
            # 中心に空ける円の半径
            center_space_radius = 32
            # 親コンポーネントに合わせて拡大
            expand = True
            super().__init__(
                sections,
                center_space_color,
                center_space_radius,
                sections_space,
                start_degree_offset,
                animate,
                on_chart_event,
                ref,
                width,
                height,
                left,
                top,
                right,
                bottom,
                expand,
                expand_loose,
                col,
                opacity,
                rotate,
                scale,
                offset,
                aspect_ratio,
                animate_opacity,
                animate_size,
                animate_position,
                animate_rotation,
                animate_scale,
                animate_offset,
                on_animation_end,
                tooltip,
                badge,
                visible,
                disabled,
                data,
            )

全体コード（GitHub）

household_account_book/common/my_control.py at main · SakumaTakayuki/household_account_book
Contribute to SakumaTakayuki/household_account_book development by creating an account on GitHub.
github.com