日本免费高清视频-国产福利视频导航-黄色在线播放国产-天天操天天操天天操天天操|www.shdianci.com

學(xué)無先后，達(dá)者為師

網(wǎng)站首頁 編程語言 正文

Flutter使用push?pop方法及路由進(jìn)行導(dǎo)航詳解_IOS

作者：Jimmy ? 更新時(shí)間： 2022-11-18 編程語言

正文

在 Web/Mobile 應(yīng)用程序中，導(dǎo)航是一個(gè)很重要的特性，因?yàn)樗试S你從一個(gè)頁面跳轉(zhuǎn)到另一個(gè)頁面。

在 flutter 應(yīng)用程序中，我們可以使用 push(), pop() 方法實(shí)現(xiàn)導(dǎo)航，或者編寫我們自己的路由。

準(zhǔn)備工作

我們假設(shè) FirstScreen 和 SecondScreen 是兩個(gè)不同的類，分別在各自的 FirstScreen.dart 和 SecondScreen.dart 文件內(nèi)。

FirstScreen.dart 文件如下：

import 'package:flutter/material.dart';
import 'package:navigation/SecondScreen.dart';
class FirstScreen extends StatefulWidget {
  @override
  _FirstScreenState createState() => _FirstScreenState();
}
class _FirstScreenState extends State<FirstScreen> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
      title: Text("First Screen"),
    ),
    body: Column(
      mainAxisAlignment: MainAxisAlignment.center,
      children: <Widget>[
        Text(
          "Hello to First Screen",
          style: TextStyle(
            fontSize: 20,
          ),
        ),
        SizedBox(
          height: 10,
        ),
        Center(
          child: RaisedButton(
            onPressed: () {},
            child: Text(
              "First Screen",
              style: TextStyle(
                fontSize: 20,
                fontWeight: FontWeight.bold
              ),
            ),
          ),
        ),
      ],
    ),
   );
  }
}

SecondScreen.dart 文件如下：

import 'package:flutter/material.dart';
class SecondScreen extends StatefulWidget {
  @override
  _SecondScreenState createState() => _SecondScreenState();
}
class _SecondScreenState extends State<SecondScreen> {
  @override
  Widget build(BuildContext context) {
  return Scaffold(
    appBar: AppBar(
      title: Text("Second Screen"),
    ),
    body: Column(
      mainAxisAlignment: MainAxisAlignment.center,
      children: <Widget>[
        Text(
          "Welcome on Second Screen",
          style: TextStyle(
            fontSize: 20,
          ),
        ),
        SizedBox(
          height: 10,
        ),
        Center(
          child: RaisedButton(
            onPressed: () {},
            child: Text(
              "Second Screen",
              style: TextStyle(
                fontSize: 20,
                fontWeight: FontWeight.bold
              ),
            ),
          ),
        ),
      ],
    ),
  );
 }
}

main.dart 的內(nèi)容如下：

import 'package:flutter/material.dart';
import 'package:navigation/FirstScreen.dart';
void main() {
  runApp(MaterialApp(
      home: FirstScreen()));
}

第一種導(dǎo)航方式

我們可以使用 Navigator.push() 方法和 Navigator.pop() 方法進(jìn)行頁面/屏幕導(dǎo)航。

為了觸發(fā) RaisedButton 事件后從 FirstScreen 導(dǎo)航到 SecondScreen。我們需要在 FirstScreen 的 build() 方法里面的 RaisedButton 中 onPressed(){} 添加如下的事件：

onPressed: () {
  Navigator.push(context, MaterialPageRoute(builder: (context) => SecondScreen()));
},

Navigator.push() 方法將給定的路由推送到路由棧中，這個(gè)路由是由 Navigator 類來維護(hù)。

現(xiàn)在，我們可以使用 MaterialPageRoute路由 或者我們可以創(chuàng)建自己的路由。

將一個(gè)新的路由添加到棧中，我們可以通過一個(gè) builder 函數(shù)創(chuàng)建一個(gè) MaterialPageRoute 的實(shí)例。builder 函數(shù)可以創(chuàng)建我們想在頁面中展示的掛件。

(context) => SecondScreen() 指向 SecondSreen 上下文。

為了通過 RaisedButton 點(diǎn)擊事件，從 SecondScreen 返回到 FirstScreen 頁面：我們需要在 SecondScreen 頁面中添加如下的內(nèi)容：

onPressed: () {
  Navigator.pop(context);
}

這里的 pop() 方法是將導(dǎo)航棧中最新的路由彈出。

第二種導(dǎo)航方式

通過 MaterialApp 構(gòu)造函數(shù)額外提供的屬性：initialRoute 和 routes。

import 'package:flutter/material.dart'
import 'package:navigation/FirstScreen.dart'
import 'package:navigation/SecondScreen.dart'
void main() {
  runApp(MaterialApp(
    initialRoute: '/firstScreen',
    routes: {
      '/firstScreen': (context) => FirstScreen(),
      '/secondScreen': (context) => SecondScreen(),
    },
    home: FirstScreen(),
  ));
}

initialRoute 屬性定義應(yīng)用應(yīng)該從哪個(gè)路由開始。routes 屬性定義有哪些路由是可以獲取的，且路由導(dǎo)航到哪些掛件。

這里，當(dāng)路由導(dǎo)航到 /firstScreen 時(shí)，FirstScreen 掛件將構(gòu)建。

現(xiàn)在，我們將 FirstScreen 的 onPressed(){} 的方法更改如下：

onPressed: () {
  Navigator.pushNamed(context, '/secondScreen');
}

這里使用命名路由 Navigator.pushNamed() 導(dǎo)航到第一個(gè)頁面。

在 SecondScreen 的 onPressed(){} 事件中，還是保留使用 Navigator.pop() 方法：

onPressed: () {
 Navigator.pop(context);
}

原文鏈接：https://juejin.cn/post/7148583217912610824

欄目分類
最近更新