flutter - 如何在Flutter中使用Navigator使用状态小部件将用户传递到命名路线？

Question

我的设定

登录路由-异步检查是否已登录用户

Checkin路由-由一个主要的有状态小部件和几个无状态的子级小部件组成，这些小部件取决于已登录用户

的信息

我的点子

在登录路径上识别出用户登录后，使用导航器将用户对象传递到 checkin 路径

child 小部件可以通过其构造函数

接收用户对象

我的问题

用户对象不在 checkin 路线

的有状态小部件中“到达”

文件

以下是要检查的相关代码段(我从更复杂的文件中添加了这些代码段，并希望所有输入正确无误):

主镖

import 'package:flutter/material.dart';
import 'loginView.dart';
import 'checkinView.dart';

void main() {
    WidgetsFlutterBinding.ensureInitialized();
    runApp(MyApp());
}

class MyApp extends StatelessWidget {

    @override
    Widget build(BuildContext context) {
        return MaterialApp(
            initialRoute: '/',
            routes: <String, WidgetBuilder>{
                '/': (BuildContext context) => LoginView(),
                '/checkin': (BuildContext context) => CheckinView(),
            }
        );
    }
}

LoginView.dart

import 'package:flutter/material.dart';
import 'package:firebase_auth/firebase_auth.dart';

class LoginView extends StatefulWidget {
    @override
    LoginViewState createState() => LoginViewState();
}

class LoginViewState extends State<LoginView> {
    @override
    void initState() {
        super.initState();

        checkLoginAndRedirect();
    }

    void checkLoginAndRedirect() async {
        FirebaseAuth.instance.currentUser().then((FirebaseUser currUser){
            if(currUser != null){
                print("[LoginView - user] $currUser");
                Navigator.pushNamed(context, '/checkin', arguments: {currUser});
            }
        });
    }
}

CheckinView.dart

import 'package:flutter/material.dart';
import 'package:firebase_auth/firebase_auth.dart';
import 'checkinList.dart';

class CheckinView extends StatefulWidget {
    final FirebaseUser user;

    CheckinView({this.user});

    @override
    CheckinViewState createState() {
        print("[CheckinView - user] $user");
        return CheckinViewState();
    }
}

class CheckinViewState extends State<CheckinView> {
    FirebaseUser _currentUser;

    @override
    void initState() {
        super.initState();

        setState((){
            _currentUser = widget.user;
        });
    }

    @override
    Widget build(BuildContext context) {

        print("[CheckinViewState - widget.user] " + widget.user.toString());

        return Scaffold(
            body: new Column(
                children: <Widget>[
                    CheckinList(user: _currentUser)
                ]
            )
        );
    }
}

CheckinList.dart

import 'package:flutter/material.dart';
import 'package:firebase_auth/firebase_auth.dart';

class CheckinList extends StatelessWidget{
    FirebaseUser user = null;

    CheckinList({this.user = null});

    @override
    Widget build(BuildContext context) {
        return Container(
            padding: EdgeInsets.all(30.0),
            child: Text(user['name'])
        );
    }
}

Answer 1

解

需要在WidgetState的build方法中提取参数(因为只有那里有BuildContext)

Navigator正在自动处理正确的参数，即使使用有状态的小部件-感谢FLUTTER TEAM !!

我改编的文件

主镖

import 'package:flutter/material.dart';
import 'loginView.dart';
import 'checkinView.dart';

void main() {
    WidgetsFlutterBinding.ensureInitialized();
    runApp(MyApp());
}

class MyApp extends StatelessWidget {

    @override
    Widget build(BuildContext context) {
        return MaterialApp(
            initialRoute: '/',
            routes: <String, WidgetBuilder>{
                '/': (BuildContext context) => LoginView(),
                '/checkin': (BuildContext context) => CheckinView(),
            }
        );
    }
}

LoginView.dart

import 'package:flutter/material.dart';
import 'package:firebase_auth/firebase_auth.dart';

class LoginView extends StatefulWidget {
    @override
    LoginViewState createState() => LoginViewState();
}

class LoginViewState extends State<LoginView> {
    @override
    void initState() {
        super.initState();

        checkLoginAndRedirect();
    }

    void checkLoginAndRedirect() async {
        FirebaseAuth.instance.currentUser().then((FirebaseUser currUser){
            if(currUser != null){
                print("[LoginView - user] $currUser");
                //// pass a map as 'arguments' to be ready to pass along more variables in the future
                Navigator.pushNamed(context, '/checkin', arguments: {'user': currUser});
            }
        });
    }
}

CheckinView.dart

import 'package:flutter/material.dart';
import 'package:firebase_auth/firebase_auth.dart';
import 'checkinList.dart';

class CheckinView extends StatefulWidget {
    //// leave the stateful class as usual

    @override
    CheckinViewState createState() => CheckinViewState();
}

class CheckinViewState extends State<CheckinView> {
    //// don't bother in the initState method as the BuildContext is missing here

    @override
    Widget build(BuildContext context) {

        //// access the passed arguments
        Map<String, dynamic> args = ModalRoute.of(context).settings.arguments;

        print("[CheckinViewState - widget.user] " + widget.user.toString());

        return Scaffold(
            body: new Column(
                children: <Widget>[
                    //// access the passed variables through 'args'
                    CheckinList(user: args.user)
                ]
            )
        );
    }
}

CheckinList.dart

import 'package:flutter/material.dart';
import 'package:firebase_auth/firebase_auth.dart';

class CheckinList extends StatelessWidget{
    FirebaseUser user = null;

    //// assign the user in your constructor
    CheckinList(FirebaseUser user){
        this.user = user;
    };

    @override
    Widget build(BuildContext context) {
        return Container(
            padding: EdgeInsets.all(30.0),
            child: Text(user['name'])
        );
    }
}

在食谱中阅读更多有关此的内容:

https://flutter.dev/docs/cookbook/navigation/passing-data#create-a-detail-screen-to-extract-the-arguments

https://flutter.dev/docs/cookbook/navigation/navigate-with-arguments