垂直列表可以直接定义盒子宽度,列表的宽度不生效。水平列表要定义宽度
入口文件
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"
}
];