Flutter Container使用

Table of Contents

Table of Contents

本篇文章中,初步嘗試使用了Flutter中時常使用的Widget:「Container」。


成果


如下圖所示,針對Container中的一些常用屬性Padding﹑Margin﹑Transform,做了一些調整測試。


Container_sample


Container


在官方的說明文件中,對Container這個Widget有下面這樣的描述。

A convenience widget that combines common painting, positioning, and sizing widgets.

由此可知,Container Widget裡面包含著繪製﹑位置﹑設定﹑大小處理的Widget。是個在設計UI介面時相當常見的Widget。 下面,讓我們來看看一下Container的基本設定以及屬性。

Container(
  width: 100,
  height: 100,
  constraints: new BoxConstraints.tight(Size(100, 100)),
  margin: 10.0,
  padding: 10.0,
  // color: Colors.red, //跟decoration一起使用
  decoration: BoxDecoration(...),
  transform: Matrix4,rotationZ(0.1),
  alignment: Alignment.center,
  child: ...,
)

從屬性上來看,這裡有大小的設定(width、height、constraints)、與外部UI的間隔設定(Margin)、内部UI間隔設定(Padding)、背景色和背景圖設定(decoration), 這些屬性都可以讓我們來做調整設定。

必須注意一點的是,color跟decoration一起被使用的話會發生錯誤。解決方法是,color的值要在decoration裡設定 而具體原因可以觀察Container Widgetの原始碼得知。 原始碼中還有以下的代碼,從中可以發現在內部裡設置的color值其實也是透過decoration來做處理的。

decoration = decoration ?? (color != null ? BoxDecoration(color: color) : null),


例子


本次成果的例子中,最主要的程式碼如下。


double paddingValue = 0.0;
double marginValue = 0.0;
double bcW = 100.0;
double bcH = 50.0;
var alignment = Alignment.center;
var rad = 0.0;

...

Container(
  padding: EdgeInsets.all(paddingValue),
  margin: EdgeInsets.all(marginValue),
  constraints: new BoxConstraints.tight(Size(bcW, bcH)
  ),
  decoration: new BoxDecoration(
    border: new Border.all(width: 2.0, color: Colors.red),
    color: Colors.grey,
    borderRadius: new BorderRadius.all(new Radius.circular(20.0)),
  ),
  alignment: alignment,
  child: new Text(
      'HelloWorld',
      style: TextStyle(color: Colors.black)),
  transform: new Matrix4.rotationZ(rad),
),

這裡把想要做調整的值參數化,好讓我在程式運行中可以隨時調整看結果。

Padding調整:

container_padding


感想


嘗試過幾項參數調整後發現,這是一個相當方便好用的Widget,可以使用相當多的場合中。 個人大致上整理的一下Container的使用場景:

  • 想要設置背景色或是背景圖的時候
  • 想要調整Margin、Padding時候
  • 想要配置邊框的時候
  • 對內部UI的位置要做調整時

當然,以上的場景不一定非要用Container才能做到,但我想使用一個Container的話能很輕鬆解決上面的需求,是個簡潔便利的方案。


#参考

https://api.flutter.dev/flutter/widgets/Container-class.html