Flutter|Flutter 零基础学习初探（三）
制作一个简单的列表视图：
首先我们在工程目录下的lib文件夹下建立一个Model文件夹，Model文件夹里面增加一个Car类。这里有个小Tips分享：当我们需要创建一个文件夹时，同时按commant + N 键。第一步是选择Package->Model 第二步选择Dart File->Car.
文章图片
屏幕快照 2019-07-01 下午2.58.53.png 【Flutter|Flutter 零基础学习初探（三）】
文章图片
屏幕快照 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,
),
推荐阅读
- SSM框架学习|SSM框架学习——SpringBoot之基础配置
- 面试|【云原生 从零开始学Docker】三、Docker实战之安装Nginx和Tomcat
- 诚实是为人处世的基础
- 认识Java底层操作系统与并发基础
- 读书笔记|《HTTP/2 基础教程》 阅读摘要
- 基础动画|基础动画 .hide() .show() .stop()
- 从零开始实现lmax-Disruptor队列（六）Disruptor|从零开始实现lmax-Disruptor队列（六）Disruptor 解决伪共享、消费者优雅停止实现原理解析
- java基础学习|mybatis-plus的介绍和使用
- 零售|名创优品被做空，到底冤不冤？
- {调取该文章的TAG关键词}|主动撤销标普评级的合景泰富：去年至今“零违约 零展期”