見出し画像

Fletを使ってみよう！- Navigation(Navigation and Routing)

donguri

画面遷移の仕組みですが、少し理解が必要です。
全体像としては以下のようになります。

import flet as ft

def main(page: ft.Page):
    page.title = "Routes Example"

    def route_change(route):
        page.views.clear()
        page.views.append(
            ft.View(
                "/",
                [
                    ft.AppBar(title=ft.Text("Flet app"), bgcolor=ft.colors.SURFACE_VARIANT),
                    ft.ElevatedButton("Visit Store", on_click=lambda _: page.go("/store")),
                ],
            )
        )
        if page.route == "/store":
            page.views.append(
                ft.View(
                    "/store",
                    [
                        ft.AppBar(title=ft.Text("Store"), bgcolor=ft.colors.SURFACE_VARIANT),
                        ft.ElevatedButton("Go Home", on_click=lambda _: page.go("/")),
                    ],
                )
            )
        page.update()

    def view_pop(view):
        page.views.pop()
        top_view = page.views[-1]
        page.go(top_view.route)

    page.on_route_change = route_change
    page.on_view_pop = view_pop
    page.go(page.route)


ft.app(target=main, view=ft.AppView.WEB_BROWSER)

ページを "/"と "/storeに作っていく感じです。

[
　　ft.AppBar(title=ft.Text("Flet app"), 　　bgcolor=ft.colors.SURFACE_VARIANT),
　　ft.ElevatedButton("Visit Store", on_click=lambda _: page.go("/store")),
],

と内容を指定します。

そして遷移ページからもどるコード

def view_pop(view):
　page.views.pop()
　top_view = page.views[-1]
　page.go(top_view.route)

あと定義した関数を動かすコード

page.on_route_change = route_change　・・・　遷移
page.on_view_pop = view_pop　・・・　戻る
page.go(page.route)　・・・　起動時

基本の遷移はページを移るたびに画面をクリアして次の画面へいく設定がデフォルトのようです。データを渡す場合は気を付けて実装する必要があります。

最後のコードで

ft.app(target=main, view=ft.AppView.WEB_BROWSER)

でWebで表示となるのでそのままウインドウを閉じても終了していないので"⌘c"で終了させる必要があります。(Macでは)


参考ページ


この記事が気に入ったらサポートをしてみませんか？