Dart基本语法学的差不多了以后就可以开始学习Flutter了，就像OC学完了就可以开发iOS一样，触类旁通，Flutter开发需要掌握的基本技能无外乎也是那几个东西，界面布局，网络请求，数据加载，第三方库的使用，学会这些基本可以完成一些简单的Flutter模块的开发了，写文章是为了记录，学习语言最主要的还是得多敲多练，在实战中磨炼才是王道。
初步采用一个demo然后分析其中的一些知识点来慢慢熟悉一些Widget的用法，具体的Widget没有用到的属性就不做展开了，毕竟属性有很多，后面见的多了估计就能举一反三了，这次的demo依然来自于coderwhy大神的文章，我感觉他讲的蛮不错的，在这里可以推荐一下。
StatelessWidget
主要通过一个StatelessWidget的小demo来记录一些知识点，先来张效果图：
下面是主要代码：
import 'package:flutter/material.dart';
main(List<String> args) {
runApp(MyApp());
}
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
home: Scaffold(
appBar: AppBar(
title: Text('商品列表')
),
body: MyContent()
),
);
}
}
class MyContent extends StatelessWidget {
@override
Widget build(BuildContext context) {
return ListView(
children: [
ContentCell("apple1",'第一个',"https://tva1.sinaimg.cn/large/006y8mN6gy1g72j6nk1d4j30u00k0n0j.jpg"),
SizedBox(
height: 3,
),
ContentCell("apple2",'第二个',"https://tva1.sinaimg.cn/large/006y8mN6gy1g72imm9u5zj30u00k0adf.jpg"),
SizedBox(
height: 3,
),
ContentCell("apple3",'第三个',"https://tva1.sinaimg.cn/large/006y8mN6gy1g72imqlouhj30u00k00v0.jpg")
],
);
}
}
class ContentCell extends StatelessWidget {
final title;
final desc;
final imageURL;
ContentCell(this.title, this.desc, this.imageURL);
@override
Widget build(BuildContext context) {
return Container(
padding: EdgeInsets.all(5),
decoration: BoxDecoration(
border: Border.all(
width: 5,
color: Colors.blueGrey
)
),
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Text(title,
style: TextStyle(
fontSize: 25,
color: Colors.redAccent,
fontWeight: FontWeight.bold
)
),
SizedBox(
height: 5,
),
Text(desc,
style: TextStyle(
fontSize: 15,
color: Colors.green
)
),
SizedBox(
height: 5,
),
Image.network(imageURL)
],
),
);
}
}
整体结构：
这个demo的整体结构是外边一个ListView，里面每一个child都是一个Colum，每一个Colum包含3行，第一行是标题，第二行是副标题，第三行是个图片，然后每个Colum的child都有个边框，标题和副标题之间，Column的每个child之间都有一个间距。
包含的知识点：
ListView 列表Widget，children属性接收一个数组，数组里面的元素就是列表要展示的对象，类似UITableView，不过比TableView好用太多太多太多了。
-
Column 垂直布局Widget，和ListView一样也有一个children属性，但和ListView的区别在于Column不能滚动，当子视图超过屏幕范围的时候会出现" RenderFlex overflowed"的警告，大概是长这个样子：
overflowed
Column可以设置crossAxisAlignment，意思是交叉轴的对齐方式，我这个例子里用 CrossAxisAlignment.start来设置title和subTitle是左对齐，这是一个枚举，可以设置不同的对齐方式，至于交叉轴和主轴的概念后面讲到Flex布局的时候再细讲。
Container 容器Widget，padding属性可以传入EdgeInsets.all(5)来设置内边距，decoration属性传入BoxDecoration设置边框，类似于UIView的感觉，不过这是一个加强版的UIView。
SizeBox，设置间距Widget，width和height可以设置间距的宽度和高度。
Image.network(imageURL)，这个是Flutter为开发者提供的一个可以自带网络下载图片功能的Image，是不是比iOS加载一个网络图片又方便了太多太多太多了。
Text，展示文字Widget，在计数器案例中已经见过了，类似于一个加强版的UILabel，通过style来设置文字的样式。
参考资料：
Flutter教程
