16Flutter中的路由基本路由基本路由跳转传值(上)-蒲公英云

16Flutter中的路由基本路由基本路由跳转传值(上)

た入场券 2023-08-17 15:58 210阅读 0赞

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('设置'),
    );
  }
}