Flutter 页面跳转 传参,TabBar学习总结5

Route

在Flutter中跳转页面分两种,静态路由和动态路由

静态路由Route

静态路由 是固定的, 是不能传递参数的, 在MaterialApp 组件中设置routes


import 'package:my_first_app/pages/search.dart' as search;
import './Formdata.dart' as formdata; 
.....
      routes: {
         // routes 注册命名路由表,可以通过这个路由的key进行跳转到不同的value页面
         "/from": (context) => formdata.From(),
         "/search": (context) => search.Searcj(),
       },

在类中设置routes 字典, 当触发事件时, 如点击按钮

onPressed: () {
            Navigator.of(context).pushNamed("from");
          }

它会自动的找 MaterialApp 中的 routes中的键对应的value 值, 然后进行跳转

动态路由跳转

动态路由跳转是可以携带参数进行跳转的, 在类中定义一个 Map 用键值对将 跳转路由名字和跳转的页面组件进行关联, 如
在这里插入图片描述

然后在 MaterialApp组件中监听 onGenerateRoute路由跳转事件,当按钮中点击事件 onPressed
发生的时候, 会调用 onGenerateRoute如图
在这里插入图片描述
可以在settings.arguments 中传递参数,参数可以是map类型的数据,这样就可以传递多个数据了

TabBar

TabBar 就是页面中底部tab切换组件,如
在这里插入图片描述
可以将属于同一页面中的不同数据进行分类
TabBar 是在 DefaultTabController组件中的,
在这里插入图片描述

lenght 设置tabbar 组件的个数, 如果在bottom中 Widget列表个数没有符合这个数的话,那么就会出错
而 在TabBar中body的属性也是特殊的组件 TabBarView组件, 在children 中编写不同TabBar页面展示的组件, 当发生点击TabBar时, 它会自动的获取children中的对应下标的组件数据进行展示

在这里插入图片描述

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
要从另一个页面TabBarTabBarView中的页面,您可以使用Flutter的导航机制。以下是一个简单的示例: 假设您有两个页面:HomePage和TabbedPage。HomePage包含一个按钮,点击该按钮将导航到TabbedPage,TabbedPage包含TabBarTabBarView,每个标签对应一个页面。 在HomePage中,您可以使用Navigator.push方法到TabbedPage: ```dart import 'package:flutter/material.dart'; import 'tabbed_page.dart'; class HomePage extends StatelessWidget { @override Widget build(BuildContext context) { return Scaffold( appBar: AppBar( title: Text('Home'), ), body: Center( child: RaisedButton( child: Text('Go to Tabbed Page'), onPressed: () { Navigator.push( context, MaterialPageRoute(builder: (context) => TabbedPage()), ); }, ), ), ); } } void main() { runApp(MaterialApp( home: HomePage(), )); } ``` 在TabbedPage中,您可以创建一个DefaultTabController来管理TabBarTabBarView,并在TabBar中定义标签。每个标签对应一个页面。 ```dart import 'package:flutter/material.dart'; import 'tab_page.dart'; class TabbedPage extends StatelessWidget { @override Widget build(BuildContext context) { return Scaffold( appBar: AppBar( title: Text('Tabbed Page'), bottom: TabBar( tabs: [ Tab(text: 'Page 1'), Tab(text: 'Page 2'), ], ), ), body: TabBarView( children: [ TabPage(title: 'Page 1'), TabPage(title: 'Page 2'), ], ), ); } } class TabPage extends StatelessWidget { final String title; TabPage({this.title}); @override Widget build(BuildContext context) { return Scaffold( body: Center( child: Text(title), ), ); } } ``` 在上面的示例中,TabbedPage使用TabBarTabBarView来展示两个页面。每个页面由TabPage小部件表示。您可以根据实际需求自定义这些页面。 当您从HomePage点击按钮到TabbedPage时,将会显示TabBarTabBarView,并且您可以在TabBar中进行不同标签页之间的切换。 希望对您有所帮助!如果有任何其他问题,请随时提问。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值