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

た入场券 2023-08-17 15:58 134阅读 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('设置'),
        );
      }
    }

转载于:https://www.cnblogs.com/yiweiyihang/p/11468852.html