這是我參與8月更文挑戰的22天，活動詳情檢視：8月更文挑戰

FractionallySizedBox 按比例設定Widget的尺寸

有時候,應用的設計是按照比例給出的 , 例如這種情況: 有一個按鈕,它的寬度應該佔應用父級寬度的70% 或者 頁面的邊距是整體控制元件的10%

這時可以使用FractionallySizedBox來實現.

構造方法

const FractionallySizedBox({
  Key key,
  this.alignment = Alignment.center,
  this.widthFactor,
  this.heightFactor,
  Widget child,
}) 
複製程式碼

我們先看一下構造方法 :

• alignment: 對齊方式, 用來控制FractionallySizedBox在父元件中的位置 , 預設是中間Alignment.center
• widthFactor: 寬度係數,取0-1之間. 如0.8,代表寬度為可用尺寸的80%.
• heightFactor: 高度係數,取0-1之間.
• child: 需要設定的widget

關於heightFactor/widthFactor , 其所佔的比例為可用尺寸的比例,一般為父元件的尺寸,並非螢幕的尺寸

使用

1. 設定控制元件尺寸

使用FractionallySizedBox來包裹你想要設定的Widget,給它一個高度或寬度係數 , 例如 0.5表示可用尺寸的50%,即一半.

然後使用alignment來控制FractionallySizedBox應該顯示在哪.

例如:

FractionallySizedBox(
            alignment: Alignment.bottomRight,
            heightFactor: 0.5,
            widthFactor: 0.5,
            child: YourWidget
)
複製程式碼

2. 填充空白部分

假如有一行元件,比如一個左側有一個圖片, 右側有一個文字,而中間相距10dp,

可能我們會使用SizedBox來填充:

          Row(
            children: [
              Image.network('imgurl'),
              SizedBox(width: 10),
              Text('文字'),
            ],
          )
複製程式碼

但如果二者之間的距離是按比例來的呢?

這時可以使用沒有child的FractionallySizedBox來替代SizedBox()來填充空白區域.

FractionallySizedBox(
              heightFactor: 0.1,
            )
複製程式碼

如果是在Row或者Column中使用, 可以將這個FractionallySizedBox包裹在Flexible中 :

Flexible(
            child: FractionallySizedBox(
              heightFactor: 0.1,
            ),
          )
複製程式碼

程式碼地址:github

擴充套件