FractionallySizedBox 按比例设置Widget的尺寸

本文主要是介绍FractionallySizedBox 按比例设置Widget的尺寸，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！

FractionallySizedBox 按比例设置Widget的尺寸

有时候,应用的设计是按比例给出的,例如这样 : 按钮应该占应用宽度的70%

这时可以使用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

扩展

按百分比设置一般涉及到屏幕尺寸适配 , 关于屏幕适配方案可以考虑使用flutter_screenutil

这篇关于FractionallySizedBox 按比例设置Widget的尺寸的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！

---