今天看一看在 Flutter 中的路由的实现,我们创建应用,有一个 home 页面。这是有状态的组件。下面的代码是我们最常见的代码了。
import 'package:flutter/material.dart';
void main() => runApp(MaterialApp(
home: ZiApp(),
));
class ZiApp extends StatefulWidget {
@override
State<StatefulWidget> createState() {
// TODO: implement createState
return _ZiAppState();
}
}
class _ZiAppState extends State<ZiApp> {
@override
Widget build(BuildContext context) {
// TODO: implement build
return Scaffold();
}
}
创建更多页面
class _ZiAppState extends State<ZiApp> {
@override
Widget build(BuildContext context) {
// TODO: implement build
return Scaffold(
appBar: AppBar(
title: Text("Home Page"),
),
body: Container(
color: Colors.blue,
),
);
}
}
class About extends StatelessWidget {
@override
Widget build(BuildContext context) {
// TODO: implement build
return Scaffold(
appBar: AppBar(
title: Text("About Page"),
),
body: Container(
color: Colors.green,
),
);
}
}
除了 home 页面外我又创建了一个无状态的 About 页面,给这两个页面不同标题和背景颜色便于区别。
设置路由
void main() => runApp(MaterialApp(
initialRoute: '/',
routes: {
'/': (context) {
return ZiApp();
},
'/about': (context) {
return About();
}
},
));
- 去掉 home
- 设置 routes 参数,如果属性 react 或 vue 的路由这样代码应该不会陌生。flutter
这样设计路由应该是给 web 开发埋下伏笔吧。分别接受两个函数,函数接收 contex 然后返回一个页面。 - initialRoute 指定应用启动默认的路由
floatingActionButton: FloatingActionButton(
onPressed: () {
Navigator.pushNamed(context, '/about');
},
),
给页面添加一个悬浮按钮,给其添加动作,然后调用 pushNamed 方法来切换路由,这里给出 /about 跳转的路由
传递参数
Widget build(BuildContext context) {
// TODO: implement build
return Scaffold(
appBar: AppBar(
title: Text("About Page"),
),
body: SizedBox.expand(child:Container(
color: Colors.orange,
),),
);
}
class About extends StatelessWidget {
final String textData;
About({Key key,@required this.textData}):super(key:key);
@override
Widget build(BuildContext context) {
// TODO: implement build
return Scaffold(
appBar: AppBar(
title: Text("About Page"),
),
body: SizedBox.expand(child:Container(
color: Colors.orange,
child: Text(textData),
),),
);
}
}
接下来我们尝试在跳转的过程中传递参数。然后将参数显示在页面,所以我们需要在页面上定义一个显示文字 Text Widget,然后为About 构造函数添加一个参数 textData,让调用页面时候传入参数。
floatingActionButton: FloatingActionButton(
onPressed: () {
// Navigator.pushNamed(context, '/about');
Navigator.of(context).push(MaterialPageRoute(builder: (context) {
return About(
textData: "zidea tuts",
);
}));
},
),
传送数据
floatingActionButton: FloatingActionButton(
onPressed: () {
// Navigator.pushNamed(context, '/about');
Navigator.of(context).push(MaterialPageRoute(builder: (context) {
return About(
textData: "zidea tuts",
);
})).then((value) {
setState(() {
textData = value;
});
});
在 Navigator 的 of 方法获取 context 然后这一次通过 push 而不是 pushName 来跳转指定页面。这一次传入的不再是页面的路由而是 MaterialPageRoute 对象,builder 参数需要我们传入一个回调返回 About 页面并传入textData ,这个方法接受一个回调来设置页面状态,更改页面数据。
网友评论