Flutter ListView 请求数据与渲染

 

使用的是 flutter 的 dio 框架请求数据。

安装 ，在 yaml 文件中加入包名称以及版本号：

dependencies:
  dio: 2.1.x  #latest version

 vscode 装了插件的话之间点击保存可自动安装包。

之后在需要的文件中进行引入此包：

import 'package:dio/dio.dart';

实例化：

Dio dio = Dio();

 

 官方用法示例：

void getHttp() async {
  try {
    Response response = await Dio().get("http://www.google.com");
    print(response);
  } catch (e) {
    print(e);
  }
}

 创建 ListView 组件，先创建动态组件，然后使用 ListView.builder 创建；

class ListScreen extends StatefulWidget {
  const ListScreen({Key key}) : super(key: key);

  _ListScreenState createState() => _ListScreenState();
}

class _ListScreenState extends State<ListScreen> {
  List mlists;
  @override
  void initState() {
    super.initState();
  }
  @override
  Widget build(BuildContext context) {
      return ListView.builder()
  }
}

定义一个 class 接收数据 ；

由于本人以前是做前端的，所以直接定义了一个数组来接收数据，结果发现是不可以的：

var mlist = [];

 如果就这样不定义类的话，是会报错的，所以需要定义一个类：(参考文章    Flutter笔记: 获取网络数据及渲染列表)

class Animate {
  Animate({
    this.additional,
    this.ename,
    this.jumplink,
    this.jumpquery,
    this.kg_pic_url,
    this.name,
    this.pic_6n_161,
    this.searchp,
    this.selpic,
    this.sort,
    this.statctl,
    this.statlst,
  });
 
  factory Animate.fromJson(Map<String, dynamic> json) {
    return Animate(
      additional: json['additional'],
      ename: json['ename'],
      jumplink: json['jumplink'],
      jumpquery: json['jumpquery'],
      kg_pic_url: json['kg_pic_url'],
      name: json['name'],
      pic_6n_161: json['pic_6n_161'],
      searchp: json['searchp'],
      selpic: json['selpic'],
      sort: json['sort'],
      statctl: json['statctl'],
      statlst: json['statlst'],
    );
  }

  final String additional;
  final String ename;
  final String jumplink;
  final String jumpquery;
  final String kg_pic_url;
  final String name;
  final String pic_6n_161;
  final String searchp;
  final String selpic;
  final String sort;
  final String statctl;
  final String statlst;
}

 

 定义数据请求的函数，这里使用的是百度请求的 jsonp 数据，返回了一个函数，所以后面进行了一下处理；

Future getData(int page) async {
    final String url = 'https://sp0.baidu.com/8aQDcjqpAAV3otqbppnN2DJv/api.php?resource_id=28286&from_mid=1&&format=json&ie=utf-8&oe=utf-8&query=电影&sort_key=16&sort_type=1&stat0=&stat1=&stat2=&stat3=&pn=0&rn=8&cb=cbs';
    try {
       var response = await dio.get<String>(url);
       var result = response.data.replaceAll('cbs(', '').replaceAll(')', '');
       List res = json.decode(result)['data'][0]['result'];

       setState(() {
         mlists = res.map((dynamic json) => Animate.fromJson(json)).toList();
       });
    } catch (e) {
       print(e);
    }
  }
}

获得数据之后，将数据加入 ListView 中就可以了，我这里的 itemBuilder 中使用 Card 组件：

return Card(
              margin: const EdgeInsets.only(bottom: 10.0, left: 10.0, right: 10.0),
              child: Row(
                children: <Widget>[
                  Expanded(flex: 2, child: 
                    Container(margin: const EdgeInsets.all(15.0), child:
                      ClipRRect(
                        borderRadius: BorderRadius.circular(10.0),
                        child: Image.network(
                          '${mlists[i].kg_pic_url}',
                          fit: BoxFit.cover,
                        ),
                      ),
                    ),
                  ),
                  Expanded(flex: 3, child: 
                    Container(margin: const EdgeInsets.only(left: 10.0), height: 150.0 ,child:
                      Column(
                        crossAxisAlignment: CrossAxisAlignment.start,
                        mainAxisAlignment: MainAxisAlignment.spaceAround,
                        children: <Widget>[
                          Text('${mlists[i].name}',style: TextStyle(fontSize: 20.0,color: Colors.blue)),
                          Text('${mlists[i].additional}'),
                          Text('${mlists[i].sort}'),
                          Text('${mlists[i].statlst}'),
                        ],
                      )
                    )
                  )
                  
                ],
              )
            );}

后面又自己加了上拉加载更多的功能，效果：