Flutter 樣式基礎之 Padding

YYDev發表於2019-09-08
Flutterpadding

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。

作者

Flutter 樣式基礎之 Padding
xiaosongzeem

相關文章