Fletで複数のViewを遷移する例

fletMultiViewSample.py

# Fletで複数のViewを遷移する例
# 参考サイトhttps://zenn.dev/yuki6flower/articles/ca145854ed55b3
import flet as ft

class Top(ft.View):
    def __init__(self):  #コンストラクタ
        data = "Top data"
        controls = [
            ft.AppBar(title=ft.Text("Top view"), bgcolor=ft.colors.SURFACE_VARIANT),
            ft.TextField(value=data, on_change=self.changed),
            ft.ElevatedButton("Go to View1", on_click=self.clicked)
        ]
        #呼び出し用のrouteを指定し、controlsを設定
        super().__init__("/", controls=controls) 
        self.data = data  #クラスのフィールド変数dataとして保存

    #ボタンが押されたときに呼ばれる関数    
    def clicked(self, e):
        e.page.go("/view1") #ページを遷移する
    #テキストフィールドの値が変更されたときに呼ばれる関数    
    def changed(self, e):
        self.data = e.control.value #テキストフィールドの値をdataに保存
        self.update()  #Viewを更新する（ここで必要か不明）

class View1(ft.View):
    def __init__(self, _data):
        data = 'View1 data'
        controls = [
            ft.AppBar(title=ft.Text("View1"), bgcolor=ft.colors.SURFACE_VARIANT),
            ft.Text(f'Top\'s data: {_data}'),
            ft.TextField(value=data, on_change=self.changed),
            ft.ElevatedButton("Go to View2", on_click=self.clicked)
        ]
        super().__init__("/view1", controls=controls)
        self.data = data
        
    def clicked(self, e):
        e.page.go("/view2")
    
    def changed(self, e):
        self.data = e.control.value
        self.update()


class View2(ft.View):
    def __init__(self, _data):
        controls = [
            ft.AppBar(title=ft.Text("View2"), bgcolor=ft.colors.SURFACE_VARIANT),
            ft.Text(f'View1\'s data: {_data}'),
            ft.ElevatedButton("Go to Top", on_click=self.clicked)
        ]
        super().__init__("/view2", controls)
        
    def clicked(self, e):
        e.page.go("/")


def main(page: ft.Page):
    page.title = "test app"
    pop_flag = False  #戻るボタンが押されたかどうかのフラグ

    #ページが変わったときに呼ばれる関数
    #（戻るボタンが押された時も呼ばれるらしい）
    def route_change(e):
        nonlocal pop_flag   #関数外のpop_flagを利用する際にはnonlocal宣言が必要

        #戻るボタンが押されたときは何もしない（view_popが呼ばれるため）
        if pop_flag: 
            pop_flag = False
        else:
            if page.route == "/":
                page.views.clear()
                page.views.append(
                    Top()
                )
            elif page.route == "/view1":
                page.views.append(
                    View1(page.views[-1].data)
                )
            elif page.route == "/view2":
                page.views.append(
                    View2(page.views[-1].data)
                )
        
    #AppBarのページ戻るが押されたときに呼ばれる関数
    def view_pop(e):
        nonlocal pop_flag
        pop_flag = True
        page.views.pop()  #最後尾のViewを削除
        top_view = page.views[-1] #最後尾のViewを取得
        page.go(top_view.route) #最後尾のViewのrouteに遷移

    #ページが変わったときに呼ぶ関数を設定
    page.on_route_change = route_change
    #ページを戻るときに呼ぶ関数を設定
    page.on_view_pop = view_pop

    page.views.clear()  #pageを初期化
    page.go("/")   #初期ページへ遷移


if __name__ == '__main__':

    #ブラウザアプリの場合
    #ft.app(target=main, view=ft.WEB_BROWSER)    

    #デスクトップアプリの場合
    ft.app(target=main)