Uso del componente Navigator de la serie Flutter

PD: Es fácil querer hacer una cosa, pero es muy difícil hacer una sola.

La misma serie de artículos son los siguientes:

Navigator usa reglas de pila para administrar widgets, Navigator registra los registros de acceso a la página y Navigator se puede usar para completar operaciones de salto entre páginas.

En el desarrollo de Android, los saltos a los que normalmente nos referimos son Saltos de actividad, también llamados saltos de página. En Fluter, todos se refieren a Saltos de ruta. Las páginas en Android corresponden a Ruta en Flutter. Navigator es responsable de la gestión de la pila de objetos de Ruta. y proporciona métodos para administrar la pila, como Navigator.push y Navigator.pop.

Como se mencionó anteriormente, Flutter proporciona métodos para insertar Route en la pila y desapilar Route. Algunos dispositivos en Android tienen una clave de retorno. Esta clave de retorno es compatible con los métodos Navigator.push y Navigator.pop de Flutter. Si algunos dispositivos no tienen una clave correspondiente tecla de retorno, puede estar en AppBar Agregar un botón de retorno en Scaffold. Se ha agregado un botón de retorno a Scaffold. Cuando se activa, se llamará a la operación Navigator.pop. El contenido de este artículo es el siguiente:

Navegación de ruta básica
Paso de parámetro de ruta
Otra ruta de navegación

Navegación de ruta básica

Como se mencionó anteriormente, Flutter usa la pila para administrar los widgets. Los métodos para apilar y hacer estallar son Navigator.push y Navigator.pop. Estos dos métodos se usan para completar las operaciones de salto y retroceso entre páginas.

Navigator.push

Navigator.push se utiliza para realizar la operación de inserción de Ruta, y puede saltar a la página correspondiente a través de la Ruta especificada. El método es el siguiente:

/// 参数：(上下文，具体路由)
static Future<T> push<T extends Object>(BuildContext context, Route<T> route) {
    return Navigator.of(context).push(route);
}

Utilice MaterialPageRoute para construir la ruta de la página correspondiente, el uso es el siguiente:

// 跳转到NavigatorPushPopPage
_navigateToPage(context, NavigatorPushPopPage());

/// Navigator.push
/// 页面跳转
_navigateToPage(BuildContext context, Widget widget) {
  Navigator.push(context, MaterialPageRoute(builder: (BuildContext context) {
    return widget;
  }));
}

Navigator.pop

Navigator.pop se utiliza para realizar la operación de desapilamiento de la ruta, es decir, deshacer la página. El resultado del parámetro opcional se puede agregar como un parámetro llevado cuando la página regresa. El método es el siguiente:

/// 参数：(上下文，返回时携带的参数(可选参数))
static bool pop<T extends Object>(BuildContext context, [ T result ]) {
    return Navigator.of(context).pop<T>(result);
}

De la siguiente manera, haga clic en IconButton para salir de la página actual:

IconButton(
    icon: Icon(Icons.arrow_back),
    onPressed: () => Navigator.pop(context)),

Navigator.pushnamed

Navigator.pushnamed se utiliza para realizar la operación de apilamiento de la ruta nombrada. Puede pasar parámetros a través de los argumentos opcionales, de la siguiente manera:

/// 参数：(上下文，路由名称，携带的参数(可选参数))
static Future<T> pushNamed<T extends Object>(
    BuildContext context,
    String routeName, {
    Object arguments,
   }) {
    return Navigator.of(context).pushNamed<T>(routeName, arguments: arguments);
}

Al usar, primero agregue el nombre de la ruta correspondiente a las rutas de la tabla de enrutamiento en MaterialApp. La referencia del código es la siguiente:

class MyApp extends StatelessWidget {
  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: HomePage(),
      routes: <String, WidgetBuilder>{
        // 对应路由/NavigatorPushNamedPage
        NavigatorPushNamedPage.routeName: (BuildContext context) =>
            NavigatorPushNamedPage(),
      },
    );
  }
}

/// page
/// Navigator.pushNamed
/// 使用已命名路由
class NavigatorPushNamedPage extends StatelessWidget {
  static final routeName = '/NavigatorPushNamedPage';

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text("Navigator.pushNamed"),
        centerTitle: true,
      ),
      body: Center(
        child: Text(
          "Navigator.pushNamed",
          style: TextStyle(fontSize: 18),
        ),
      ),
    );
  }
}

Luego, puede usar Navigator.pushNamed para saltar a la página NavigatorPushNamedPage, de la siguiente manera:

// 跳转到NavigatorPushNamedPage
_navigatePushNamedPage(context, NavigatorPushNamedPage.routeName);

/// Navigator.pushNamed
/// 页面跳转
_navigatePushNamedPage(BuildContext context, String routeName,
    [Object arguments]) {
  Navigator.pushNamed(context, routeName, arguments: arguments);
}

El anterior es el método de navegación de página más básico en Flutter. Ya sea Navigator.push o Navigator.pushNamed, se implementa en función del método push en NavigatorState. NavigatorState se obtiene mediante Navigator.of (contexto) a través de un BuildContext específico. El método push de NavigatorState es el siguiente:

/// NavigatorState.push
Future<T> push<T extends Object>(Route<T> route) {
    assert(!_debugLocked);
    assert(() { _debugLocked = true; return true; }());
    assert(route != null);
    assert(route._navigator == null);
    final Route<dynamic> oldRoute = _history.isNotEmpty ? _history.last : null;
    route._navigator = this;
    route.install(_currentOverlayEntry);
    _history.add(route);
    route.didPush();
    route.didChangeNext(null);
    if (oldRoute != null) {
      oldRoute.didChangeNext(route);
      route.didChangePrevious(oldRoute);
    }
    for (NavigatorObserver observer in widget.observers)
      observer.didPush(route, oldRoute);
    RouteNotificationMessages.maybeNotifyRouteChange(_routePushedMethod, route, oldRoute);
    assert(() { _debugLocked = false; return true; }());
    _afterNavigation(route);
    return route.popped;
}

