Flutter でのルーティング値の転送方法

Flutter の開発プロセスの経験を記録します。


フラッター開発環境

 今日は、Flutter の開発過程における値のルーティングと受け渡しの方法を整理しました。

Flutter の開発過程で、ルーティングを使用する手順は次のとおりです。まず、次のルーティング リストを登録します。次に、初期ルート (initialRoute) を設定します。コードは以下のように表示されます:

class MyApp extends StatelessWidget {
  const MyApp({super.key});
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      initialRoute: '/',
      routes: {
        "/":(context)=>const MyHomePage(title: 'Flutter路由传值方式'),
        "/second":(context)=>const SecondPage(content: '',),
        "/third":(context)=>const ThirdPage(content: '你好',),
        "/four":(context)=>const FourPage()
      },
      // home: const MyHomePage(title: 'Flutter路由传值方式'),
    );
  }
}

1.ルーティングジャンプ

1.値を渡す必要がないときに値を渡す

foutrの登録方法を参照

 "/four":(context)=>const FourPage()
 

2. ルーティングジャンプ転送値

1.ルートの初期化を構築するときに値を直接渡します

FourPageのルート登録方法を参考にできます

        "/ third":(context)=>const ThirdPage(content: 'Hello',),
 

ほとんどの開発シナリオでは、ジャンプする前に次のページに渡される値がわかっているため、この方法はあまり柔軟ではありません。

この時点で、エンティティ クラスを設定することで値を渡すことができます。

2. エンティティ クラスを構築して値を渡す

pushNamed クラスを見ることができます。このうち、引数はパラメータを渡すために使用されます. 値を渡すクラスを構築すると、より柔軟になります.

@optionalTypeArgs 
static Future<T?> pushNamed<T extends Object?>( 
  BuildContext context, 
  String routeName, { 
  Object? arguments, 
}) { 
  return Navigator.of(context).pushNamed<T>(routeName, 引数: 引数); 
}

最初に Todo クラスを宣言し、タイトルを次のページに渡します。

class Todo{
  文字列のタイトル; 
  Todo(this.title); 
}

ボタンのクリックイベントは次のとおりです。

Navigator.pushNamed(context, "/four",arguments: Todo("content"));rran

次に、ModalRoute.of(context)!.settings.arguments メソッドを使用して、渡されたパラメーターを解析します。コードは以下のように表示されます:

final Todo arguments = ModalRoute.of(context)!.settings.arguments as Todo; 
print('2ページ目から渡された値を受け取る: ${arguments.title}');

2. 完全なデモアドレス


おすすめ

転載: blog.csdn.net/ZCC361571217/article/details/127174639