flutter布局有點(diǎn)難受（對(duì)于一個(gè)寫了多年css的我來說是這樣的），所以我會(huì)盡量把文章也寫的詳細(xì)一點(diǎn)，方便大家參考和快速上手。
1、頁(yè)面頭部設(shè)置
通過修改
appBar: new AppBar(
title: new Text('我是頭部'),
)
image.png
2、container使用
image.png
1.屏幕寬高獲?。篺inal oSize=window.physicalSize（oSize是我自己起的）2.方式：寬-> oSize.width 高-> oSize.height3.此container還包含了一個(gè)Text標(biāo)簽（最后一行就是）
3、row(橫向布局)
WeChate3e374d27594ed4fab8c5b98de1a5acc.png
其中padding和margin設(shè)置方式有兩種：
const EdgeInsets.all(8.0)(上下左右統(tǒng)一8.0)
margin: EdgeInsets.fromLTRB(5,0,0,0)(左上右下：5,0,0,0)
當(dāng)不加new Center（center為上下左右居中） 時(shí)，你會(huì)發(fā)現(xiàn)樣式變了：
WeChataf2a1ef30f0f1a0b4848915b7be9403f.png
4、column(豎向布局)
豎向布局跟橫向差不多，只需要將最外層的body:Row改成body:Column，就可以了。
5、Image(本地引入、網(wǎng)絡(luò)圖片)
image.png
引入本地圖片時(shí)，需先建立文件，并且在pubspec.yaml里面進(jìn)行設(shè)置
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實(shí)現(xiàn)圓角(radius = 20)",
style: TextStyle(color: Colors.white),
),
),
alignment: Alignment.bottomCenter,
),
)
6、listView使用
少量數(shù)據(jù)是直接這樣使用就行
image.png
內(nèi)容正在補(bǔ)充中
