制作一个简单的列表视图：
首先我们在工程目录下的lib文件夹下建立一个Model文件夹，Model文件夹里面增加一个Car类。这里有个小Tips分享：当我们需要创建一个文件夹时，同时按commant + N 键。第一步是选择Package->Model 第二步选择Dart File->Car.
屏幕快照 2019-07-01 下午2.58.53.png
屏幕快照 2019-07-01 下午2.57.19.png
以上两个步骤我们做完了以后，首先定义Car模型,里面包含了模型数组后面会用到：
class Car{
//属性调用 创建一个构造函数
const Car({
//注意这里是用,不是; 用this代表可选类型
this.name,
this.imageUrl
});
final String name;
final String imageUrl;
}
//模型数组
final List datas = [
Car(
name: '保时捷918 Spyder',
imageUrl:
'https://upload-images.jianshu.io/upload_images/2990730-7d8be6ebc4c7c95b.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240',
),
Car(
name: '兰博基尼Aventador',
imageUrl:
'https://upload-images.jianshu.io/upload_images/2990730-e3bfd824f30afaac?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240',
),
Car(
name: '法拉利Enzo',
imageUrl:
'https://upload-images.jianshu.io/upload_images/2990730-a1d64cf5da2d9d99?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240',
),
Car(
name: 'Zenvo ST1',
imageUrl:
'https://upload-images.jianshu.io/upload_images/2990730-bf883b46690f93ce?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240',
),
Car(
name: '迈凯伦F1',
imageUrl:
'https://upload-images.jianshu.io/upload_images/2990730-5a7b5550a19b8342?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240',
),
Car(
name: '萨林S7',
imageUrl:
'https://upload-images.jianshu.io/upload_images/2990730-2e128d18144ad5b8?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240',
),
Car(
name: '科尼赛克CCR',
imageUrl:
'https://upload-images.jianshu.io/upload_images/2990730-01ced8f6f95219ec?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240',
),
Car(
name: '布加迪Chiron',
imageUrl:
'https://upload-images.jianshu.io/upload_images/2990730-7fc8359eb61adac0?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240',
),
Car(
name: '轩尼诗Venom GT',
imageUrl:
'https://upload-images.jianshu.io/upload_images/2990730-d332bf510d61bbc2.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240',
),
Car(
name: '西贝尔Tuatara',
imageUrl:
'https://upload-images.jianshu.io/upload_images/2990730-3dd9a70b25ae6bc9?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240',
)
];
现在进入正题，首先我们创建一个简单的ListView，回到主工程中去:
void main() => runApp(App());
//一个Widget就是一个类
class MyWidget extends StatelessWidget{
//渲染界面 build
@override
//自定义属性 字体颜色 字号 字体加粗呀
final _textStyle = TextStyle(color: Colors.red,
fontSize: 40,
fontWeight: FontWeight.bold);
Widget build(BuildContext context) {
// TODO: implement build
return Center(
child: Text(
'Hello Flutter',textDirection: TextDirection.ltr,
style: _textStyle,
),
);
}
}
//定义一个类方法 （简便写法直接stl就会出现快速构建）
class App extends StatelessWidget {
@override
Widget build(BuildContext context) {
//理解为视图控制器容器
return MaterialApp(
//home属性 带导航条
// home:Scaffold(
// //熟悉的感觉（navgationBar）
// appBar: AppBar(
// title: Text('Flutter demo'),
// ),
// body: MyWidget(),
// ) ,
home: Home(),
//修改导航条颜色
theme: ThemeData(
primaryColor: Colors.red
),
);
}
}
//自定义一个Home类
class Home extends StatelessWidget {
//第二步
//带_是私有的属性 自己自定义一个方法
Widget _cellForRow(BuildContext context,int index)
{
return Text('123');
}
//第一步
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text('FlutterDemo'),
),
body: ListView.builder(
//cell count
itemCount: datas.length,
//可以理解为代理方法，通过回调的方式，实现cellForRow的私有方法，这里需要说明下Flutter语言是没有section的，也就是没有组这个概念，需要自己去创建
itemBuilder: _cellForRow,
),
);
}
}
这里说两个Tips:
（1）itemBuilder: _cellForRow,
可以理解为通过回调的方式实现代理方法，实现cellForRow的私有方法。
（2）Flutter语言是没有section的，也就是没有组这个概念，需要自己去创建。
以上就会展示出一个超级简单的ListView:
屏幕快照 2019-07-01 下午3.51.55.png
下面我们开始正式布局我们的ListView，在此之前需要说下在Flutter开发中需要用到的非常重要的小部件：，可以这么理解这个小部件：
前端开发来说相当于div（flexbox进行布局）
移动端相当于一个UIView（AutoLayerout布局），所以这个小部件是非常重要的。修改我们的_cellForRow方法：
Widget _cellForRow(BuildContext context,int index)
{
// return Text('123');
//首先里面一定需要写布局
return Container(
color: Colors.white,
margin: EdgeInsets.all(10),
child: Image.network(datas[index].imageUrl),
);
}
运行结果如下：
屏幕快照 2019-07-01 下午4.16.59.png
那假如我们需要对图片进行描述呢，那这就需要引入一个布局属性：，纵向布局（对应的还有个布局就是横向布局，还有个层级布局）里面放的是需要展示的一些控件了；
class Home extends StatelessWidget {
//带_是私有的属性 自己自定义一个方法
Widget _cellForRow(BuildContext context,int index)
{
// return Text('123');
//首先里面一定需要写布局
return Container(
color: Colors.white,
margin: EdgeInsets.all(10),
//布局的是每一个Car Model需要显示的内容
child:Column(
children: [
Image.network(datas[index].imageUrl,),
//控件相互距离
SizedBox(height: 10),
Text(datas[index].name,
style: TextStyle(
fontSize: 15,
fontWeight: FontWeight.w800,
fontStyle: FontStyle.values[1]
),
),
SizedBox(height: 20,)
],
),
);
}
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text('FlutterDemo'),
),
body: ListView.builder(
//cell count
itemCount: datas.length,
//可以理解为代理方法，通过回调的方式，实现cellForRow的私有方法，这里需要说明下Flutter语言是没有section的，也就是没有组这个概念，需要自己去创建
itemBuilder: _cellForRow,
),
);
}
}
其实Flutter这门语言很高级的，小轮子完全可以根据自己需求很方便的去造，比如现在的image没有宽，高这个属性的话那么我们可以这么写：
Container(
child: Image.network(datas[index].imageUrl,),
width: 100,height: 100,
),