A list ListView component of Flutter, Icon icon

List box can be defined directly vertical width, the width of the list does not take effect. To define the width of the horizontal list

Entry file

import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';
import 'movies.dart';

void main() {
  runApp(StudyListShow());
}

// 页面主结构
class StudyListShow extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    // TODO: implement build
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text("演员列表"),
        ),
        body: MoviesList(),
      ),
    );
  }
}

Dynamic rendering list for circulation

 //动态渲染列表
 class MoviesList extends StatelessWidget {
  //for 循环
   List<Widget> _getListMovies() {//列表数组Widget类型
    List<Widget> moviList = new List();//创建空数组
    for (var i = 0; i < 20; i++) {
       moviList.add(ListTile(//ListTile列表子元素结构层
       	 leading: Icon(Icons.home),//头部图标
         title: Text("我是第$i"),//标题
         subtitle: Text("我是子标题"),//子标题
         trailing:Icon(Icons.search)//尾部图标
       ));
     }
     return moviList;
  }

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

map cyclic data

//动态渲染列表
class MoviesList extends StatelessWidget {
  //map循环数据
   List<Widget> _getMoveiDataList(){//列表数组
     var tempList = casts.map((value){//map遍历
       return ListTile(//返回数组数据
         leading: Image.network(value["avatars"],width: 200,height: 200,fit: BoxFit.cover,),//网络图片leading
         title: Text(value["name"]),
         subtitle: Text(value["name_en"]),
       );
     });
     //其实返回的是这种格式,(ListTile(leading:....,title:...),ListTile(leading:....),ListTile(leading:....))
     return tempList.toList();//转成List
   }

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

ListView.builder build lists

  //ListView.builder 构建
  Widget _getMoveisForBuilder(context,index) {//这里必须是Widget类型
    return ListTile(
      leading: Image.network(casts[index]["avatars"],width:100,height: 100,fit: BoxFit.cover,),
      title: Text(casts[index]["name"]),
      subtitle: Text(casts[index]["name_en"]),
      );
  }

  @override
  Widget build(BuildContext context) {
    // TODO: implement build
      return ListView.builder(
        scrollDirection: Axis.horizontal,
       padding: EdgeInsets.all(10),
       itemCount: casts.length,
       itemBuilder:this._getMoveisForBuilder,
     );
  }
}

Grid usage grid layout similar to GridView

import 'package:flutter/material.dart';
import 'movies.dart';

void main() {
  runApp(HomeApp());
}

class HomeApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    // TODO: implement build
    return MaterialApp(
        home: Scaffold(
      appBar: AppBar(
        title: Text("Gradle View"),
      ),
      body: StudyGradleView(),
    ));
  }
}

//gradle view
class StudyGradleView extends StatelessWidget {
  // for 循环
   List<Widget> _getGridViewData() {
     List<Widget> listData = new List();
     for (var i = 0; i < 20; i++) {
       listData.add(Container(
         child: Text("着还是地$i条数据",textAlign: TextAlign.center,),
         decoration: BoxDecoration(
           color:Colors.pink
         ),
       ));
     }
     return listData.toList();
   }

// // map 循环
  List<Widget> _getGridViewData() {
    var tempList = casts.map((value){
        return Container(
          child: Column(
            children:<Widget>[
              Image.network(value['avatars']),
               SizedBox(height: 20,),
              Text(value['name'])
            ]
          ),
        );
    });
    return tempList.toList();
  }

  //GridView.count
  @override
  Widget build(BuildContext context) {
    // TODO: implement build
    return GridView.count(
      padding: EdgeInsets.all(10),
      crossAxisSpacing: 10,
      crossAxisCount: 2,
      mainAxisSpacing: 10,
      children: this._getGridViewData(),
    );
  }
}

data

List casts = [
  {
    "avatars":
        "https://img9.doubanio.com/view/celebrity/s_ratio_celebrity/public/p17525.jpg",
    "name_en": "Tim Robbins",
    "name": "蒂姆·罗宾斯",
    "alt": "https://movie.douban.com/celebrity/1054521/",
    "id": "1054521"
  },
  {
    "avatars":
        "https://img3.doubanio.com/view/celebrity/s_ratio_celebrity/public/p34642.jpg",
    "name_en": "Morgan Freeman",
    "name": "摩根·弗里曼",
    "alt": "https://movie.douban.com/celebrity/1054534/",
    "id": "1054534"
  },
  {
    "avatars":
        "https://img1.doubanio.com/view/celebrity/s_ratio_celebrity/public/p5837.jpg",
    "name_en": "Bob Gunton",
    "name": "鲍勃·冈顿",
    "alt": "https://movie.douban.com/celebrity/1041179/",
    "id": "1041179"
  },
  {
    "avatars":
        "https://img1.doubanio.com/view/celebrity/s_ratio_celebrity/public/p67.jpg",
    "name_en": "Leslie Cheung",
    "name": "张国荣",
    "alt": "https://movie.douban.com/celebrity/1003494/",
    "id": "1003494"
  },
  {
    "avatars":
        "https://img9.doubanio.com/view/celebrity/s_ratio_celebrity/public/p46345.jpg",
    "name_en": "Fengyi Zhang",
    "name": "张丰毅",
    "alt": "https://movie.douban.com/celebrity/1050265/",
    "id": "1050265"
  },
  {
    "avatars":
        "https://img1.doubanio.com/view/celebrity/s_ratio_celebrity/public/p1399268395.47.jpg",
    "name_en": "Li Gong",
    "name": "巩俐",
    "alt": "https://movie.douban.com/celebrity/1035641/",
    "id": "1035641"
  },
  {
    "avatars":
        "https://img3.doubanio.com/view/celebrity/s_ratio_celebrity/public/p28603.jpg",
    "name_en": "Tom Hanks",
    "name": "汤姆·汉克斯",
    "alt": "https://movie.douban.com/celebrity/1054450/",
    "id": "1054450"
  },
  {
    "avatars":
        "https://img1.doubanio.com/view/celebrity/s_ratio_celebrity/public/p1537890386.77.jpg",
    "name_en": "Robin Wright",
    "name": "罗宾·怀特",
    "alt": "https://movie.douban.com/celebrity/1002676/",
    "id": "1002676"
  },
  {
    "avatars":
        "https://img9.doubanio.com/view/celebrity/s_ratio_celebrity/public/p26315.jpg",
    "name_en": "Gary Sinise",
    "name": "加里·西尼斯",
    "alt": "https://movie.douban.com/celebrity/1031848/",
    "id": "1031848"
  }
];