Flutter学习笔记--ListView的学习

1. 使用ListView，引用flutter自带的图标制作一个简单的列表
   
   body中引用 ListView()
   children调用新的widget，然后new ListTile
   使用leading 创建新的title前的样式：Icons.perm_camera_mic打开照相机图标
   后面引入title: new Text()
   /类似的多放几条
   代码：`import ‘package:flutter/material.dart’;
   void main()=> runApp(MyApp());
   class MyApp extends StatelessWidget{
   @override
   Widget build(BuildContext context){
   return MaterialApp(
   title: ‘开心Flutter Demo’,
   home: Scaffold(
   appBar: new AppBar(title:new Text(‘开心Flutter Demo’)),
   body: new ListView( //列表形式
   children:[
   new ListTile(
   leading:new Icon(Icons.perm_camera_mic),
   title: new Text(‘拍个照吧’),
   ),
   new ListTile(
   leading:new Icon(Icons.add_call),
   title: new Text(‘打电话吧’),
   ),
   new ListTile(
   leading:new Icon(Icons.access_time),
   title: new Text(‘看看时间’),
   ),
   ]
   ),

   ),
   );
   }
   }`
   可以看出这样的效果：

2. ListView横向列表
   使用scrollDirection:Axis.horizontal，这里Axis.horizontal是横向的意思，Axis.vertical为纵向的列表；
   然后使用组件创建条目数组
   
   代码如下：
   import ‘package:flutter/material.dart’;
   void main()=> runApp(MyApp());
   class MyApp extends StatelessWidget{
   @override
   Widget build(BuildContext context){
   return MaterialApp(
   title: ‘开心Flutter Demo’,
   home: Scaffold(
   appBar: new AppBar(title:new Text(‘开心Flutter Demo’)),
   body: Center(
   child:Container(
   height:200.0,
   child: new ListView(
   scrollDirection:Axis.horizontal,//横向列表
   children:[
   new Container(
   width: 180.0,
   color: Colors.lightGreen[200],
   ),
   new Container(
   width: 180.0,
   color: Colors.orangeAccent,
   ),
   new Container(
   width: 180.0,
   color: Colors.lightBlue,
   ),
   new Container(
   width: 180.0,
   color: Colors.purpleAccent,
   )
   ],
   ),
   ),
   )
   ),

);
}
}
3.创建动态列表：

代码如下import ‘package:flutter/material.dart’;
void main()=> runApp(MyApp(
items: new List.generate(1000,(i)=>“Item $i”)//在myapp中输入要传入的参数，创建动态列表
));
class MyApp extends StatelessWidget{
final Listitems; //final 为创建列表的最终值
MyApp({Key key,@required this.items}):super(key:key);//@required代表必须要传入的值 super为函数的父类

@override
Widget build(BuildContext context){
return MaterialApp(
title: ‘开心Flutter Demo’,
home: Scaffold(
appBar: new AppBar(title:new Text(‘开心Flutter Demo’)),
body: new ListView.builder( //创建listview，
itemCount:items.length, //item的数量为列表的宽度
itemBuilder: (contest,index){ //创建元素
return new ListTile(
title:new Text(’${items[index]}’) //为items赋值
);

      }
    )
)
);

}
}
展示的结果：可以一直往下滑到一千行