这是我参与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

扩展