1:Flutter 的 布局
1.1概述:
1：Flutter 布局有幾個對應(yīng)的類：**Column**-列 **Row**--行 **Container**--容器 **Expanded**--拓展 ， ListView--豎直可滑動 Card--卡片
2：Flutter 布局原子布局實體: Text--文本 Image--圖片 Icon--圖標(biāo) Color 等
1.2總體 flutter 中的布局 是以原子布局實體為填充物膳算，根據(jù)行布局方式 還是 列布局方式 座硕，以及容器內(nèi)邊距還是外邊距，各個子布局是否等分 flex,還是整體的布局 豎直方向上設(shè)備高度不夠考慮是否可以滑動涕蜂，進行最終的組合华匾！
1.3 與android之間的比較: 相對android布局，flutter 布局 寫起來更方便机隙，代碼結(jié)構(gòu)層次分明蜘拉，雖說布局和業(yè)務(wù)混合在一起，習(xí)慣android 布局編程方式有鹿，可能一開始 flutter布局方式 不太習(xí)慣旭旭，但是 慢慢適應(yīng)就好了。
2詳細(xì)介紹Flutter布局實體:
2.1----Container:
1:是一個容器布局實體葱跋，如果布局中需要 margin-外邊距持寄，padding-內(nèi)邊距
2.可以指定容器的width 和 height--高度，以及容器內(nèi)容的對齊方式娱俺，top,center,bottom三種方式
3:以及內(nèi)部的填充顏色 color
4:child 內(nèi)部一個填充布局實體
總之在布局中需要上面三種 可以外層嵌套 Container 布局
2.2---Expanded 可拓展
1:在布局中 需要對整體幾個模塊之間 需要等分橫向 和 豎向 的空間 根據(jù)flex屬性
2:根據(jù)指定的flex 值稍味，尤其對圖片布局原子實體，能夠根據(jù)分給子布局節(jié)點的空間(橫向距離空間)
能夠給定的橫向距離荠卷，保證不失 寬高比例情況下 進行顯示圖片模庐！
2.3---ListView 豎向可滑動*
1:通過填充各個 豎直方向的子布局實體 實現(xiàn)當(dāng)整體布局的高度 超過 設(shè)備的高度時，能夠滑動布局
2:屬性 children 能夠容納 多個子節(jié)點
2.4---Card 卡片布局
1:效果是 將內(nèi)部的child 布局具備卡片的效果油宜。
2.5---Row行布局:
1:可以內(nèi)置 mainAxisAlignment 赖欣，crossAxisAlignment 進行對齊子項。（spaceEvenly验庙，spaceBetween,sapceAround）
2:對于行(Row)來說，主軸是水平方向社牲，橫軸垂直方向
3:可以內(nèi)置 多個子節(jié)點 children
2.6---Column列布局
1:可以內(nèi)置 mainAxisAlignment 粪薛，crossAxisAlignment 進行對齊子項。（spaceEvenly搏恤，spaceBetween,sapceAround）
2:對于列(Column)來說违寿，主軸是垂直方向，橫軸水平方向
3:可以內(nèi)置 多個子節(jié)點 children
3詳細(xì)介紹Flutter原子實體:
3.1 Text文本:
1: 樣式中文本顯示 都用的Text封裝熟空，可以定義一個TextStyle 樣式的實體 多個種類的文本共用藤巢。如下:
style: TextStyle(
fontSize: Adapt.px(30), //文本大小
color: Colors.black, //顏色
fontWeight: FontWeight.w300, //用于繪制文本的字形的粗細(xì)
fontFamily: 'Roboto', //字體的家族
letterSpacing: 0.5, //每個文本之間的空格
),
3.2 Image 圖片封裝:
1:先在pubspec.yaml 文件中的 定義 圖片資源路徑:
flutter:
assets:
- images/lake.jpg
- images/nv_1.jpg
- images/nv_2.jpg
- images/nv_3.jpg
- images/nv_4.jpg
- images/nv_5.jpg
- images/nv_6.jpg
- images/1.png
//引入本地圖片的對象
Image.asset("images/1.png",height: Adapt.px(800),);
3.3 Icon圖標(biāo)的封裝
1:實體引入 icon的樣式 以及對應(yīng)的顏色
//餐館的樣式 圖標(biāo)的顏色
Icon(Icons.restaurant,color:Colors.green[500]),
