526互联

25、Flutter中基本路由

发布时间 2023-12-18 00:08:57作者: 鲤斌

Flutter 路由介绍

Flutter中的路由通俗的讲就是页面跳转。在Flutter中通过Navigator组件管理路由导航。
并提供了管理堆栈的方法。如：Navigator.push和Navigator.pop
Flutter中给我们提供了两种配置路由跳转的方式：1、基本路由 2、命名路由

Flutter 中的基本路由使用

想从HomePage组件跳转到SearchPage组件

1、需要在HomPage中引入SearchPage.dart

import '../search.dart';

2、在HomePage中通过下面方法跳转

class HomePage extends StatefulWidget {
  const HomePage({super.key});

  @override
  State<HomePage> createState() => _nameState();
}

// ignore: camel_case_types
class _nameState extends State<HomePage> {
  @override
  Widget build(BuildContext context) {
    return Column(
 children: [
  ElevatedButton(onPressed: (){
     Navigator.of(context).push(
      MaterialPageRoute(builder: 
      (BuildContext context){
        return SearchPage();
      }
      )
     );
  }, child: const Text("跳转页面"))
 ],
    );
  }
}

Flutter 中的普通路由跳转传值

1、传值
class HomePage extends StatefulWidget {
  const HomePage({super.key});
  @override
  State<HomePage> createState() => _nameState();
}
// ignore: camel_case_types
class _nameState extends State<HomePage> {
  @override
  Widget build(BuildContext context) {
    return Column(
 children: [
  ElevatedButton(onPressed: (){
     Navigator.of(context).push(
      MaterialPageRoute(builder: 
      (BuildContext context){
        return const SearchApp(title: "传的参数",Id: 12,);  //传参
      } )
     );
  }, child: const Text("跳转传值"))
 ],
    ); }}
2、跳转页面后收参
//接受上个页面传的参数
class SearchApp extends StatefulWidget {

  final String title;
  final int Id;
  const SearchApp({super.key,this.title="默认值", required this.Id});  //收参
  @override
  State<SearchApp> createState() => _SearchAppState();
}

class _SearchAppState extends State<SearchApp> {

 @override
 void initState() {  //initState() 方法是 State 对象创建后的第一个方法，用于初始化数据和执行一次性的设置或操作。
   super.initState();
   print(widget.Id);
 }
  @override
  Widget build(BuildContext context) {
    
    return Scaffold(
      appBar: AppBar(
        title: const Text("跳转后的页面导航栏"),
        ),

        body:  Center(
          child:  Text("收到的参数：${widget.title}"),
        ),
    );
  }}