flutter:获取对象&路由管理 (四)-阿里云开发者社区

flutter:获取对象&路由管理 (四)

2024-10-17 8

版权

本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。

简介： 本文介绍了Flutter中如何通过Context获取状态对象、使用GlobalKey获取状态对象、基本的路由管理、路由传值、命名路由、返回根路由以及点击图标跳转的方法。示例代码展示了如何在应用中实现这些功能，包括页面跳转、传递参数和返回上一页等操作。

前言

在现代移动应用开发中，Flutter 作为一个强大的 UI 工具包，提供了简洁高效的方式来构建美观的界面和流畅的用户体验。在 Flutter 中，状态管理和路由管理是构建应用时不可或缺的部分。掌握如何通过 BuildContext 和 GlobalKey 获取状态对象，以及如何有效地管理页面跳转、参数传递和命名路由，能够帮助开发者创建更加灵活和易于维护的应用程序。

获取对象

通过Context获取状态对象

import 'package:flutter/material.dart';
class GetStateObjectRoute extends StatefulWidget{
  const GetStateObjectRoute({super.key});
  @override
  State<StatefulWidget> createState() => _GetStateObjectRouteState();
}
class _GetStateObjectRouteState extends State<GetStateObjectRoute>{
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: "myApp",
      home: Scaffold(
        appBar: AppBar(
          title: const Text('子树中获取的context 对象'),
        ),
        body:Center (
        child:Column(
          children: [
            Builder(builder: (context){
              return   ElevatedButton(onPressed: (){
                ScaffoldState state=  context.findAncestorStateOfType<ScaffoldState>()!;
                state.openDrawer();
              }, child: const Text ('open the menu1'));
            }),
            Builder(builder: (context){
              return   ElevatedButton(onPressed: (){
                //通过 of 静态方法 来获取 ScaffoldState
                ScaffoldState state=  Scaffold.of(context);
                state.openDrawer();
              }, child: const Text ('open the menu2'));
            }),
            Builder(builder: (context){
              return   ElevatedButton(onPressed: (){
                //通过 of 静态方法 来获取 ScaffoldState
                ScaffoldMessenger.of(context).showSnackBar(
                  const SnackBar(content: Text('i am the SnackBar'))
                );
              }, child: const Text ('show the snackBar'));
            })
          ],
        )
        ),
        drawer: const Drawer(),
      ),
    );
  }
}
main(){
  runApp(const GetStateObjectRoute());
}

通过goableKey状态获取

先定义

// 定义一个globalKey   由于globalKey 需要保持全局唯一性，用静态存储
static final GlobalKey<ScaffoldState> _globalKey= GlobalKey();

设置

home: Scaffold(
        key:_globalKey, //设置key

调用

body:Center (
          child: Column(
            children: [
              Builder(builder: (context){
                return ElevatedButton(onPressed: (){
                //  通过GlobalKey 获取 State 对象
                  (_globalKey.currentState as ScaffoldState).openDrawer();
                }, child: const Text('open Draw1'),);
              })
            ],
          ),

路由管理

简单使用

ElevatedButton(child:const Text('login',),onPressed: (){
                // Navigator.of(context).pushNamed( "successful");
              Navigator.push(context, MaterialPageRoute(builder: (context){
                return Successful();
              }));
              },),

先定义好主页面

class HomePage extends StatelessWidget{
  const HomePage({super.key});
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('home page'),
      ),
      body: Center(
        child: TextButton(
          onPressed: () {  
          //   导航 到 新路由
            Navigator.push(context, MaterialPageRoute(builder: (context){
              return const NewRoute();
            }));
          },
          child: const Text('open new route'),
        ),
      ),
    );
  }
}

再定义一个路由页面

class NewRoute extends StatefulWidget{
  const NewRoute({super.key});
  @override
  State<StatefulWidget> createState() =>_NewRoute();
}
class _NewRoute extends State<NewRoute> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title:const Text('this is new Route') ,
      ),
      body: const Center(
        child: Text("this is new route"),
      ),
    );
  }
}

启动

跳转回来

body:  Center(
      child:Column(
        children: [
           Text(" i am news page"),   // 获取 newspage  定义 的 title
        FloatingActionButton(onPressed: (){
          Navigator.pop(context);  // 返回 到 上一页
        },child: Icon(Icons.arrow_back_ios),)
            ],
      )
    ),

路由传值

使用Navigator

ElevatedButton(onPressed: (){
                Navigator.pop(context,'i am the back element');
              }, child: const Text('back up')),

使用 result 得到

