16Flutter中的路由 基本路由 基本路由跳转传值(上)
/*
Flutter中的普通路由、普通路由传值、命名路由、命名路由传值
Flutter中的路由通俗的讲就是页面跳转。在Flutter中通过Navigator组件管理路由导航。
并提供了管理堆栈的方法。如:Navigator.push和Navigator.pop
Flutter 中给我们提供了两种配置路由跳转的方式;1.基本路由。2.命名路由
*/
main.dart
import 'package:flutter/material.dart'; import 'pages/Tabs.dart'; void main() { runApp(MyApp()); } class MyApp extends StatelessWidget { @override Widget build(BuildContext context) { // TODO: implement build return MaterialApp( home: Tabs(), ); } }
pages/Form.dart
import 'package:flutter/material.dart'; class FormPage extends StatelessWidget { String title; FormPage({this.title="表单"}); @override Widget build(BuildContext context) { return Scaffold( floatingActionButton: FloatingActionButton( child: Text('返回'), onPressed: (){ Navigator.of(context).pop(); }, ), appBar: AppBar( title: Text(this.title), ), body: ListView( children: <Widget>[ ListTile( title: Text('我是表单页面'), ), ListTile( title: Text('我是表单页面'), ) ], ), ); } }
pages/Search.dart
import 'package:flutter/material.dart'; class SearchPage extends StatelessWidget { const SearchPage({Key key}) : super(key: key); Widget build(BuildContext context) { return Scaffold( appBar: AppBar( title: Text('我是搜索页面'), ), body: Text('搜索页面内容区域'), ); } }
pages/Tabs.dart
import 'package:flutter/material.dart'; import 'tabs/Home.dart'; import 'tabs/Category.dart'; import 'tabs/Setting.dart'; class Tabs extends StatefulWidget { Tabs({Key key}) : super(key: key); _TabsState createState() => _TabsState(); } class _TabsState extends State<Tabs> { int _currentIndex = 0; List _pageList=[ HomePage(), CategoryPage(), SettingPage() ]; @override Widget build(BuildContext context) { return Scaffold( appBar: AppBar( title: Text('Flutter Demo'), ), bottomNavigationBar: BottomNavigationBar( currentIndex: this._currentIndex, onTap: (int index) { // print(index); setState(() { this._currentIndex = index; }); }, iconSize: 36.0, type: BottomNavigationBarType.fixed, fixedColor: Colors.red, items: [ BottomNavigationBarItem(icon: Icon(Icons.home), title: Text('首页')), BottomNavigationBarItem( icon: Icon(Icons.category), title: Text('分类')), BottomNavigationBarItem( icon: Icon(Icons.settings), title: Text('设置')), ]), body: this._pageList[this._currentIndex], ); } }
pages/tabs/Category.dart
import 'package:flutter/material.dart'; import '../Form.dart'; class CategoryPage extends StatelessWidget { const CategoryPage({Key key}) : super(key: key); @override Widget build(BuildContext context) { return Column( crossAxisAlignment: CrossAxisAlignment.center, mainAxisAlignment: MainAxisAlignment.center, children: <Widget>[ RaisedButton( child: Text('跳转到表单页面并传值'), onPressed: (){ Navigator.of(context).push( MaterialPageRoute( builder:(context)=>FormPage(title: '我是跳转传值') ) ); }, color: Theme.of(context).accentColor, textTheme: ButtonTextTheme.primary ) ], ); } }
pages/tabs/Home.dart
import 'package:flutter/material.dart'; import '../Search.dart'; class HomePage extends StatelessWidget { const HomePage({Key key}) : super(key: key); @override Widget build(BuildContext context) { return Column( mainAxisAlignment: MainAxisAlignment.center, crossAxisAlignment: CrossAxisAlignment.center, children: <Widget>[ RaisedButton( child: Text('跳转到搜索页面'), onPressed: (){ //页面跳转: Navigator.of(context).push( MaterialPageRoute( builder: (context)=>SearchPage() ) ); }, color: Theme.of(context).accentColor, textTheme: ButtonTextTheme.primary ), RaisedButton( child: Text('跳转到表单页面并传值'), onPressed: (){ }, color: Theme.of(context).accentColor, textTheme: ButtonTextTheme.primary ) ], ); } }
pages/tabs/Setting.dart
import 'package:flutter/cupertino.dart'; class SettingPage extends StatelessWidget { const SettingPage({Key key}) : super(key: key); @override Widget build(BuildContext context) { return Container( child: Text('设置'), ); } }