Flutter 樣式基礎之 Padding

Padding 類

介紹

它是一個Widget，寫過前端代碼的童鞋應該都瞭解這個屬性，它就是設置內邊距屬性。經過Padding，能夠有效地在子級的四周建立空的區域，內邊距的空白區域，也是widget的一部分。

Padding的佈局分爲兩種狀況：

• 當child爲空的時候，會建立一個寬爲left+right，高爲top+bottom的區域；
• 當child不爲空的時候，Padding會將佈局的約束傳遞給child，根據設置的padding屬性，縮小child的佈局尺寸。而後Padding將本身調整到child設置了padding屬性的尺寸，在child周圍建立空白區域。

此外，須要注意的是，Flutter中並無單獨的Margin控件。在Container中雖然也有margin屬性，但咱們看看源碼關於margin的實現：

if (margin != null)
  current = new Padding(padding: margin, child: current);
複製代碼

從上面不難看出Flutter淡化了margin以及padding的區別，margin實質上也是由Padding Widget 來實現的。

設計原因

爲何要使用一個Padding Widget組件，而不是一個 Container 容器用一個Container.padding 屬性?

實際上二者的本質沒有任何區別，若是你用了Container.padding 參數，那麼 Container 實際上也是會幫你建立一個簡單的 Padding Widget。Padding自己是很是簡單的，基本上須要間距的地方，它都可以使用；若是在單一的內間距場景，使用Padding比Container的成本要小一些，由於Container裏面除了Padding，它還包含了不少個widget。Padding可以實現的，Container都可以實現，只不過，Container提供的東西更多。Container 將許多更簡單的小部件組合到一個 package 去進去了。

實際上，Flutter中的大多數Widgets都只是其餘更簡單的Widgets的組合。組合而不是繼承,這是是構建Widgets的主要機制。

繼承關係

Object -> Diagnosticable -> DiagnosticableTree -> Widget -> RenderObjectWidget -> SingleChildRenderObjectWidget -> Padding

構造函數

Padding（{ Key key， @ required EdgeInsetsGeometry padding， Widget child }） 建立一個攜帶子項的Widget，傳入參數不爲空，不然會報異常。

const Padding({
  Key key,
  @required this.padding,
  Widget child,
}) : assert(padding != null),
     super(key: key, child: child);
複製代碼

經常使用屬性

• padding → EdgeInsetsGeometry

  • 插入子級的邊距空間值。
  • 參數類型爲EdgeInsetsGeometry，它是EdgeInsets以及EdgeInsetsDirectional的基類。在實際使用中若不涉及到國際化，例如適配阿拉伯地區等，則通常都是使用 EdgeInsets。從EdgeInsetsDirectional的命名咱們能夠推斷，它跟方向相關。它的四個邊距不限定上下左右，而是根據方向來定的，這樣能夠作國際化 適配。（和Android 的 paddingLeft/paddingStart 思想一致）
  • EdgeInsets，該類是用於描述 padding 的屏幕尺寸相關的類。

• child → widget

  • final, inherited
  • 子級

• hashCode → int

  • 此對象的哈希碼。
  • read-only, inherited

• key → Key

  • 控制一個小部件如何替換樹中的另外一個小部件。[...]
  • final, inherited

• runtimeType → 類型

  • 表示對象的運行時類型。
  • read-only, inherited

經常使用方法

• createRenderObject（BuildContext context） → RenderPadding

  建立一個RenderObject 類，RenderObjectWidget表示的實例。

• debugFillProperties（DiagnosticPropertiesBuilder properties） →void

  添加與節點關聯的其餘屬性。

• updateRenderObject（BuildContext context， covariant RenderPadding renderObject） →void

  顧名思義該方法用於將此RenderObjectWidget描述的配置，複製到給定的RenderObject 對象。該類型與此對象的createRenderObject返回的類型相同。

使用示例：

Padding(
  padding: EdgeInsets.all(10.0),
  child: const Card(child: Text('Flutter Padding Example')),
)
複製代碼

總結

Padding 自己算是很是簡單的Widget了，它主要用做設置子控件的內邊距。Padding 能實現的，Container都可以實現。只不過，Container組合了更多的簡單Widget進去，平時開發中咱們能夠根據實際須要來使用 Padding 或者 Container。

做者

xiaosongzeem