2、Flutter列表中相关布局搭建及组件运用

简要介绍一下一款在线APP列表生成过程：1、获取线上数据，进行本地数据模型转换（对象List）；2、列表视图Build,定义列表基本属性key、itemCount、itemBuilder等，将数据对象ListItem & itemView进行绑定；

获取主视图body

Widget _getList() {
    return Center(
      child: FutureBuilder(  //FutureBuilder实现懒加载，并监听加载过程状态 
        future: _fetchMessionList(),  //获取线上数据
        builder: (context, AsyncSnapshot snapshot) {
          switch (snapshot.connectionState) {
            case ConnectionState.none:
            case ConnectionState.waiting:
              return CircularProgressIndicator();
            default:
              if (snapshot.hasError) {
                return Text('Error:${snapshot.error}');
              } else {
                return _createListView(context, snapshot); //取得数据，创建listView视图
              }
          }
        },
      ),
    );
  }

此方法主要是构建列表页的整体视图，并说明创建流程，首先利用FutureBuilder懒加载获取线上数据，通过监听数据加载状态来管理当前页面消息显示（加载过程过度porogress，加载完成后构建ListView）

利用Dio进行线上数据获取

Future<List<Mession>> _fetchMessionList() async {
    List<Mession> messionList = List<Mession>();
    try {
      final response =
          await Dio().get('${Config.BASE_URL}/mession/get_mession');
      if(response.statusCode == 200){
        messionList = Mession.fromJson(response.toString());
      }
      return messionList;
    } catch (e) {
      print('MessionPage->'+e.toString());
    }
    return messionList;
  }

基本用法github上有介绍。

构建ListView，ListItem绑定itemView

Widget _createListView(BuildContext context, AsyncSnapshot snapshot) {
    List<Mession> messions = snapshot.data;
    return ListView.builder(
      key: PageStorageKey('list-mession'),
      itemCount: messions.length,
      itemBuilder: (BuildContext context, int index){
        return MessionItem(
          onPressed: (){
            //to do something
          },
          mession: messions[index],
        );
      },
    );
  }

其中AsyncSnapshot 是FutureBuilder中的builder中对应的参数，其中AsyncSnapshot .data是线上请求result。MessionItem对应的是ListItem绑定后的ItemView类对象，绑定过程就是itemView生成过程：

class MessionItem extends StatelessWidget {
  final Mession mession;
  MessionItem({Key key, this.mession, this.onPressed}) : super(key: key);
  VoidCallback onPressed;
  @override
  Widget build(BuildContext context) {
    Color _typeColor = Colors.cyan[300];
    switch(mession.m_type){
      case 1:
        _typeColor = Colors.cyan.shade200;
        break;
      case 2:
        _typeColor = Colors.amberAccent.shade200;
        break;
      case 3:
        _typeColor = Colors.greenAccent[200];
        break;
      case 4:
        _typeColor = Colors.redAccent[100];
        break;
    }
    return new GestureDetector(
      onTap: onPressed,
      child: new Container(
        height: 75.0,
        margin: const EdgeInsets.only(top: 5.0, bottom: 5.0),
        color: Colors.white,
        child: Row(
          crossAxisAlignment: CrossAxisAlignment.start,
          mainAxisSize: MainAxisSize.min,
          children: <Widget>[
            Container(
              padding: const EdgeInsets.only(
                  left: 12.0, top: 10.0, right: 5.0, bottom: 10.0),
              child: CircleAvatar(
                backgroundImage: NetworkImage(mession.m_icon),
                radius: 26.0,
              ),
            ),
            Expanded(
                child: Container(
              padding: const EdgeInsets.only(top: 5.0, right: 5.0),
              alignment: Alignment.centerLeft,
              child: Column(
                crossAxisAlignment: CrossAxisAlignment.start,
                mainAxisSize: MainAxisSize.min,
                children: <Widget>[
                  Container(
                      margin: const EdgeInsets.only(bottom: 10.0),
                      child: Row(children: <Widget>[
                        Text(
                          mession.m_name,
                          style:
                              new TextStyle(color: Colors.black, fontSize: 16),
                        ),
                        Container(
                          decoration: new BoxDecoration(
                            color: new Color(0xFFF6F6F8),
                            borderRadius: new BorderRadius.all(new Radius.circular(6.0)),
                          ),
                          padding: const EdgeInsets.only(
                              top: 3.0, bottom: 3.0, left: 8.0, right: 8.0),
                          margin: const EdgeInsets.only(left: 15.0),
                          child: Text(
                            mession.m_type_name,
                            style: new TextStyle(color: Color.fromARGB(255, 0, 215, 198),fontSize: 12),
                          ),
                        ),
                      ])),
                  Text(
                    mession.m_slogen,
                    overflow: TextOverflow.ellipsis,
                    maxLines: 2,
                    style: new TextStyle(
                      color: Colors.grey[400],
                      fontSize: 12,
                    ),
                  ),
                ],
              ),
            )),
            Container(
              width: 65.0,
              color: _typeColor,
              child: Text(
                '${mession.m_point}分',
                style: new TextStyle(color: Colors.white),
              ),
              alignment: Alignment.center,
            ),
          ],
        ),
      ),
    );
  }
}

最后的展现：

Screenshot_2019-04-22-17-59-42_WPS图片.png

例外GridView在build的时候有一些属性需要注意，可以看下官网的相关控件介绍。本项目中的引用部分如下：

Widget _creatGirdView(BuildContext context, AsyncSnapshot snapshot){
    return GridView.builder(
      key: PageStorageKey('grid-goods'),
      gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
        crossAxisCount: 2,
        childAspectRatio: 0.76,
      ),
      itemCount: _goodsList.length,
      itemBuilder: _buildGoodsItem,
    );
  }

具体实现流程跟ListView的实现流程一样。