flutter【11】元件--container

摘要： 作用 container能夠方便地對元件進行繪製、定位和設定尺寸大小。 構造過程 使用 padding 包圍child 應用附加約束，如寬高 新增 margin 繪製過程 應用變換（tra...

作用

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),
)