Flutter 從當前頁面進入一個新的頁面並返回
在原來的Android開發中,頁面之間的導航是通過Active或者Fragmentt來實現的。而在Flutter中,秉承著一切都是widget的理念,頁面當然也可以看成是一個widget,而頁面切換是通過路由Route來實現的,通過Navigator路由管理器進行推入路由和退出路由實現頁面切換。
專案說明:首頁中間有個按鈕,點選後進入一個新的頁面,新頁面同樣有個按鈕點選後返回。
下面擼碼:
import 'package:flutter/material.dart';
import 'package:flutter/cupertino.dart';
void main() => runApp(new MyApp());
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
// TODO: implement build
return new MaterialApp(
title: 'Navigator Demon',
home: new MyHomePage(
title: '第一個頁面',
),
);
}
}
/*
這是首頁面,包含一個IOS風格的按鈕,點選該按鈕可以導航到第二個頁面
*/
class MyHomePage extends StatelessWidget {
const MyHomePage({Key key, this.title}) : super(key: key);
final title;
@override
Widget build(BuildContext context) {
return new Scaffold(
appBar: new AppBar(
title: new Text(title),
),
body: new Center(
//這是一個IOS風格材質的按鈕,需要匯入cupertino檔案才能引用
child: new CupertinoButton(
color: Colors.blue,
child: new Text('進入第二個頁面'),
onPressed: () {
Navigator.push(
context,
new MaterialPageRoute(
builder: (context) => new SecondePage(
title: '第二個頁面',
)
)
);
}
)
),
);
}
}
/*
這是第二個頁面,包含一個返回的按鈕
*/
class SecondePage extends StatelessWidget {
const SecondePage({Key key, this.title}) : super(key: key);
final title;
@override
Widget build(BuildContext context) {
// TODO: implement build
return new Scaffold(
appBar: new AppBar(
title: new Text(title),
),
body: new Center(
//這是一個IOS風格材質的按鈕,需要匯入cupertino檔案才能引用
child: new CupertinoButton(
color: Colors.blue,
child: new Text('返回第一個頁面'),
onPressed: () {
Navigator.pop(context);
}
),
),
);
}
}
效果如下:
點選按鈕進入下一個頁面,點選返回回到第一個頁面。
相關文章
- asp.net中一個頁面跳轉,後一個頁面操作內容後返回先前頁面,並使得先前頁面資料重新整理ASP.NET
- vue從其他頁面返回保持上一頁的狀態Vue
- 如何讓兩個頁面跳轉但是不重新整理頁面。返回時前一個頁面開始選擇的資料還在
- js進入詳情頁再返回到上一個列表頁面時怎麼能讓原來頁面資料不變JS
- 如何讓頁面跳出框架在一個新頁面開啟框架
- vue重新整理當前頁面或者當前元件Vue元件
- 用Flutter 寫一個簡單頁面Flutter
- javascript獲取當前頁面的來路頁面地址JavaScript
- vue返回上一頁面如果沒有上一頁面返回首頁Vue
- 使用Flutter設計一個好看的"我"頁面Flutter
- 如何將一個.html匯入進另一個.html頁面?HTML
- js 進入頁面載入的方法JS
- 如何使用jquery重新整理當前頁面jQuery
- javascript重新整理當前頁面程式碼JavaScript
- ThinkPHP 在頁面獲取當前時間PHP
- PHP獲取當前頁面完整URL地址PHP
- 一個頁面從輸入 URL 到頁面載入顯示完成,這個過程中都發生了什麼
- 一個頁面從輸入 URL 到頁面載入顯示完成,這個過程中都發生了什麼?
- NA嵌入Flutter頁面Flutter
- Flutter頁面跳轉Flutter
- Flutter頁面保活及保持頁面跳轉位置Flutter
- Flutter 入門與實戰(九):開發一個常用的登入頁面Flutter
- 用FishRedux完成一個登入頁面Redux
- 使用Vue寫一個登入頁面Vue
- js關閉當前頁面視窗的問題JS
- 社群 - 所有節點,進入節點頁面返回中間頁顯示蒙層
- PHP彈出提示框並跳轉到新頁面即重定向到新頁面PHP
- Vue重新整理當前頁面幾種方式Vue
- Flutter入門與實戰(三):構建一個常用的頁面框架Flutter框架
- 如何將一個HTML頁面巢狀在另一個頁面中HTML巢狀
- jquery實現頁面離開時檢測當前頁面是否被修改,修改則提示jQuery
- 帝國CMS利用PHP判斷當前頁面是否為首頁PHP
- 前後端分離,html頁面中怎麼獲取當前登入使用者資訊,並寫入html頁面的指定位置?後端HTML
- flutter 使用Bloc和refresh 進行搭建頁面FlutterBloC
- Flutter:如何跳轉頁面?Flutter
- 漸進式配置webpack4單頁面和多頁面(一)Web
- 面試之 一個頁面從輸入url到頁面載入顯示完成,中間都經歷了什麼面試
- SpringBoot在controller返回一個HTML頁面Spring BootControllerHTML