视频学习地址:https://www.bilibili.com/video/BV1S4411E7LY?p=38&vd_source=cee744cae4ead27f8193fc7904647073
学习笔记
路由,听起来是一个挺抽象的概念。
在这里,路由就是页面跳转。
在Flutter中,使用Navigator组件管理路由导航。
1.使用Navigator.push跳转到另一个页面
先创建一个detail详情页
这是我们跳转的目标页面
import 'package:flutter/material.dart';
class DetailPage extends StatefulWidget {
const DetailPage({Key? key}) : super(key: key);
_DetailPageState createState() => _DetailPageState();
}
class _DetailPageState extends State<DetailPage> {
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text("详情页面"),
),
);
}
}
点击事件的设置
ElevatedButton(
onPressed: () {
Navigator.of(context)
.push(MaterialPageRoute(builder: (BuildContext context) {
return DetailPage();
}));
},
child: Text("点击跳转到详情页面"))
跳转到目标页面了
跳转到
2.跳转页面传值
先创建跳转目标界面
import 'package:flutter/material.dart';
class NewsPage extends StatefulWidget {
final String title;
const NewsPage({Key? key, this.title = "默认标题"}) : super(key: key);
_NewsPageState createState() => _NewsPageState();
}
class _NewsPageState extends State<NewsPage> {
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text(widget.title),
),
);
}
}
注意:在state中调用widget的变量,可以直接用:widget.title
跳转按钮
ElevatedButton(
onPressed: () {
Navigator.of(context)
.push(MaterialPageRoute(builder: (BuildContext context) {
return NewsPage(
title: "新标题",
);
}));
},
child: Text("跳转传值"))
显示效果
3.Navigator.pop返回之前的页面
floatingActionButton: FloatingActionButton(
child: Icon(Icons.arrow_back),
onPressed: () {
Navigator.pop(context);
},
)
很简单,就一行代码搞定