美文网首页Flutter 知识点整理
flutter的listview动态数据加载

flutter的listview动态数据加载

作者: 跨界师 | 来源:发表于2021-06-30 16:46 被阅读0次

开发中经常使用到的一个功能,需要从服务器上获取数据并加载到listview上,动态显示。

先看看效果:

class HomeContent extends StatelessWidget{

  // 第一种方案 
  // List<Widget> list = List.filled(20, ListTile(title: Text("zheng"),subtitle: Text("ci"),));

// 第二种方案
  List<Widget> _getData(){
      var templist = listData.map((value){
      return ListTile(
        leading: Image.network(value['imageUrl']),
        title: Text(value['title']),
        subtitle: Text(value['author']),
      );
    });
      return templist.toList();
  }

  @override
  Widget build(BuildContext context) {
    // TODO: implement build
    return ListView(
      children: this._getData(),
    );
  }

// 第三种方案
class HomeContent extends StatelessWidget{

  List<Widget> listviews = List.filled(
      20,
      ListTile(
        leading: Image.network('https://www.itying.com/images/flutter/2.png'),
        title: Text("zheng"),
        subtitle: Text("ci"),)
  );

  @override
  Widget build(BuildContext context) {
    // TODO: implement build
    return ListView.builder(
      itemBuilder: (context,index){
        return listviews[index];
      },
      itemCount: listviews.length,
    );
  }

相关文章

网友评论

    本文标题:flutter的listview动态数据加载

    本文链接:https://www.haomeiwen.com/subject/rtjlultx.html