A continuación se presenta la transferencia de parámetros en Fluter, incluida la transferencia de parámetros cuando la página salta y el retroceso de página es la transferencia de parámetros.

Paso de parámetro de ruta

El parámetro que pasa en el proceso de salto de página incluye parámetros de transporte cuando la página salta y parámetros de transporte cuando la página se revierte.

Navigator.push lleva parámetros

Utilice Navigator.push para llevar los parámetros para saltar a la página. Los parámetros se reciben a través del método de construcción de página correspondiente. El uso específico es el siguiente:

/// 跳转到NavigatorPushWithParamPage
_navigateToPage(context,
    NavigatorPushWithParamPage(
      param: "this info from last page!",
    ));

/// Navigator.push/pop
/// 页面跳转
_navigateToPage(BuildContext context, Widget widget) {
  Navigator.push(context, MaterialPageRoute(builder: (BuildContext context) {
    return widget;
  }));
}

/// page
/// Navigator.push携带参数
class NavigatorPushWithParamPage extends StatelessWidget {
  // 参数
  final String param;

  NavigatorPushWithParamPage({
    this.param,
  });

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text("Navigator.push携带参数"),
        centerTitle: true,
      ),
      body: Center(
        child: Text(
          "arguments:${this.param}",
          style: TextStyle(fontSize: 18),
        ),
      ),
    );
  }
}

Navigator.pushNamed lleva parámetros

De lo anterior se puede ver que los parámetros opcionales en los parámetros del método Navigator.pushNamed (context, routrName, {argument}) son los parámetros que debe transportar el salto. Primero, reciba los parámetros pasados a través de argumentos en el onGenerateRoute en MaterialApp , como sigue:

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: HomePage(),
      // 参数接收
      onGenerateRoute: (RouteSettings settings) {
        if (settings.name == NavigatorPushNamedWithParamPage.routeName) {
          return MaterialPageRoute<String>(builder: (BuildContext context) {
            return NavigatorPushNamedWithParamPage(settings.arguments);
          });
        }else{
          return null;
        }
      },
    );
  }
}

Luego use Navigator.pushNamed para saltar a la página, los parámetros aún se reciben mediante el método de construcción de página correspondiente, consulte lo siguiente:

/// 跳转到NavigatorPushNamedWithParamPage
_navigatePushNamedPage(
    context,
    NavigatorPushNamedWithParamPage.routeName,
    "this info from last page!");
    
/// Navigator.pushNamed携带参数
_navigatePushNamedPage(BuildContext context, String routeName,
    [Object arguments]) {
  Navigator.pushNamed(context, routeName, arguments: arguments);
}

/// page
/// Navigator.pushNamed携带参数
/// 使用已命名路由
class NavigatorPushNamedWithParamPage extends StatelessWidget {
  static final String routeName = '/NavigatorPushNamedWithParamPage';
  final String info;

  NavigatorPushNamedWithParamPage(this.info);

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text("Navigator.pushNamed携带参数"),
          centerTitle: true,
        ),
        body: Center(
          child: Text(
            "arguments:${this.info}",
            style: TextStyle(fontSize: 18),
          ),
        ),
      ),
    );
  }
}

Lleva parámetros cuando vuelve la página

Se puede ver en lo anterior que el resultado del parámetro opcional en el parámetro del método Navigator.pop (contexto, [resultado]) es el parámetro que se lleva cuando se revierte la página. Navigator.push devolverá un Future para procesar el resultado de la reversión de página en la declaración then. La referencia de uso es la siguiente:

/// 跳转到NavigatorPopWithParamPage
_navigatePopWithParamPage(context, NavigatorPopWithParamPage());

/// Navigator.pop返回时携带参数
_navigatePopWithParamPage(BuildContext context, Widget widget) {
  Navigator.push<String>(context,
      MaterialPageRoute(builder: (BuildContext context) {
    return widget;
  })).then((result) {
    // 返回时携带参数处理
    Toast.show("Navigator.pop返回时携带参数：" + result, context);
  });
}

/// page
/// Navigator.pop返回时携带参数
class NavigatorPopWithParamPage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return WillPopScope(
        child: Scaffold(
          appBar: AppBar(
            title: Text("Navigator.pop返回时携带参数"),
            centerTitle: true,
          ),
          body: Center(
            child: Text(
              "Navigator.pop返回时携带参数",
              style: TextStyle(fontSize: 18),
            ),
          ),
        ),
        onWillPop: () => _popBack(context));
  }

  /// 页面返回并设置返回参数，类似Android中的setResult方法
  _setResult(BuildContext context) {
    Navigator.pop(context, "this message from NavigatorPopWithParamPage!");
  }

  /// 统一处理返回键
  Future<bool> _popBack(BuildContext context) {
    _setResult(context);
    return Future.value(false);
  }
}

Otra ruta de navegación

Otros métodos de navegación de enrutamiento de uso común son los siguientes:

// 从Navigator中移除当前所在路由再跳转到新的路由，相当于finish再startActivity
Navigator.popAndPushNamed
// 根据指定的Route直接返回，在此之前的路由会被清除
Navigator.popUntil
// 跳转到新的Route，并将指定Route之前的的Route清空，pushNamedAndRemoveUntil与之类似
Navigator.pushAndRemoveUntil
// 页面替换，pushReplacementNamed与之类似
Navigator.pushReplacement

Otros métodos de operación relacionados con el enrutamiento no se enumeran uno por uno, puede verificar la API relacionada.

Inserte la descripción de la imagen aquí