Flutter深入淺出元件篇---ConstrainedBox、BoxConstraints、UnconstrainedBox

Jimi發表於2021-08-31
Flutter元件AI

ConstrainedBox

ConstrainedBox介紹

主要目的是對其子元件新增額外的約束，有時候子元件需要自動調整寬度和高度，以達到最佳的適配設計，那麼這時候使用ConstrainedBox 是最佳的選擇。

示例程式碼

本文中很多效果都沒有截圖，可下載原始碼執行專案 原始碼地址，或者通過視訊教程檢視 視訊教程地址

ConstrainedBox屬性和說明

ConstrainedBox 只有兩個屬性，constraints 用來對子元件新增額外約束，child 被約束的子元件。

欄位屬性描述
constraintsBoxConstraints對子元件新增額外約束
childWidget被約束的子元件

ConstrainedBox基本使用

ConstrainedBox 的使用非常簡單，接下來我們重點來關注BoxConstraints

ConstrainedBox(
  constraints: BoxConstraints(
    maxWidth: 100,
    minHeight: 30,
  ),
  child: Container(
    color: Colors.orangeAccent,
    child: Text("ConstrainedExample"),
  ),
)
複製程式碼

BoxConstraints

BoxConstraints介紹

BoxConstraints對 RenderBox 佈局的不可變佈局約束，而 RenderBox 是二維笛卡爾座標系中的渲染物件，想深入瞭解 RenderBox

BoxConstraints屬性和說明

總共四個屬性

欄位屬性描述
minWidthdouble最小寬度，預設0.0
maxWidthdouble最大寬度，預設double.infinity
minHeightdouble最小高度，預設0.0
maxHeightdouble最大高度，預設double.infinity

BoxConstraints基本使用

ConstrainedBox(
  constraints: BoxConstraints(
    minWidth: 100,
    maxWidth: 200,
    minHeight: 30,
    maxHeight: 100
  ),
  child: Container(
    color: Colors.orangeAccent,
    child: Text("ConstrainedExample"),
  ),
)
複製程式碼

BoxConstraints方法和說明

1、tight()

容器的寬度和高度取決於傳進來的size，設定多大就是多大。

BoxConstraints.tight(Size size)
    : minWidth = size.width,
      maxWidth = size.width,
      minHeight = size.height,
      maxHeight = size.height;
複製程式碼

2、tightFor()

寬度和高度是可選引數，在不傳入的情況下能大則大，在傳入引數時設定多大就是多大。

const BoxConstraints.tightFor({
  double? width,
  double? height,
}) : minWidth = width ?? 0.0,
     maxWidth = width ?? double.infinity,
     minHeight = height ?? 0.0,
     maxHeight = height ?? double.infinity;
複製程式碼

3、tightForFinite()

寬度和高度預設給最大值，在不傳引數的時候能大則大，在傳入引數的時候能緊則緊。

const BoxConstraints.tightForFinite({
  double width = double.infinity,
  double height = double.infinity,
}) : minWidth = width != double.infinity ? width : 0.0,
     maxWidth = width != double.infinity ? width : double.infinity,
     minHeight = height != double.infinity ? height : 0.0,
		maxHeight = height != double.infinity ? height : double.infinity;
複製程式碼

4、loose()

最大寬度和最大高度限定於傳入的size，未超出能緊則緊

BoxConstraints.loose(Size size)
  : minWidth = 0.0,
		maxWidth = size.width,
		minHeight = 0.0,
		maxHeight = size.height;
複製程式碼

5、expand()

寬度和高度是可選引數，在不傳入時依賴於父元件, 佔用父元件剩餘的全部空間，在傳入時設定多大就是多大。

const BoxConstraints.expand({
  double? width,
  double? height,
}) : minWidth = width ?? double.infinity,
		 maxWidth = width ?? double.infinity,
		 minHeight = height ?? double.infinity,
		 maxHeight = height ?? double.infinity;
複製程式碼

UnconstrainedBox

UnconstrainedBox 不會對子元件產生任何限制，允許其子元件按照本身大小繪製，那麼在我們的平時開發過程中用到該元件會相對較少，一般用於去除多重限制 的時候會有一些幫助。

比如AppBar 中 actions 屬性的按鈕大小是固定的，如果想要修改就可以藉助 UnconstrainedBox 去除父元素的限制。

AppBar(
  title: Text("ConstrainedExample"),
  actions: [
    UnconstrainedBox(
      child: Container(
        width: 20,
        height: 20,
        color: Colors.pink,
        child: IconButton(onPressed: () {}, icon: Icon(Icons.alarm), iconSize: 20, padding: EdgeInsets.zero,),
      ),
    ),
    IconButton(onPressed: () {}, icon: Icon(Icons.add)),
  ],
)
複製程式碼

總結

ConstrainedBox 會根據子元件的需要自動調整寬度和高度以達到最佳的適配效果，如果確切知道元件需要設定多少寬高那麼ConstrainedBox 就不在適合。 BoxConstraints 為 ConstrainedBox 額外增加的附加選項，儘可能達到業務需求。UnconstrainedBox 使用場景非常少，主要用於去除多重限制。

相關文章