前言
Flutter 作為Google出品的一個(gè)新興的跨平臺(tái)移動(dòng)客戶端UI開發(fā)框架，正在被越來(lái)越多的開發(fā)者和組織使用，包括阿里的咸魚、騰訊的微信等。
示意圖
示意圖
今天，我主要講解Flutter中布局方面的邊距屬性：padding、margin、alignment，希望你們會(huì)喜歡。
1. padding屬性
1.1 簡(jiǎn)介
內(nèi)邊距，即本W(wǎng)idget邊框和內(nèi)容區(qū)之間距離
1.2 示意圖
1.3 具體使用
采用EdgeInsets類
// 1. 所有方向均使用相同數(shù)值的填充。
all(double value)
// 示例：4個(gè)方向各添加16像素補(bǔ)白
padding: EdgeInsets.all(16.0)
// 2. 分別指定四個(gè)方向的不同填充
fromLTRB(double left, double top, double right, double bottom)
// 示例：
padding: const EdgeInsets.fromLTRB(10,20,30,40)
// 3. 設(shè)置具體某個(gè)方向的填充(可以同時(shí)指定多個(gè)方向)
only({left, top, right ,bottom })
// 示例：在左邊添加8像素補(bǔ)白
padding: const EdgeInsets.only(left: 8.0),
// 4. 設(shè)置對(duì)稱方向的填充
// vertical：針對(duì)垂直方向top、bottom
// horizontal：針對(duì)橫向方向left、right
symmetric({ vertical, horizontal })
// 示例：垂直方向上下各添加8像素補(bǔ)白
padding: const EdgeInsets.symmetric(vertical: 8.0)
2. margin屬性
2.1 簡(jiǎn)介
外邊距，即本W(wǎng)idget與父邊框的距離
2.2 示意圖
2.3 簡(jiǎn)介
采用EdgeInsets類
// 1. 所有方向均使用相同數(shù)值的填充。
all(double value)
// 示例：4個(gè)方向各添加16像素補(bǔ)白
margin: EdgeInsets.all(16.0)
// 2. 分別指定四個(gè)方向的不同填充
fromLTRB(double left, double top, double right, double bottom)
// 示例：
margin：const EdgeInsets.fromLTRB(10,20,30,40)
// 3. 設(shè)置具體某個(gè)方向的填充(可以同時(shí)指定多個(gè)方向)
only({left, top, right ,bottom })
// 示例：在左邊添加8像素補(bǔ)白
margin：const EdgeInsets.only(left: 8.0),
// 4. 設(shè)置對(duì)稱方向的填充
// vertical：針對(duì)垂直方向top、bottom
// horizontal：針對(duì)橫向方向left、right
symmetric({ vertical, horizontal })
// 示例：垂直方向上下各添加8像素補(bǔ)白
margin：const EdgeInsets.symmetric(vertical: 8.0)
3. alignment
3.1 簡(jiǎn)介
子Widget對(duì)齊，生效范圍：父Widget尺寸 > child Widget尺寸
3.2 具體使用
// 居中 & 各方向?qū)R
center
centerLeft
centerRight
// 底部對(duì)齊 & 各方向?qū)R
bottomCenter
bottomLeft
bottomRight
// 頂部對(duì)齊 & 各方向?qū)R
topCenter
topLeft
topRight
// 示例
alignment：Alignment.center
總結(jié)
- 本文全面介紹了
Flutter常用的邊距屬性：padding、margin、alignment
- 接下來(lái)推出的文章，我將繼續(xù)講解Flutter的相關(guān)知識(shí)，包括使用語(yǔ)法、實(shí)戰(zhàn)等，感興趣的讀者可以繼續(xù)關(guān)注我的博客哦：Carson_Ho的Android博客
請(qǐng)點(diǎn)贊！因?yàn)槟銈兊馁澩?鼓勵(lì)是我寫作的最大動(dòng)力！
相關(guān)文章閱讀
Android開發(fā)：最全面、最易懂的Android屏幕適配解決方案
Android開發(fā)：史上最全的Android消息推送解決方案
Android開發(fā)：最全面、最易懂的Webview詳解
Android開發(fā)：JSON簡(jiǎn)介及最全面解析方法!
Android四大組件：Service服務(wù)史上最全面解析
Android四大組件：BroadcastReceiver史上最全面解析
歡迎關(guān)注Carson_Ho的簡(jiǎn)書！
不定期分享關(guān)于安卓開發(fā)的干貨，追求短、平、快，但卻不缺深度。
