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.height

3.此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

内容正在补充中