flutter页面跳转与传参

在安卓原生开发中,页面跳转可以用Intent类来具体实现:
Intent intent =new Intent(MainActivity.this,second.class);
startActivity(intent);
而在安卓开发中,页面传值有多种方法,常见的可以用intent、Bundle、自定义类、静态变量等等来传值,甚至可以用SharedPreferences来保存键值对等数据。
在Flutter中,页面跳转和传值也具有相应的方法,只不过方式更加符合目前的技术潮流标准。 具体的实现的是:final
Map<String, WidgetBuilder> routes;
根据Flutter的文档,routes的灵感来源于reactjs,routes可以翻译为路由,可以看到这种routes的思路在目前的设计中彼此借鉴,routes的思路不仅在前端流行,比如在vue、reactjs、Angular中用到,而且在后端应用中也非常成熟。

一:在flutter中实现页面的跳转的代码:
import 'package:flutter/material.dart';

void main() {
  runApp(new MaterialApp(
    title: '页面跳转',
    home: new FirstScreen(),
  ));
}

class FirstScreen extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return new Scaffold(
      appBar: new AppBar(
        title: new Text('第一个页面'),
         backgroundColor: Colors.red,
      ),
      body: new Center(
        child: new RaisedButton(
          child: new Text('跳转'),
          onPressed: () {
            Navigator.push(
              context,
              new MaterialPageRoute(builder: (context) => new SecondScreen()),
            );
          },
        ),
      ),
    );
  }
}

class SecondScreen extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return new Scaffold(
      appBar: new AppBar(
        title: new Text('第二个页面'),
        backgroundColor: Colors.brown,
      ),
      body: new Center(
        child: new RaisedButton(
          onPressed: () {
            Navigator.pop(context);
          },
          child: new Text('返回'),
        ),
      ),
    );
  }
}

上面的代码中,可以看到
Navigator.push(context,new MaterialPageRoute(builder: (context) => newSecondScreen()),);

MaterialPageRoute里面已经实现了具体的方法,此处的Material中文翻译为一种材质设计风格,Material Design风格为谷歌设计,它是一种界面设计标准,为平板、手机、web等提供一致、广泛的外观,目前在国外是一种非常受欢迎的UI设计标准。
Navigator.push: Navigator具体翻译为导航、跳转。为了显得简单易懂,这里不用指针解释push, 我这里用另外一种简单的方法来解释,在javascript中用push() 方法可向数组的末尾添加一个或多个元素,这就简单易懂了,就是追加一个页面来显示(SecondScreen页面)。
context:代表上下文,也就是类似windows中的句柄,指的是当前的这个页面窗口。
Navigator.pop(context):pop在javascript中用于删除数组的最末一个元素,这就明白了,就是删除当前页面返回到Navigator中的前一个页面。

二:flutter实现传值的方法。
class SecondScreen extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return new Scaffold(
      appBar: new AppBar(
        title: new Text('第二个页面'),
        backgroundColor: Colors.brown,
      ),
      body: new Center(
        child: new RaisedButton(
          onPressed: () {
            Navigator.pop(context);
          },
          child: new Text('返回'),
        ),
      ),
    );
  }
}





import 'package:flutter/foundation.dart';
import 'package:flutter/material.dart';

class Todo {
  final String title;
  final String description;

  Todo(this.title, this.description);
}

void main() {
  runApp(new MaterialApp(
    title: '传递数据',
    home: new TodosScreen(
      todos: new List.generate(
        20,
        (i) => new Todo(
              '我是表头 $i 项',
              '我是内容 $i',
            ),
      ),
    ),
  
  ));
}

class TodosScreen extends StatelessWidget {
  final List<Todo> todos;

  TodosScreen({Key key, @required this.todos}) : super(key: key);
  
  @override
  Widget build(BuildContext context) {
    return new Scaffold(
      appBar: new AppBar(
        title: new Text('第一个页面'),
      ),
      body: new ListView.builder(
        itemCount: todos.length,
        itemBuilder: (context, index) {
          return new ListTile(
            title: new Text(todos[index].title),
            subtitle:new Text(todos[index].description) ,
            // When a user taps on the ListTile, navigate to the DetailScreen.
            // Notice that we're not only creating a new DetailScreen, we're
            // also passing the current todo through to it!
            onTap: () {
              Navigator.push(
                context,
                new MaterialPageRoute(
                  builder: (context) => new DetailScreen(todo: todos[index]),
                ),
              );
            },
          );
        },
      ),
    );
  }
}

class DetailScreen extends StatelessWidget {
  // Declare a field that holds the Todo
  final Todo todo;

  // In the constructor, require a Todo
  DetailScreen({Key key, @required this.todo}) : super(key: key);
  
  @override
  Widget build(BuildContext context) {
    // Use the Todo to create our UI
    return new Scaffold(
      appBar: new AppBar(
        title: new Text("${todo.title}"),
      ),
      body: new Padding(
        padding: new EdgeInsets.all(16.0),
        child: new Text('${todo.description}'),
      ),
    );
  }
}

可以看到传值过来了,而且代码相当简洁。比起android原生开发来说,显示listview控件数据就少了一堆数据适配器的概念。

onTap: () {
              Navigator.push(
                context,
                new MaterialPageRoute(
                  builder: (context) => new DetailScreen(todo: todos[index]),
                ),
              );

onTap 代表手指轻触屏幕事件。这是通过用类来传递值。

  DetailScreen({Key key, @required this.todo}) : super(key: key);

可以看到,通过类的初始化,把类传递进来,然后读取类的相关属性来达到传值。

三:目前国外比较流行的页面传值是用fluro等第三方插件。
import 'package:flutter/material.dart';
import 'app_route.dart';
import 'package:fluro/fluro.dart';

void main() {
  router.define('home/:data', handler: new Handler(
      handlerFunc: (BuildContext context, Map<String, dynamic> params) {
        return new Home(params['data'][0]);
      }));
  runApp(new Login());
}

class Login extends StatefulWidget{
  @override
  createState() => new LoginState();
}

class LoginState extends State<Login>{
  @override
  Widget build(BuildContext context) {
    return new MaterialApp(
      title: 'Fluro 例子',

      home: new Scaffold(
        appBar: new AppBar(
          title: new Text("登录"),
        ),
        body: new Builder(builder: (BuildContext context) {
          return new Center(child:
          new Container(
              height: 30.0,
              color: Colors.blue,
              child:new FlatButton(
                child: const Text('传递帐号密码'),
                onPressed: () {
                  var bodyJson = '{"user":1281,"pass":3041}';
                  router.navigateTo(context, '/home/$bodyJson');
                  // Perform some action
                },
              )),
          );
        }),

      /**/

    ));
  }
}


class Home extends StatefulWidget{
  final String _result;
  Home(this._result);
    @override
  createState() => new HomeState();
}

class HomeState extends State<Home>{
  @override
  Widget build(BuildContext context) {
    return new Center(
      child: new Scaffold(
        appBar: new AppBar(
          title: new Text("个人主页"),
        ),
        body:new Center(child:  new Text(widget._result)),
      )
    );
  }
}

'app_route.dart’的代码:

import 'package:fluro/fluro.dart';
Router router = new Router();

可以看到,fluro应用一种比较新潮的方法来传值,更加接近vue、ag、reactjs等传值方式。

var bodyJson = '{"user":1281,"pass":3041}';
                  router.navigateTo(context, '/home/$bodyJson');

这样一来少写了很多代码,而且在大型的APP开发中,显得更加整洁易懂、易于管理、代码统一等。

  • 0
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 1
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值