Flutter实战(八)---巧用SizedBox实现Margin效果
16lz
2021-01-23
Android开发时,我们一般设置内外边距是使用目标控件自身的两个属性android:padding和android:layout_margin,如果需要指定某个方向的边距,例如左侧,内边距设置android:paddingLeft,外边距设置android:layout_marginLeft。
Flutter开发,万物皆Widget,对于内边距,我们一般是在目标控件包裹一层父级控件Padding,并通过Padding控件的padding属性指定内边距数值,例如:
- 统一指定上下左右的内边距
Padding( padding: const EdgeInsets.all(20.0), child: Text(text),),
- 指定左侧内边距
Padding( padding: EdgeInsets.only(left: 20.0), child: Text(text),),
- 指定上下左右内边距
Padding( padding: const EdgeInsets.fromLTRB(15.0, 10.0, 15.0, 10.0),//此处也可以使用EdgeInsets.only child: Text(text),),
对于外边距,Flutter没有类似Padding的控件,但是很多时候我们又想要实现控件间的间距效果,这个时候SizedBox控件就派上用场了,它是一种类似于Android平台的space占位view,只占空间不显示,使用方法也很简单:
- 设置上下外边距
SizedBox( height: 20.0,)
- 设置左右外边距
SizedBox( width: 20.0,)