前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >Flutter中的基本路由使用

Flutter中的基本路由使用

作者头像
越陌度阡
发布2022-05-06 14:58:23
9940
发布2022-05-06 14:58:23
举报

Flutter 中通过 Navigator 组件管理路由导航,并提供了管理堆栈的方法。

常用的方法如下:

1. Navigator.push 跳转到指定页面;

2. Navigator.pop 返回上一级页面;

跳转代码示例:

代码语言:javascript
复制
import "package:flutter/material.dart";
// 引入要跳转到的子页面
import '../Form.dart';

// 定义一个有状态组件
class CategoryPage extends StatefulWidget {
    CategoryPage({Key key}) : super(key: key);
    _CategoryPageState createState() => _CategoryPageState();
}

class _CategoryPageState extends State<CategoryPage> {
    @override
    Widget build(BuildContext context) {
        return Column(
            // 主轴对齐式式
            mainAxisAlignment:MainAxisAlignment.center,
            // 交叉轴对齐方式
            crossAxisAlignment: CrossAxisAlignment.center,
            children:<Widget>[
                RaisedButton(
                    child: Text("跳转到表单页面并传值"),
                    // 点击事件
                    onPressed: () {
                        // 路由约定俗成的写法,返回要跳转到的组件即可;
                        Navigator.of(context).push(
                            // 在FormPage()里传入参数
                            MaterialPageRoute(builder: (context)=>FormPage(title:'我是跳转传值的页面'))
                        );
                    },
                    color: Theme.of(context).accentColor,
                    textTheme: ButtonTextTheme.primary
                )
            ]
        );
    }
}

效果图如下:

要跳转到的子页面FormPage,并接受参数。

代码语言:javascript
复制
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('这是表单页面')
                    ),
                    ListTile(
                        title:Text('这是表单页面')
                    ),
                    ListTile(
                        title:Text('这是表单页面')
                    )
                ]
            ),
        );
    }
}

效果图如下:

页面跳转时,手机顶部导航条是有默认的返回按钮的,如果想自定义返回上一级页面,可以通过 Navigator.of(context).pop() 来返回上一级页面,详见上面子页面的代码。

本文参与 腾讯云自媒体同步曝光计划,分享自作者个人站点/博客。
原始发表:2020-12-22,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 作者个人站点/博客 前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体同步曝光计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档