2024/07/12 追記
いつの間にか公式でPageTransitionsThemeクラスが実装されていました。
こちらを使用することを推奨します。
Fletでページ遷移をするとき、公式リファレンスを参考にするとページが入れ替わるアニメーションが入ります。
そのアニメーションを再生させずにページを遷移する方法について書きます。
ただし、この記事で紹介する方法は邪道というか力技な感じになります。
動作イメージ↓
Fletのページ遷移の方法はこちらの記事がわかりやすいのでぜひ参考にしてください。
考え方
標準的なページ遷移では、複数のviewと呼ばれる画面を作り そのviewを重ねて表示することで画面遷移をしています。（より具体的には上で紹介したリンク先の記事を読んでください。）
viewを切り替えるときに遷移アニメーションが入るのですが、このアニメーションをカスタムする機能はないみたいです。（2023/06/20時点）→公式リファレンス
なので、viewの切り替えをせず、ページのコントロールを入れ替えることでページ遷移を再現します。
処理の流れ
1.ページaからページbに遷移する
2.ページaのコントロールをクリアする
3.ページbのコントロールをページに追加する
ページaのコントロールは削除されるので、表示内容を持ち越すことはできません。
例えば、
1.ページaでテキストボックスに入力
2.ページbに遷移
3.再度ページaに遷移
この時、ページaのテキストボックスは空になっています。
もし、ページを遷移しても表示内容を持ち越したい場合はpage.views.appendとft.AppBarを使用してください。
ft.AppBarを持つページがviewのリストに追加されたとき、自動的にft.AppBarにBackボタンが追加されます。このBackボタンから戻った時のみ前のページが変更状態が保存された状態で表示されます。
Backボタンで前のページに戻るにはpage.on_views_popの設定が必要です。具体的なコードは冒頭に示した記事を読んでください。
コード
アニメーション無しのページ遷移、ページの変更内容は保存されない
import flet as ft
def main(page: ft.Page):
def go_view1(e):
page.go("/view1") #view1へ遷移
def go_view2(e):
page.go("/view2") #view2へ遷移
def route_change(handler): #routeが変更されたときの処理群
troute = ft.TemplateRoute(handler.route)
page.controls.clear() #page内容をクリア
if troute.match("/view1"): #routeが"/view1"の時の処理
page.add(ft.Row(
[ft.Text("view1"),ft.TextButton("go to view2", on_click=go_view2)]
))
elif troute.match("/view2"): #routeが"/view1"の時の処理
page.add(ft.Row(
[ft.Text("view2"),ft.TextButton("go to view1", on_click=go_view1)]
))
page.on_route_change = route_change #ページのrouteが変更されたときの処理を指定
page.go("/view1") #最初に表示したい画面へ遷移
ft.app(target=main)
動作は記事の冒頭で示したgifのようになります。
page.add(ft.Row([ft.Text("view1"),ft.TextButton("go to view2", on_click=go_view2)]))の部分にいろんなコントロールを追加したりコンポーネントを指定することでいろんなページが作れます。
コンポーネントについてはこちらの記事がわかりやすいです。