12.Flutter学习之路由即Android上的页面跳转

易帜

发布于 2022-02-09 16:00:51

1.3K00

代码可运行

文章被收录于专栏：易帜的Android 学习之旅易帜的Android 学习之旅

运行总次数：0

代码可运行

Flutter中的路由

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

Flutter中的基本路由的使用

例如我们需要在botton点击后进行页面跳转

RaisedButton(
      onPressed: (){
        Navigator.of(context).push(
          MaterialPageRoute(
            builder:(context){
              return SearchPage();//返回需要启动的页面
            }
          )
        );
      },
    ),

如果我们需要退出当前页面

 //悬浮button
      floatingActionButton: FloatingActionButton(
        child: Text('返回'),
        onPressed: (){
          Navigator.of(context).pop();	//退出当前页面
        },
      ),

使用`Navigator`进行页面传值

class HomePage extends StatefulWidget {
  @override
  State<StatefulWidget> createState() {
    return _HomePageState();
  }
}

class _HomePageState extends State<HomePage> {
  @override
  Widget build(BuildContext context) {
    return Column(
      mainAxisAlignment: MainAxisAlignment.center,
      crossAxisAlignment: CrossAxisAlignment.start,
      children: <Widget>[
        RaisedButton(
          child: Text('跳转到搜索页面'),
          onPressed: () {
            Navigator.of(context).push(MaterialPageRoute(
              builder: (context) => SeachPage(),
            ));
          },
          color: Theme.of(context).accentColor,
          textTheme: ButtonTextTheme.primary,
        ),
        SizedBox(
          height: 10,
        ),
        RaisedButton(
          child: Text('跳转至表单页面，并传值'),
          onPressed: () {
            Navigator.of(context).push(
              MaterialPageRoute(
                builder: (context)=>FromPage(title: '这是传递的title')		//因为此处向构造参数值传递，也可以通过get set去传递值
              )
            );
          },
          color: Theme.of(context).accentColor,
          textTheme: ButtonTextTheme.primary,
        )
      ],
    );
  }
}

class FromPage extends StatelessWidget{
  String title;


  FromPage({this.title='默认From'});

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(this.title),  //在此处，将传递的数据进行引用
      ),
      body: ListView(
        children: <Widget>[
          ListTile(
            title: Text('我是表单'),
          ),
          ListTile(
            title: Text('我是表单'),
          ),
          ListTile(
            title: Text('我是表单'),
          ),
          ListTile(
            title: Text('我是表单'),
          ),
          ListTile(
            title: Text('我是表单'),
          ),
          ListTile(
            title: Text('我是表单'),
          ),

        ],
      ),
    );
  }



}

Flutter中的命名路由的使用

在使用命名路由导航时，我们需要先声明路由。即我们要在MaterialApp中的routes进行路由配置

值得一提的是，routes的值是Map<String, WidgetBuilder>类型的

main()=>runApp(MyApp());
class MyApp extends StatelessWidget{
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Tabs(),
      routes: {
        '/form':(context)=>FromPage(),//表单页面
        '/Seach':(context)=>SeachPage(),//搜索页面
      },
    );
  }
}

在进行跳转时，我们只需要进行这样子操作

 RaisedButton(
          child: Text('跳转到搜索页面'),
          onPressed: () {
            Navigator.pushNamed(context, '/Seach');//这里的第二个参数就是我们的routes的Map集合中的key即可。
          },
          color: Theme.of(context).accentColor,
          textTheme: ButtonTextTheme.primary,
        ),

命名路由的传值

首先我们需要将我们的创建一个Roustes.dart用于进行路由的管理

final  routes={
  '/':(context)=>Tabs(),
  '/search':(context,{arguments})=>SeachPage(arguments:arguments),
  "/from":(context)=>FromPage(),
};

//固定写法
var onGenerateRoute=(RouteSettings settings) {
  // 统一处理
  final String name = settings.name;
  final Function pageContentBuilder = routes[name];
  if (pageContentBuilder != null) {
    if (settings.arguments != null) {
      final Route route = MaterialPageRoute(
          builder: (context) =>
              pageContentBuilder(context, arguments: settings.arguments));
      return route;
    }else{
      final Route route = MaterialPageRoute(
          builder: (context) =>
              pageContentBuilder(context));
      return route;
    }
  }
};

onGenerateRoute这个是命名路由传参的固定写法。在命名路由中传参的时候，我们的页面构造参数需要发生改变。

在MaterialApp中有一个onGenerateRoute属性，这是我们将我们定义的onGenerateRoute传递进去即可。

main()=>runApp(MyApp());
class MyApp extends StatelessWidget{

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
//      home: Tabs(),等同于 initialRoute: '/',
      initialRoute: './',
      onGenerateRoute: onGenerateRoute,
    );
  }
}

例如我们的SeachPage页面则需要添加一个’arguments’的可选参数

class SeachPage extends StatelessWidget{

  final arguments;


  SeachPage({this.arguments});
}

那我们应该如何传递参数呢？假设我们在我们的HomePage页面将参数传递给SeachPage页面时，

class HomePage extends StatefulWidget {
  @override
  State<StatefulWidget> createState() {
    return _HomePageState();
  }
}

class _HomePageState extends State<HomePage> {
  @override
  Widget build(BuildContext context) {
    return Column(
      mainAxisAlignment: MainAxisAlignment.center,
      crossAxisAlignment: CrossAxisAlignment.start,
      children: <Widget>[
        RaisedButton(
          child: Text('跳转到搜索页面'),
          onPressed: () {	//此处进行参数传递,arguments
              Navigator.pushNamed("/search",arguments: {
                "id":"213123"
              });
          },
          color: Theme.of(context).accentColor,
          textTheme: ButtonTextTheme.primary,
        ),
        SizedBox(
          height: 10,
        ),
        RaisedButton(
          child: Text('跳转至表单页面，并传值'),
          onPressed: () {
            Navigator.of(context).push(
              MaterialPageRoute(
                builder: (context)=>FromPage(title: '这是传递的title',)
              )
            );
          },
          color: Theme.of(context).accentColor,
          textTheme: ButtonTextTheme.primary,
        )
      ],
    );
  }
}

在SeachPage页面处理参数

class SeachPage extends StatelessWidget{

  final arguments;


  SeachPage({this.arguments});

  @override
  Widget build(BuildContext context) {
    // TODO: implement build
    return Scaffold(
      //悬浮button
      floatingActionButton: FloatingActionButton(
        child: Text('返回'),
        onPressed: (){
          Navigator.of(context).pop();
        },
      ),
      appBar: AppBar(
        title: Text('搜索'),
      ),
      body: Text("搜索页面区域${arguments['id']}")//进行参数的使用
    );
  }
}

本文参与腾讯云自媒体同步曝光计划，分享自作者个人站点/博客。

如有侵权请联系 cloudcommunity@tencent.com 删除

flutter

ios

android

本文分享自作者个人站点/博客前往查看

如有侵权，请联系 cloudcommunity@tencent.com 删除。

本文参与腾讯云自媒体同步曝光计划，欢迎热爱写作的你一起参与！

flutter

ios

android

登录后参与评论

0 条评论

热度