前言
- Flutter 作為Google出品的一個新興的跨平臺移動客戶端UI開發(fā)框架增蹭，正在被越來越多的開發(fā)者和組織使用，包括阿里的咸魚霎奢、騰訊的微信等饼灿。
示意圖
示意圖
今天碍彭，我主要講解Flutter中布局方面的組件Widget，類型如下硕旗，希望你們會喜歡。
示意圖
1. 邊距屬性
主要包括：padding创译、margin墙基、alignment
1.1 padding屬性
- 簡介：內邊距残制，即本Widget邊框和內容區(qū)之間距離
- 示意圖
- 使用：采用EdgeInsets類
// 1. 所有方向均使用相同數(shù)值的填充初茶。
all(double value)
// 示例：4個方向各添加16像素補白
padding: EdgeInsets.all(16.0)
// 2. 分別指定四個方向的不同填充
fromLTRB(double left, double top, double right, double bottom)
// 示例：
padding: const EdgeInsets.fromLTRB(10,20,30,40)
// 3. 設置具體某個方向的填充(可以同時指定多個方向)
only({left, top, right ,bottom })
// 示例：在左邊添加8像素補白
padding: const EdgeInsets.only(left: 8.0),
// 4. 設置對稱方向的填充
// vertical：針對垂直方向top、bottom
// horizontal：針對橫向方向left、right
symmetric({ vertical, horizontal })
// 示例：垂直方向上下各添加8像素補白
padding: const EdgeInsets.symmetric(vertical: 8.0)
1.2 margin屬性
- 定義：外邊距搁宾，即本Widget與父邊框的距離
- 示意圖
- 使用：采用EdgeInsets類
// 1. 所有方向均使用相同數(shù)值的填充盖腿。
all(double value)
// 示例：4個方向各添加16像素補白
margin: EdgeInsets.all(16.0)
// 2. 分別指定四個方向的不同填充
fromLTRB(double left, double top, double right, double bottom)
// 示例：
margin：const EdgeInsets.fromLTRB(10,20,30,40)
// 3. 設置具體某個方向的填充(可以同時指定多個方向)
only({left, top, right ,bottom })
// 示例：在左邊添加8像素補白
margin：const EdgeInsets.only(left: 8.0),
// 4. 設置對稱方向的填充
// vertical：針對垂直方向top损同、bottom
// horizontal：針對橫向方向left、right
symmetric({ vertical, horizontal })
// 示例：垂直方向上下各添加8像素補白
margin：const EdgeInsets.symmetric(vertical: 8.0)
1.3 alignment
- 簡介：子Widget對齊茂卦，生效范圍：父Widget尺寸 > child Widget尺寸
- 使用
// 居中 & 各方向對齊
center
centerLeft
centerRight
// 底部對齊 & 各方向對齊
bottomCenter
bottomLeft
bottomRight
// 頂部對齊 & 各方向對齊
topCenter
topLeft
topRight
// 示例
alignment：Alignment.center
2. 基礎布局組件
主要包括：
- Container
- Row
- Column
- Expanded
- center
具體請看文章：Android Flutter：那些不可忽視的基礎布局蹄梢！
3. 列表布局組件
Flutter常用的滾動型列表組件包括：GridView組件 + ListView組件
具體請看文章：
4. 導航欄組件
主要包括：
- 頂部導航欄：TabBar + TabBarView + TabController
- 底部導航欄：BottomNavigationBar
具體請看文章：
5. 總結
- 本文全面介紹了
Flutter的布局組件使用霍比，包括邊距常用屬性、基礎布局等 - 接下來推出的文章们豌，我將繼續(xù)講解Flutter的相關知識浅妆，包括使用語法、實戰(zhàn)等凌外，感興趣的讀者可以繼續(xù)關注我的博客哦：Carson_Ho的Android博客
請點贊！因為你們的贊同/鼓勵是我寫作的最大動力摄欲！
相關文章閱讀
Android開發(fā)：最全面疮薇、最易懂的Android屏幕適配解決方案
Android開發(fā)：史上最全的Android消息推送解決方案
Android開發(fā)：最全面、最易懂的Webview詳解
Android開發(fā)：JSON簡介及最全面解析方法!
Android四大組件：Service服務史上最全面解析
Android四大組件：BroadcastReceiver史上最全面解析
歡迎關注Carson_Ho的簡書迟隅！
不定期分享關于安卓開發(fā)的干貨，追求短嗽冒、平、快添坊，但卻不缺深度箫锤。
