flutter学习三 图片组件和列表组件

Image.network 远程图片

  child: Container(
    child: Image.network(
      "图片地址",
      fit: BoxFit.cover,//填充方式
      // alignment: Alignment.bottomRight//对齐方式
    ),
    height: 300.0,
    width: 400.0,
    decoration: BoxDecoration(
      color: Colors.yellow
    ),
  )

实现圆形图片的两种方法
一BorderRadius

  child: Container(
    height: 300.0,
    width: 300.0,
    decoration: BoxDecoration(
      color: Colors.yellow,
      borderRadius: BorderRadius.circular(150),
      image: DecorationImage(
        image: NetworkImage('图片地址'),
        fit: BoxFit.cover
        )
    ),
  )

二ClipOval

  child: Container(
    child: ClipOval(
      child: Image.network('远程图片路径')
    )
  )

Image.asset， 本地图片
1，在根目录新建images文件夹，里面新建2.0x和3.0x文件夹
2，打开pubspec.yaml的assets文件加载地址，加载相关图片
注意：本地图片加载的时候有bug，需要重新flutter run来重启

  child: Container(
    child: Image.asset(
      "images/timg.jpg",
      fit: BoxFit.cover
    ),
    width: 100,
    height: 100
  )

列表组件
ListView与
ListView.builder(）

child: ListView( 
	children: <Widget>[
		ListTile( 
		leading: Icon(Icons.phone), 
		title: Text("this is list",style: TextStyle(fontSize: 28.0),), 
		subtitle: Text('this is list this is list'), 
		),
	],
 ),

ListView.builder(
	 itemCount:this.list.length, 
	 itemBuilder:(context,index){ 
		 // print(context); 
		 return ListTile(
			 leading: Icon(Icons.phone), 
			 title: Text("${list[index]}"), 
		 );
	 }, 
 );

动态列表
listData数据

List listData=[
	{
		"title":"",
		"author":"".
		"imageUrl":""
	}
]

//自定义方法
Widget _getListData(context,index){
	return ListTile(
		title: Text(listData[index]["title"]),
		leading:Image.network(listData[index]["imgUrl"]),
		subtitle:Text(listData[index]["xxx"])
	);
}

Widget build(BuildContext context) {
	return ListView.builder(
		itemCount:listData.length,
		itemBuilder:_getListData
	);
}