Flutter进阶

路由/页面传参

Navigator

import 'package:flutter/material.dart';
void main () => runApp(MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: '首页',
      home: FirstScreen()
    );
  }
}

class FirstScreen extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text('导航页面')),
      body: Center(
        child: RaisedButton(
          child: Text('查看详情'),
          onPressed: () async {
            final result = await Navigator.push(context, MaterialPageRoute(
              builder: (context) => SecondScreen(title: '详情页面test')
            ));
            print('$result');
        },)
      )
    );
  }
}

class SecondScreen extends StatelessWidget {
  final String title;
  SecondScreen({Key key ,@required this.title}):super(key:key);
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text(this.title)),
      body: Center(
        child: RaisedButton(
          child:Text('返回'),
          onPressed: (){
            Navigator.pop(context, '返回数据001');
          },
        )
      )
    );
  }
}

命名路由

import 'package:flutter/material.dart';
void main () => runApp(MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: '首页',
      // home: FirstScreen(),
      initialRoute: "/",
      routes: <String, WidgetBuilder> {
          '/': (BuildContext context) => new FirstScreen(),
          '/secondScreen' : (BuildContext context, { arguments }) => new SecondScreen()
        }
    );
  }
}

class FirstScreen extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text('导航页面')),
      body: Center(
        child: RaisedButton(
          child: Text('查看详情'),
          onPressed: () async {
            var result = await Navigator.of(context).pushNamed('/secondScreen', arguments: 'test');
            print(result);
        },)
      )
    );
  }
}

class SecondScreen extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    var args = ModalRoute.of(context).settings.arguments;
    print(args);
    return Scaffold(
      appBar: AppBar(title: Text("$args")),
      body: Center(
        child: RaisedButton(
          child:Text('返回'),
          onPressed: (){
            Navigator.pop(context, '返回数据001');
          },
        )
      )
    );
  }
}

方法说明

 Navigator.of(context).push(route);
 Navigator.of(context).pushNamed(routeName);
 
 Navigator.of(context).pushReplacement(newRoute);
 Navigator.of(context).pushReplacementNamed(routeName);

 Navigator.of(context).pushNamedAndRemoveUntil('/screen4', ModalRoute.withName('/screen1'))
 Navigator.pushAndRemoveUntil(context, MaterialPageRoute(builder: (BuildContext context) => new screen4()),
  ModalRoute.withName('/'))
  
 Navigator.of(context).popAndPushNamed(routeName);
 
 Navigator.of(context).popUntil(context, ModalRoute.withName('/screenName'));
 
 Navigator.of(context).pop();
 
 Navigator.of(context).maybePop();

 Navigator.of(context).canPop();

fluro (页面路由神器)

数据管理

EnventBus

void onLoginChanged(e){
  //登录状态变化处理逻辑
}

@override
void initState() {
  //订阅登录状态改变事件
  bus.on(Event.login,onLogin);
  super.initState();
}

@override
void dispose() {
  //取消订阅
  bus.off(Event.login,onLogin);
  super.dispose();
}


// 登录状态改变后发布状态改变事件
bus.emit(Event.login);

缺点：

1. 必须显式定义各种事件，不好管理
2. 订阅者必须需显式注册状态改变回调，也必须在组件销毁时手动去解绑回调以避免内存泄露。

Notification

在widget树中，每一个节点都可以分发通知，通知会沿着当前节点向上传递，所有父节点都可以通过NotificationListener来监听通知

Provider

https://pub.flutter-io.cn/packages/provider

InheritedWidget 组件的上层封装， 使其更易用， 更易复用

事件处理

GestureDetector

onTap: () => updateText("Tap"),//点击
onDoubleTap: () => updateText("DoubleTap"), //双击
onLongPress: () => updateText("LongPress"), //长按

网络请求

dio是一个强大的Dart Http请求库，支持Restful API、FormData、拦截器、请求取消、Cookie管理、文件上传/下载、超时、自定义适配器等…

dio

调试时可开启代理,运用抓包工具charles查看接口返回数据

https://www.charlesproxy.com/download/

关注公众号： 页面仔小杨 【实战干货、原创分享】