Flutter 研发阶段性总结(二) 基本需求研发总结

由于不是专门做App研发的,可能思维比较狭隘,以下两点估计能覆盖大部分的需求场景:

  1. 基于HTTP网络请求的增删改查
  2. 基于本地数据库,比如sqlite的增删改查

。。。。。。别打我,也可能就我自己这么认为。

所有开发的基础 - Future

这个应该前端的同学很熟悉,从以前的事件监听,promise到现在的Future都是异步开发的思想。说白了就是:

我封装了一个任务和参数交给系统,你把这个事情做了,成功后做啥,失败后做啥。在任务执行期间我就可以做别的事情了。

异步在Flutter中,或者说是在Dart的底层机制中是无所不在的,因此它是所有功能研发的基础。

void main () {
  Future(() {
    print('future craeted');
    return 12;
  }).then((data) {
    print('received data $data');
  });
  print('main func done');
}

这里输出的顺序应该是:

  1. main func done
  2. future created
  3. received data 12

因为,Future((){}).then((){}); 仅做了封装了一个任务并交给Dart,随后立马运行到 print('main func done'); 这行,因此main func done 是最先输出的。

其次是异步代码的编排,如果仅仅依靠Future的then和catchError, 实现异步的调度,一旦需要多个异步操作先后依赖则很容易出现如下代码:

futurefunc1().then((data1){
  futurefunc2(data1).then((data2){
    futurefunc3(data2).then((){}).catchError((error){});......
  }).catchError((error){
    print('futuer 2 error');
  });
}).catchError((error){
  print('future 1 error');
});

代码是很难读懂的,此时async出现了

futurefunc1() async {}
futurefunc2(data1) async {}
futurefunc3(data2) async {}
main() async {
  var data1 = await futurefunc1();
  var data2 = await futurefunc2(data1);
  var data3 = await futurefunc3(data2);
}

这样异步任务的依赖关系就很明白了。
在此基础上,http,sqlite等相关工具调用函数返回Future就很容易理解了。

Future与Widget

1) 用状态控制界面

这个是最直接的思路,通过界面Widget绑定变量,在state改变时候重新绘制就行

class BasePage extends StatefulWidget {
  @override
  _BasePageState createState() =>_BasePageState();
}

class _BasePageState extends State<BasePage> {
  // 变量
  bool _loading = false;
  String _result = '';
  
  @override
  initState() {
    super.initState();
    loadData();
  }

  @override
  Widget build(BuildContext context) {
    return Container(
      // 载入过程中显示载入中,结束后显示获得的结果
      child: _loading? Text('载入中'): Text(_result);
    );
  }

  /// 页面逻辑
  loadData() {
    setState((){
      _loading = true;
    });
    
    getData().then((data){
      setData((){
        _loading = false;
        _result = data;
      });
    }).catchError((error){
      print('error $error');
      setData((){
        _loading = false;
        _result = 'Oops';
      });
    });
  }
  
  /// 某种耗时的获取数据的方法比如http或者sql
  Future<String> getData() async {
    return 'takes time to get some thing';
  }
}

2) FutureBuilder

1)方法仍然需要用户手动维护载入状态,执行中啥样,成功啥样,错误啥样,都需要自己setState来操作,比较麻烦。
Flutter官方提供了基于Future的Widget构造方法,用户仅需要提供Future的来源,各种状态的显示样式即可,整个loadData页面逻辑函数就可以去掉了。上述同样的功能即变为 :

class BasePage extends StatefulWidget {
  @override
  _BasePageState createState() =>_BasePageState();
}

class _BasePageState extends State<BasePage> {
  // 变量
  bool _loading = false;
  String _result = '';
  
  @override
  Widget build(BuildContext context) {
    /// 这里是FutureBuilder<String> 因为Future提供函数getData()返回的是Future<String>
    /// 其实可以不指定String类型, 即FutureBuilder(), 这样默认是dynamic类型
    return FutureBuilder<String>(
      future: getData,
      builder: (context, snapshot) {
        if (snapshot.hasError) {
          return Text('Oops');
        } else if(snapshot.hasData){
          return Text(snapshot.data);
        } else {
          return Text('载入中');
        }
      }
    );
  }
   
  /// 某种耗时的获取数据的方法比如http或者sql
  Future<String> getData() async {
    return 'takes time to get some thing';
  }
}

3) 其它

如果界面的值不是一次发生变化,而是在一个时期内会有多次变化,则可以使用StreamBuilder, 这个控件在后期会提到。

基本控件

控件包管理方面,Google提供了pub,和Java的Maven, Gradle类似,在Flutter项目的yaml文件中声明dependency并标明版本即可把控件依赖加入到项目中。 以下提供Http和Sql增删改查的基本工具。

1) HTTP - Dio

这个是Flutter上最为流行的Http工具库,封装了很多基本方法,get、post、文件上传、文件下载等等
项目地址
Dio

Dio dio = Dio();

dio.get('http://www.baidu.com'); // 返回Future
dio.post('http://api.baidu.com', data: {"param":value}); // 返回Future
// ......还有很多很多,请见官方文档

2)Sql - sqflite

这个是Flutter上Sqlite实现工具库,同样也是封装得很完完善的库了。
项目地址
sqflite

Database db = await openDatabase(path,readOnly: false);
db.rawQuery('SELECT * FROM table'); // 返回Future<List<String, dynamic>>
// .... 还有很多

结合上边的 Future和FutureBuilder,想必小伙伴们已经知道怎么做了吧。

评论 2
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值