flutter【11】組件--container

作用

container能夠方便地對組件進行繪製、定位和設定尺寸大小。

構造過程

1. 使用 padding 包圍child
2. 應用附加約束，如寬高
3. 添加 margin

繪製過程

1. 應用變換（transform）
2. 添加裝飾（decoration）以填充padding
3. 繪製child
4. 繪製前景裝飾（foregroundDecoration），仍然填充padding

尺寸控制

• 沒有children，container會儘可能的大
• 沒有children，但是傳進來的約束爲 unbounded，container會儘可能的小
• 有children，container會根據children的大小調整自己
• container的width、height以及其他構造方法中的約束參數可以覆蓋上述約定。

佈局行爲

container 會嘗試按照以下順序進行佈局：

1. 對齊
2. 調整自身大小適應child
3. 採用寬高和約束
4. 擴張自身以填充parent
5. 儘可能的小

具體情況如下所示：

1. 沒有child，沒有寬高，沒有約束，但是parent提供了unbounded約束，則container會儘可能地大。
2. 沒有child，沒有對齊，但是有寬高和約束，container會根據自身和parent的約束儘可能的小。
3. 沒有child，沒有寬高，沒有約束，沒有對齊，但是parent提供了unbounded約束，則container會擴張，在parent的約束下填充parent。
4. 有對齊，parent提供了unbounded約束，則container會調整自己的大小包圍child。
5. 有對齊，parent提供了bounded約束，則container會嘗試擴張填充parent，然後根據對齊調整child的位置。
6. 有child，沒有寬高，沒有約束，沒有對齊，則container將其parent的約束傳遞給child，然後調整自身大小以適應child。
7. margin 和 padding 屬性也會影響佈局，裝飾decoration會隱式的增加 padding 。

代碼示例

具體的屬性和方法使用參考官方參考文檔

Container(
  constraints: BoxConstraints.expand(
    height: Theme.of(context).textTheme.display1.fontSize * 1.1 + 200.0,
  ),
  padding: const EdgeInsets.all(8.0),
  color: Colors.teal.shade700,
  alignment: Alignment.center,
  child: Text('Hello World', style: Theme.of(context).textTheme.display1.copyWith(color: Colors.white)),
  foregroundDecoration: BoxDecoration(
    image: DecorationImage(
      image: NetworkImage('https://www.example.com/images/frame.png'),
      centerSlice: Rect.fromLTRB(270.0, 180.0, 1360.0, 730.0),
    ),
  ),
  transform: Matrix4.rotationZ(0.1),
)