Flutterシリーズのナビゲーターコンポーネントの使用

その他 2021-03-23 05:12:56 訪問数: null

PS：1つのことをしたいのは簡単ですが、実際に1つのことをするのは非常に困難です。

同じシリーズの記事は次のとおりです。

ナビゲーターはスタックルールを使用してウィジェットを管理し、ナビゲーターはページアクセスレコードを記録し、ナビゲーターはページ間のジャンプ操作を完了するために使用できます。

Android開発では、通常参照されるジャンプは、ページジャンプとも呼ばれるアクティビティジャンプです。Fluterでは、すべてルートジャンプを参照します。AndroidのページはFlutterのルートに対応します。ナビゲーターは、ルートオブジェクトスタックの管理を担当します。 、およびNavigator.pushやNavigator.popなどのスタックを管理するためのメソッドを提供します。

上記のように、FlutterはRouteをスタックにプッシュしてRouteをアンスタックするメソッドを提供します。Androidの一部のデバイスにはリターンキーがあります。このリターンキーはFlutterのNavigator.pushおよびNavigator.popメソッドと互換性があります。一部のデバイスに対応するものがない場合リターンキー、AppBarにあります。Scaffoldにリターンボタンを追加します。Scaffoldにリターンボタンが追加されました。トリガーされると、Navigator.pop操作が呼び出されます。この記事の内容は次のとおりです。

  1. 基本的なルートナビゲーション
  2. ルートパラメータの受け渡し
  3. その他のルートナビゲーション

基本的なルートナビゲーション

前述のように、Flutterはスタックを使用してウィジェットを管理します。スタックとポップのメソッドはNavigator.pushとNavigator.popです。これら2つのメソッドは、ページ間のジャンプとロールバック操作を完了するために使用されます。

Navigator.push

Navigator.pushは、ルートのプッシュ操作を実行するために使用され、指定されたルートを介して対応するページにジャンプできます。方法は次のとおりです。

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

MaterialPageRouteを使用して、対応するページのルートを作成します。使用法は次のとおりです。

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

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

Navigator.popは、ルートのアンスタック操作、つまりページロールバックを実行するために使用されます。オプションのパラメーター結果は、ページが戻ったときに運ばれるパラメーターとして追加できます。方法は次のとおりです。

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

次のように、IconButtonをクリックして現在のページを終了します。

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

Navigator.pushnamedは、指定されたルートのスタック操作を実行するために使用されます。次のように、オプションの引数を介してパラメーターを渡すことができます。

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

を使用する場合は、最初に対応するルート名をMaterialAppのルーティングテーブルroutesに追加します。コードリファレンスは次のとおりです。

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),
        ),
      ),
    );
  }
}

次に、次のように、Navigator.pushNamedを使用してページNavigatorPushNamedPageにジャンプできます。

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

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

上記はFlutterの最も基本的なページナビゲーションメソッドです。Navigator.pushまたはNavigator.pushNamedのどちらであっても、NavigatorStateのpushメソッドに基づいて実装されます。NavigatorStateは、特定のBuildContextを介してNavigator.of（context）によって取得されます。 NavigatorStateのpushメソッドは次のとおりです。

/// 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;
}

以下では、ページがジャンプしたときのパラメーターの転送や、ページのロールバックがパラメーターの転送であることなど、Fluterでのパラメーターの転送について説明します。

ルートパラメータの受け渡し

ページジャンププロセスで渡されるパラメータには、ページがジャンプするときのパラメータの伝達と、ページがロールバックされるときのパラメータの伝達が含まれます。

Navigator.pushはパラメータを運びます

Navigator.pushを使用して、ページにジャンプするパラメーターを伝達します。パラメーターは、対応するページ構築方法を介して受信されます。具体的な使用法は次のとおりです。

/// 跳转到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はパラメータを運びます

上記から、Navigator.pushNamed（context、routrName、{arguments}）メソッドパラメーターのオプションパラメーターは、ジャンプによって運ばれるパラメーターであることがわかります。まず、MaterialAppの下のonGenerateRouteの引数を介して渡されたパラメーターを受け取ります。 、 次のように：

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;
        }
      },
    );
  }
}

次に、Navigator.pushNamedを使用してページにジャンプします。パラメーターは、対応するページ構築メソッドによって引き続き受信されます。以下を参照してください。

/// 跳转到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),
          ),
        ),
      ),
    );
  }
}
ページが戻ったときにパラメータを実行する

上記から、Navigator.pop（context、[result]）メソッドパラメーターのオプションのパラメーターresultは、ページがロールバックされたときに運ばれるパラメーターであることがわかります。Navigator.pushは、Futureを返し、結果を処理します。 thenステートメントのページロールバック。使用リファレンスは次のとおりです。

/// 跳转到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);
  }
}

その他のルートナビゲーション

その他の一般的に使用されるルーティングナビゲーション方法は次のとおりです。

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

ルーティングに関連する他の操作方法は1つずつリストされていません。関連するAPIを確認できます。

ここに画像の説明を挿入します

おすすめ

転載: blog.csdn.net/jzman/article/details/111569526
おすすめ
Microsoft、オープンソース フォント Cascadia Code のメジャー アップデートをリリース
ランキング
iOS访问https无数据，访问http正常
【转载】QNET：腾讯WeTest的APP弱网络测试专家
Win10システムの後、キーボードの故障を復元
コンピュータ構成の原則：メモリ
コンピュータ ネットワーク - DNS ドメイン名解決プロセス
mongoの基本操作 --- ドキュメントの追加、削除、変更、クエリ
ドッキングウィンドウ・コンで接続TomcatとMySQLの
カランボラPython上級講義13ループ（1）トラバーサル
캐릭터 인터랙션 보너스 표시의 Unity 구현
設置環境はUbuntuのシステムの下での競合に依存遭遇しました
アーカイブ
もっと
2024-05-27(1)
2024-05-26(0)
2024-05-25(1)
2024-05-24(11)
2024-05-23(35)
2024-05-22(9)
2024-05-21(36)
2024-05-20(5)
2024-05-19(0)
2024-05-18(30)

コードワールド

© 2018 codetd.com