Flutter:动态列表与ListViewbuilder的使用

我们可以通过遍历一个List的方式实现一个列表，就像这样：

import 'package:flutter/material.dart';

class MyApp_ListViewLearn_2 extends StatelessWidget {
    
    
  @override
  Widget build(BuildContext context) {
    
    
    // TODO: implement build
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(title: Text('Flutter Demo')),
        body: HomeContent(),
      ),
    );
  }
}

class HomeContent extends StatelessWidget {
    
    

  //自定义方法
  List<Widget> _getDate() {
    
    
    return [
      ListTile(
        title: Text('我是一个列表'),
      ), ListTile(
        title: Text('我是一个列表'),
      ), ListTile(
        title: Text('我是一个列表'),
      ), ListTile(
        title: Text('我是一个列表'),
      ),
    ];
  }

  @override
  Widget build(BuildContext context) {
    
    
    return ListView(
      children: this._getDate(),
    );
  }
}

那么实现动态列表的一个思路，我们可以通过for循环list来实现

import 'package:flutter/material.dart';

class MyApp_ListViewLearn_2 extends StatelessWidget {
    
    
  @override
  Widget build(BuildContext context) {
    
    
    // TODO: implement build
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(title: Text('Flutter Demo')),
        body: HomeContent(),
      ),
    );
  }
}

class HomeContent extends StatelessWidget {
    
    

  //自定义方法
  List<Widget> _getData(){
    
    

    List<Widget> list=[];
    for(var i = 0;i<20;i++){
    
    
      list.add(
        ListTile(
        title: Text('我是第$i个列表'),
      ),);
    }
    return list.toList();
  }

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

如何将以下类型的数据转换成一个动态列表呢？

ListDate.dart：

List listData=[
{
“title”: ‘Candy Shop’,
“author”: ‘Mohamed Chahin’,
“imageUrl”: ‘https://www.itying.com/images/flutter/1.png’,
},
{
“title”: ‘Childhood in a picture’,
“author”: ‘Google’,
“imageUrl”: ‘https://www.itying.com/images/flutter/2.png’,
},
{
“title”: ‘Alibaba Shop’,
“author”: ‘Alibaba’,
“imageUrl”: ‘https://www.itying.com/images/flutter/3.png’,
},
{
“title”: ‘Candy Shop’,
“author”: ‘Mohamed Chahin’,
“imageUrl”: ‘https://www.itying.com/images/flutter/4.png’,
},
{
“title”: ‘Tornado’,
“author”: ‘Mohamed Chahin’,
“imageUrl”: ‘https://www.itying.com/images/flutter/5.png’,
},
{
“title”: ‘Undo’,
“author”: ‘Mohamed Chahin’,
“imageUrl”: ‘https://www.itying.com/images/flutter/6.png’,
},
{
“title”: ‘white-dragon’,
“author”: ‘Mohamed Chahin’,
“imageUrl”: ‘https://www.itying.com/images/flutter/7.png’,
}
];

这里要用到ListMap来实现了

import 'package:flutter/material.dart';
import 'res/ListDate.dart';

class MyApp_ListViewLearn_2 extends StatelessWidget {
    
    
  @override
  Widget build(BuildContext context) {
    
    
    // TODO: implement build
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(title: Text('Flutter Demo')),
        body: HomeContent(),
      ),
    );
  }
}

class HomeContent extends StatelessWidget {
    
    
  List<Widget> _getDate() {
    
    
    var tempList = listData.map((e) {
      return ListTile(
        leading: Image.network((e)["imageUrl"]),
        title: Text(e["title"]),
        subtitle: Text(e["author"]),
      );
    }
        // (e) => ListTile(
      //   title: Text(e["title"]),
      // ),
    );
    return tempList.toList();
  }

  @override
  Widget build(BuildContext context) {
    return ListView(children: this._getDate());
  }
}

效果如下：

ListViewbuilder的应用

import 'package:flutter/material.dart';

class MyApp_ListViewLearn_3 extends StatelessWidget {
    
    
  @override
  Widget build(BuildContext context) {
    
    
    // TODO: implement build
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text('Flutter Demo'),
        ),
        body: HomeContent(),
      ),
    );
  }
}

class HomeContent extends StatelessWidget {
    
    
  List list = [];

  HomeContent() {
    
    
    for (var i = 0; i < 20; i++) {
    
    
      this.list.add('我是第$i条');
    }
  }

  @override
  Widget build(BuildContext context) {
    
    
    return ListView.builder(
        itemCount: this.list.length,
        itemBuilder: (context, index) {
    
    
          return ListTile(
            title: Text(this.list[index]),
          );
        });
  }
}

效果如下：


使用ListViewbuilder处理前面ListDate.dart的数据：

import 'package:flutter/material.dart';
import 'res/ListDate.dart';

class MyApp_ListViewLearn_3 extends StatelessWidget {
    
    
  @override
  Widget build(BuildContext context) {
    
    
    // TODO: implement build
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text('Flutter Demo'),
        ),
        body: HomeContent(),
      ),
    );
  }
}

class HomeContent extends StatelessWidget {
    
    
  Widget _getListdate(context, index) {
    
    
    return ListTile(
      title: Text(listData[index]["title"]),
      leading: Image.network(listData[index]["imageUrl"]),
      subtitle: Text(listData[index]["author"]),
    );
  }

  @override
  Widget build(BuildContext context) {
    
    
    return ListView.builder(
        itemCount: listData.length, itemBuilder: this._getListdate);
  }
}

效果如下：