【Flet】ドロップダウンでタブを切り替える

タイトルの通り、Fletでドロップダウンを使ってタブを切り替える方法について書きます。Fletについてはこちらの記事がわかりやすいです。

こんな感じで動作します。

公式リファレンスはこちら

この記事は自分用の備忘録に近いのでご容赦ください。

コード

ドロップダウンやタブの書式、配置については（英語ですが）公式リファレンスを見ていただきたいです。

import flet as ft


class change_tab(ft.UserControl):
       

    def build(self):

        self.tab_list = ["A","B","C"] #タブと選択肢のリスト

        #ドロップダウンの作成
        self.select_tab = ft.Dropdown( 
            label="選択したいタブ",
            on_change=self.dropdown_changed, #ドロップダウンが変更されたときの処理
            options=[
                ft.dropdown.Option(text="A"), #選択肢1
                ft.dropdown.Option(text="B"), #選択肢2
                ft.dropdown.Option(text="C"), #選択肢3
                ]
        )

        #タブの作成
        self.ABC_tab = ft.Tabs( 
            selected_index=0, #選択されているタブの指定
            on_change=self.tabs_changed,
            tabs=[
                ft.Tab(text="A"), #タブ1
                ft.Tab(text="B"), #タブ2
                ft.Tab(text="C"), #タブ3
                ]
        )

        return ft.Column(
            controls=[
                self.select_tab,
                self.ABC_tab
            ]
        )

    def dropdown_changed(self,e): 
        dropdown_value = self.select_tab.value #ドロップダウンで何を選択したかを取得

        for i in range(len(self.ABC_tab.tabs)): #タブの数だけループ
            if dropdown_value == self.tab_list[i]: #選択した内容とリストの中身が一致したとき
                self.ABC_tab.selected_index=i #選択されているタブを指定しなおす
        self.update() #表示を更新する

    def tabs_changed(self,e):
        tabs_index = self.ABC_tab.selected_index #タブで何を選択したか取得
        
        self.select_tab.value=self.tab_list[tabs_index] #ドロップダウンの値を指定しなおす
        self.update() #表示を更新する



def main(page: ft.Page):
    page.add(change_tab()) #ページに中身を追加

ft.app(target=main) #ページを表示

できたらリストを使ってドロップダウンとタブの表示を同じ変数から参照させたかったんですがそこまで技術力がないのでこの形になりました。

ドロップダウン→タブの変更とタブ→ドロップダウンの変更の両方に対応しています。
それぞれ選択している内容がドロップダウンは文字列、タブは整数なので注意してください。私は引っかかりました。