var result= await  Navigator.push(context, MaterialPageRoute(builder: (context){
             // text 也可以接受参数
                                  return const TipRoute(text: 'hello');
            }));
          print('router back the result $result');

import 'package:flutter/material.dart';
class RouterTest extends StatelessWidget{
  const RouterTest({super.key});
  @override
  Widget build(BuildContext context) {
    return Center(
        child: ElevatedButton(
          onPressed: () async{
            //   导航 到 新路由
          var result= await  Navigator.push(context, MaterialPageRoute(builder: (context){
              return const TipRoute(text: 'hello');
            }));
          print('router back the result $result');
          },
          child: const Text('open the tip page'),
        ),
    );
  }
}
class TipRoute extends StatelessWidget{
  const TipRoute({Key? key,required this.text});
  final String text;
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title:const Text('tip') ,
      ),
      body:  Padding(
      padding: const EdgeInsets.all(18),
        child: Center(
          child: Column(
            children: [
              Text(text),
              ElevatedButton(onPressed: (){
                Navigator.pop(context,'i am the back element');
              }, child: const Text('back up')),
            ],
          ),
        ),
      ),
    );
  }
}
void main(List<String> args){
  runApp(const MaterialApp(
      home:RouterTest()));
}

SizedBox(
            child: ElevatedButton(
                onPressed: () {
                  Navigator.of(context)
                      .push(MaterialPageRoute(builder: (BuildContext context) {
                    return NewsPage(
                      title: "i am news title",
                    );
                  }));
                },
                child: Text("go to news ")),
          ),

在 newspage 页面配置一个标题

从跳转页面得到接收

import 'package:flutter/material.dart';
class NewsPage extends StatefulWidget {
  final String title;
  const NewsPage({super.key,this.title="news"});
  ///  传参  得到
  @override
  State<NewsPage> createState() => _NewsPageState();
}
class _NewsPageState extends State<NewsPage> {
  @override
  Widget build(BuildContext context) {
  return Scaffold(
    appBar: AppBar(
      title: Text(widget.title),
    ),
    body: Center(
      child: Text(" i am news page"),   // 获取 newspage  定义 的 title
    ),
  );
  }
}

命名路由

class NewRoute extends StatelessWidget{
  const NewRoute({super.key});
  @override
  Widget build(BuildContext context) {
   return const Center(
      child: Text('New route,and the param is  ') ,
    );
  }
}

class HomePage extends StatelessWidget{
  const HomePage({super.key});
  @override
  Widget build(BuildContext context) {
    return Center(
      child: TextButton(
        onPressed: (){
          // 命名路由
          Navigator.of(context).pushNamed('new_page',arguments: ('hello,world'));
        }, child: const Text('go to the new route'),
      ),
    );
  }
}

void main(List<String>args){
  runApp(MaterialApp(
    title: 'myapp',
    initialRoute: '/',
    // 注册表 路由
    routes: {
      'new_page':(context)=>const NewRoute(),
      '/':(context)=>const HomePage(),
    },
  ));
}

Navigator.of(context).pushNamed( "successful");

SizedBox(
            child: ElevatedButton(
                onPressed: () {
                  Navigator.pushNamed(context, "/news");
                },
                child: Text("命名路由跳转到news")),
          ),

return  MaterialApp(
      debugShowCheckedModeBanner: false,
      // home: Tabs(),
      initialRoute: '/',
    routes: {
        "/":(context)=>const Tabs(),
      "/news":(context)=>const NewsPage(),
      "/search":(context)=>const SearchPage(),
      "/form":(context)=>const FormPage(),
    },
    );

返回根路由

如果有三次路由跳转

使用 pushReplacementNamed 方法返回时可以跳过第二个路由

直接返回第一个路由

pushReplacementNamed("/")：这是一个页面导航方法，它将根据提供的路由名称替换当前的页面。在这种情况下，路由名称为"/"，表示根页面。通过将当前页面替换为根页面，您可以实现应用程序的重置或返回到初始状态的效果。

总结起来，这段代码的作用是在应用程序中导航到根页面，并替换当前页面。一旦执行了该导航操作，用户将看到根页面，并且无法通过后退按钮返回到之前的页面。

ElevatedButton(onPressed: (){
            //
            Navigator.of(context).pushReplacementNamed("/");
          }, child: Text("go back"))

点击图标跳转

创建路由名字

GestureDetector(
            onTap: (){
              setState(() {
                Navigator.of(context).pushNamed("/personPage");
              });
            },
            child: Column(
              children: [
                Icon(Icons.home),
                Text("主页"),
              ],
            ),
          ),