本文主要是介绍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 , 其所占的比例为可用尺寸的比例,一般为父组件的尺寸,并非屏幕的尺寸
使用
- 设置控件尺寸
使用FractionallySizedBox来包裹你想要设置的Widget,给它一个高度或宽度系数 , 例如 0.5表示可用尺寸的50%,即一半.
然后使用alignment来控制FractionallySizedBox应该显示在哪.
例如:
FractionallySizedBox(alignment: Alignment.bottomRight,heightFactor: 0.5,widthFactor: 0.5,child: YourWidget
)
- 填充空白部分
假如有一行组件,比如一个左侧有一个图片, 右侧有一个文本,而中间相距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的尺寸的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！
