flutter布局有点难受（对于一个写了多年css的我来说是这样的），所以我会尽量把文章也写的详细一点，方便大家参考和快速上手。
1、页面头部设置
通过修改
appBar: new AppBar(
title: new Text('我是头部'),
)
image.png
2、container使用
image.png
1.屏幕宽高获取：final oSize=window.physicalSize（oSize是我自己起的）2.方式：宽-> oSize.width 高-> oSize.height3.此container还包含了一个Text标签（最后一行就是）
3、row(横向布局)
WeChate3e374d27594ed4fab8c5b98de1a5acc.png
其中padding和margin设置方式有两种：
const EdgeInsets.all(8.0)(上下左右统一8.0)
margin: EdgeInsets.fromLTRB(5,0,0,0)(左上右下：5,0,0,0)
当不加new Center（center为上下左右居中） 时，你会发现样式变了：
WeChataf2a1ef30f0f1a0b4848915b7be9403f.png
4、column(竖向布局)
竖向布局跟横向差不多，只需要将最外层的body:Row改成body:Column，就可以了。
5、Image(本地引入、网络图片)
image.png
引入本地图片时，需先建立文件，并且在pubspec.yaml里面进行设置
image.png
图片圆角:下面有代码：
一般模式：
image.png
Card(
shape: RoundedRectangleBorder(
borderRadius: BorderRadiusDirectional.circular(20)),
clipBehavior: Clip.antiAlias,
child: Image.asset(
"images/1.jpg",
width: double.maxFinite,
),
),
背景图模式：
image.png
Container(
decoration: ShapeDecoration(
image: DecorationImage(
image: AssetImage("images/1.jpg"),
fit: BoxFit.fitWidth),
shape: RoundedRectangleBorder(
borderRadius: BorderRadiusDirectional.circular(50))),
width: oSize.width,
height: 200,
child: Align(
child: Padding(
padding: const EdgeInsets.all(8.0),
child: Text(
"Container decoration实现圆角(radius = 20)",
style: TextStyle(color: Colors.white),
),
),
alignment: Alignment.bottomCenter,
),
)
6、listView使用
少量数据是直接这样使用就行
image.png
内容正在补充中
