Un componente de lista ListView de trémolo, icono Icono

cuadro de lista se puede definir la anchura directamente vertical, el ancho de la lista no entra en vigor. Para definir la anchura de la lista horizontal

archivo de entradas

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(),
      ),
    );
  }
}

lista de reproducción dinámica para la circulación

 //动态渲染列表
 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(),),
      );
    ));
  }
}

mapear datos cíclicos

//动态渲染列表
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(),),
      );
    ));
  }
}

crear listas de ListView.builder

  //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,
     );
  }
}

Rejilla rejilla uso de diseño similar al 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(),
    );
  }
}

datos

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"
  }
];