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

Posted 2022-11-21 嗡汤圆

由于不是专门做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，想必小伙伴们已经知道怎么做了吧。