flutter-异步组件与数组快速生成多个组件

前言

flutter 中有像前端一样快速生成多个类似组件的功能，例如：React中的list.map，小程序的 wx:for等，flutter也有类似的功能，也就是使用 list.map

另外 flutter 还引出了异步组件FutureBuilder(注意其不是异步渲染)，其可以等网络数据加载完成之后在渲染， 可以减少 state 状态码的数量, 配合 StatelessWidget有奇效，至少在一些活动页面也许能让代码更清洁一些

快速生成多个组件

平时使用过程中，中间可能会生成多个类似的组件，但是数据不同，我们不可能都使用ListView.builder把，实际上也没必要，我们可以使用 map方法来动态生成

先编写一个生成数据的异步方法，这里使用了 http 框架

Future<List<dynamic>> getData() async {
  Response res = await get(
      Uri.parse("http://rap2api.taobao.org/app/mock/224518/api/chat/list"));
  final body = jsonDecode(res.body);
  return body["chat_list"];
}

然后我们在 Row 中生成几个类似组件，通过 List 来控制内容，如下所示：

//控制内容参数
List<String> datas = ['全部', '待付款', '待收货', '已收货' '待评价'];

//使用 List 的 map 对象方法，动态生成多个类似组件，最后加上一个 toList() 即可
Row(
  mainAxisAlignment: MainAxisAlignment.spaceEvenly,
  children: datas.map<Widget>((item) {
    return Text(item);
  }).toList(),
)

//如果有 index 索引相关需条件可以使用 List.generate 类方法
Row(
  mainAxisAlignment: MainAxisAlignment.spaceEvenly,
  children: List<Widget>.generate(widget.pickerList.length, (int index) {
    return Text(datas[index]);
  }),
)

结果如下所示:

异步组件FutureBuilder

前面也说了，FutureBuilder是一个异步组件，不是异步渲染，其可以通过接收一个异步对象 Future，从而控制网络数据的加载时机，在里面有回调加载结果，减少了网络状态码对当前组件的侵入，在实用过程中，可以用来简化代码逻辑，可以尝试配合 StatelessWidget有奇效，在组件不销毁的情况，状态变化的问题也能解决了

实用案例如下所示：

FutureBuilder(
  //传递返回Future对象，一般即调用网络加载的函数即可 async
  future: getData(),
  builder: (BuildContext context, AsyncSnapshot<List<dynamic>> snapshot) {
    print(snapshot.data);
    //这里面有网络加载的状态值，可以在这里面控制组件内容加载状态的切换
    if (snapshot.connectionState == ConnectionState.waiting) {
      return const SizedBox(
        child: Text('加载中...'),
      );
    }else {
      return ListView(
        children: snapshot.data!.map<Widget>((item) {
          return Text(item['name']);
        }).toList(),
      );
    }
  },

在网络请求未完毕前，会显示我们设置的加载中文案，加载后的如下所示：

最后

虽然这个异步组件完全能够被代替，然而在实际使用过程中，能减少我们一些工作量，且一些地方能减少一些state声明，使得功能更清晰

另外 .map 能协助我们更快的进行 UI 的编写，这个也是用的最多的

快来尝试一下吧