Flutter 组件之ListView列表、Icon图标

垂直列表可以直接定义盒子宽度,列表的宽度不生效。水平列表要定义宽度

入口文件

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

动态渲染列表for循环

 //动态渲染列表
 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循环数据

//动态渲染列表
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 构建列表

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

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

数据

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