Flutter 经常使用页面模板

综合说明

如下是四套列表和网格的常见需求

• 不分页时：利用 FutrueBuilder 把 ListView/GridView 和 _fetch 的 Future<T> 关联起来。
• 分页时：采用 pagewise 第三方组件，用法和 FutrueBuilder 相似
• 单一接口驱动
• 接口请求等待时加载居中的 CircularProgressIndicator
• 若是须要嵌套到其它无边界容器里，设置 shrinkWrap: true，或者使用 Sliver/PagewiseSliver 版的控件

1. 不分页列表

@override
  Widget build(BuildContext context) {
    return FutureBuilder(
      future: _fetch(),
      builder: (context, snapshot) {
         switch (snapshot.connectionState) {
        case ConnectionState.none: 
        case ConnectionState.waiting: 
          return Center(child:CircularProgressIndicator());
        case ConnectionState.done:
          if (snapshot.hasError) {
            break;
          } else { 
            var models = snapshot.data as List<YOURMODEL>;
            return ListView(children: models.map((model) => YOURWIDGET(model: model)).toList());
          }
          break;
        default:
          break;
      }
      return Container();
    }); 
  }

  Future<List<YOURMODEL>> _fetch() async {
    Map map = await YOURHTTPClient.fetch();
    List data = map["data"];
    return Future.value(data.map((item) => YOURMODEL.fromJson(item)).toList());
  }
复制代码

2. 分页列表

static const _pageSize = 10;

  @override
  Widget build(BuildContext context) {
    return PagewiseListView(
          pageSize: _pageSize,
          padding: EdgeInsets.all(0),
          itemBuilder: (context, model, index) {
            return YOURWIDGET(model: model);
          },
          pageFuture: (pageIndex) {
              return _fetch(pageIndex: pageSize);
            },
        );
  }

  Future<List<YOURMODEL>> _fetch({int pageIndex}) async {
    Map map = await YOURHTTPClient.fetch();
    List data = map["data"];
    return Future.value(data.map((item) => YOURMODEL.fromJson(item)).toList());
  }
复制代码

3. 不分页网格

@override
  Widget build(BuildContext context) {
    return FutureBuilder(
        future: _fetch(),
        builder: (context, snapshot) {
          switch (snapshot.connectionState) {
            case ConnectionState.none:
            case ConnectionState.waiting:
              return Center(child: CircularProgressIndicator());
            case ConnectionState.done:
              if (snapshot.hasError) {
                break;
              } else {
                var models = snapshot.data as List<YOURMODEL>;
                return GridView.count(
                    childAspectRatio: 1,
                    crossAxisCount: 2,
                    children: models
                        .map((model) => YOURWIDGET(model: model))
                        .toList());
              }
              break;
            default:
              break;
          }
          return Container();
        });
  }

  Future<List<YOURMODEL>> _fetch() async {
    Map map = await YOURHTTPClient.fetch();
    List data = map["data"];
    return Future.value(data.map((item) => YOURMODEL.fromJson(item)).toList());
  }
复制代码

4. 分页网格

static const _pageSize = 10;

  @override
  Widget build(BuildContext context) {
    return PagewiseGridView.count(
            pageSize: _pageSize,
            crossAxisCount: 2,
            childAspectRatio: 1,
            itemBuilder: (context, model, index) {
              return YOURWIDGET(model: model);
            },
            pageFuture: (pageIndex) {
              return _fetch(pageIndex: pageSize);
            },
          ),
  }

  Future<List<YOURMODEL>> _fetch({int pageIndex}) async {
    Map map = await YOURHTTPClient.fetch(pageIndex: pageIndex);
    List data = map["data"];
    return Future.value(data.map((item) => YOURMODEL.fromJson(item)).toList());
  }
复制代码