flutter|flutter 页面布局及标签-入门篇 flutter页面布局及标签-入门篇

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设置方式有两种： 【flutter|flutter 页面布局及标签-入门篇】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使用少量数据是直接这样使用就行