Flutter学习(二)-FlutterGo

目录
Flutter学习(一)
Flutter学习(二)-FlutterGo学习

FlutterGo是阿里拍卖前端团队针对于时下很火的跨平台移动解决方案推出的实例APP项目,对于Flutter初学者,学习掌握此项目是极其有益的。
github地址:https://github.com/alibaba/flutter-go

目录结构

-lib dart源文件
----routers router路由文件
----views 存放UI文件,文件以_page结尾

fluro

Flutter本身提供了路由机制,作个人的小型项目,完全足够了。但是如果你要作企业级开发,可能就会把入口文件变得臃肿不堪。而再Flutter问世之初,就已经了企业级路由方案fluro。
github地址:https://github.com/theyakka/fluro
这边文章写的比较详细:Flutter路由_fluro引入配置和使用
接着Flutter 开发文档中的demo继续学习fluro。
在mai.dart中点击右上角,会打开已经收藏的名字,原文demo中使用flutter自带的路由实现,现在我用fluro来实现。
目录结构如下:
在这里插入图片描述
1、先写收藏列表,这个业务界面很简单,就把传过来的名字展示一下(suggestion_page.dart):

import 'package:flutter/material.dart';

class SuggestionPage extends StatefulWidget {
  String suggestions;

  SuggestionPage(String suggestions) {
    this.suggestions = suggestions;
  }

  @override
  State<StatefulWidget> createState() {
    return SuggestionWidget();
  }

}

class SuggestionWidget extends State<SuggestionPage> {

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: new Center(
        child: Text(widget.suggestions),
      ),
    );
  }

}

2、处理router跳转的handle(router_handle.dart):

import 'package:fluro/fluro.dart';
import 'package:flutter/material.dart';
import 'package:flutter_app/views/suggestion_page.dart';

var suggestionHandle = new Handler(
    handlerFunc: (BuildContext context, Map<String, List<String>> params) {
      var suggestions = params['suggestions'].first; // router参数
      return new SuggestionPage(suggestions); // 收藏界面
    }
);

申明一个handle,由handle跳转到相应的业务界面,并且传递参数。
3、定义路由文件(routers.dart):

import 'package:fluro/fluro.dart';
import 'package:flutter/material.dart';
import 'router_handle.dart';

class Routers {
  static String root = '/'; // 根目录
  static String suggestion = '/suggestion'; // 收藏界面

  static void configRouters(Router router) {
    router.notFoundHandler = new Handler(
      handlerFunc: (BuildContext context, Map<String, List<String>> params) {
        print('ERROR====>ROUTE WAS NOT FONUND!!!');
      }
    );
    
    router.define(suggestion, handler: suggestionHandle);// 收藏界面
  }
}

定义router路径与对应的handle,这样使用路径进行路由时,可以找到对应的handle处理。
4、全局管理router文件(application.dart),这样不用每次都去new router:

import 'package:fluro/fluro.dart';

class Application {
  static Router router;
}

5、在main.dart中初始化路由:

class MyApp extends StatelessWidget {

  MyApp() {
    final router = Router();
    Routers.configRouters(router);
    Application.router = router;
  }
  // ...........
  //调用路由跳转
Application.router.navigateTo(context, '${Routers.suggestion}?suggestions=${strJson}');
}

配置全局路由。
参数好像只能是String类型的???

Future异步

参考:Flutter进阶篇(4)-- Flutter的Future异步详解
Flutter中的异步其实就是用的Dart里面的Future,then函数,回调catchError这些东西。
创建Future

void testFuture(){
  Future future = new Future(() => null);
  future.then((_){
    print("then");
  }).then((){
    print("whenComplete");
  }).catchError((_){
    print("catchError");
  });
} 

这里的执行结果是:

then
whenComplete

future里面有几个函数:

  • then:异步操作逻辑在这里写。
  • whenComplete:异步完成时的回调。
  • catchError:捕获异常或者异步出错时的回调。因为这里面的异步操作过程中没有遇到什么错误,所以catchError回调不会调用。

在我们平时开发中我们是这样用的,首先给我们的函数后面加上async关键字,表示异步操作,然后函数返回值写成Future,然后我们可以new一个Future,逻辑前面加上一个await关键字,然后可以使用future.then等操作。下面是一个示例操作,为了方便演示,这里的返回值的null。平时开发中如果请求网络返回的是json,我们可以把泛型写成String;泛型也可能是实体类(entity/domain),不过要做json转实体类相关操作。
在flutterGo中的示例:

Future<SharedPreferences> _prefs = SharedPreferences.getInstance();
Future<bool> _unKnow;
//获取sharePre
_unKnow = _prefs.then((SharedPreferences prefs) {
  return (prefs.getBool('disclaimer::Boolean') ?? false);
});

/// 判断是否需要弹出免责声明,已经勾选过不在显示,就不会主动弹
_unKnow.then((bool value) {
  new Future.delayed(const Duration(seconds: 1), () {
    if (!value &&
        key.currentState is DisclaimerMsgState &&
        key.currentState.showAlertDialog is Function) {
      key.currentState.showAlertDialog(context);
    }
  });
});

_prefs 是SharedPreferences的异步,_unKnow是bool的异步,_unKnow由_prefs 获取到。
SharedPreferences.getInstance()的实现方式如下,用了async 字段修饰:

  static Future<SharedPreferences> getInstance() async {
    if (_instance == null) {
		// ...
    }
    return _instance;
  }
发布了218 篇原创文章 · 获赞 91 · 访问量 25万+
展开阅读全文

没有更多推荐了,返回首页

©️2019 CSDN 皮肤主题: 大白 设计师: CSDN官方博客

分享到微信朋友圈

×

扫一扫,手机浏览