Futter基础第8篇: 实现页面跳转、跳转传值(普通路由、普通路由传值)
2023-09-14 09:04:26 时间
效果图:
Home.dart
Search.dart
Category.dart
Form.dart
底部导航基本框架在:flutter实现底部导航
好的,做好准备工作,我们就开始进入正轨,开始实现页面跳转
Home.dart
import 'package:flutter/material.dart';
import '../Search.dart';
class HomePage extends StatefulWidget {
@override
_HomePageState createState() => _HomePageState();
}
class _HomePageState extends State<HomePage> {
@override
Widget build(BuildContext context) {
return Column(
crossAxisAlignment: CrossAxisAlignment.start,
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
RaisedButton(
child: Text('跳转到搜索页面'),
onPressed: (){ //监听器
//路由跳转
Navigator.of(context).push(
MaterialPageRoute(
builder: (context)=>SearchPage()
)
);
},
color: Theme.of(context).accentColor,
textTheme: ButtonTextTheme.primary,
),
SizedBox(height: 20,),
],
);
}
}
Category.dart
import 'package:flutter/material.dart';
import '../Form.dart';
class CategoryPage extends StatefulWidget {
@override
_CategoryPageState createState() => _CategoryPageState();
}
class _CategoryPageState extends State<CategoryPage> {
@override
Widget build(BuildContext context) {
return Column(
crossAxisAlignment: CrossAxisAlignment.start, //次轴居左
mainAxisAlignment: MainAxisAlignment.center, //主轴居中
children: <Widget>[
RaisedButton(
child: Text('跳转到表单页面'),
onPressed: () { //监听器
Navigator.of(context).push(
MaterialPageRoute(
builder: (context)=>FormPage(title: '我是跳转传值',)
/**
* 相当于:builder:(context){
* return FormPage();
* }
*/
)
);
},
color: Theme.of(context).accentColor,
textTheme: ButtonTextTheme.primary,
)
],
);
}
}
在lib→pages目录下新建这两个文件:
Search.dart
import 'package:flutter/material.dart';
class SearchPage extends StatefulWidget {
@override
_SearchPageState createState() => _SearchPageState();
}
class _SearchPageState extends State<SearchPage> {
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text('搜索页面'),
),
body: Text('搜索页面内容区域'),
);
}
}
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('我是表单页面'),
),
ListTile(
title: Text('我是表单页面'),
),
ListTile(
title: Text('我是表单页面'),
),
],
),
);
}
}
相关文章
- 第九章 TCP/IP-trunk排错和单臂路由
- 链路状态路由协议OSPF——理解OSPF多区域原理
- 常见的路由协议「建议收藏」
- 华为、H3C、思科命令对比,思维导图形式从基础、交换、路由三大方向介绍,收藏!
- NAT网络地址转换_路由交换基础
- 【计算机网络】网络层 : 路由算法 ( 路由算法分类 | 静态路由算法 | 动态路由算法 | 全局性动态路由算法 | 分散性动态路由算法 | 分层次路由选择协议 )
- 【Android 组件化】路由组件 ( 页面跳转参数依赖注入 )
- Zuul的路由规则
- Spring Cloud Gateway路由规则的匹配和优先级(二)
- 微服务网关的基础职能——路由
- TraceRoute 查询(ping 经过 的路由)网站
- Linux下路由器设置实战指南(linux路由设置)
- Linux下设置网卡路由:一步一步指南(linux设置网卡路由)
- 实现 Linux 上的动态路由配置(linux动态路由配置)
- 建立Redis集群的路由规则(redis集群路由规则)