目录
Padding
EdgeInsets
我们看看
EdgeInsets
提供的便捷方法:
fromLTRB(double left, double top, double right, double bottom)
:分别指定四个方向的填充。all(double value)
: 所有方向均使用相同数值的填充。only({left, top, right ,bottom })
:可以设置具体某个方向的填充(可以同时指定多个方向)。symmetric({ vertical, horizontal })
:用于设置对称方向的填充,vertical
指top
和bottom
,horizontal
指left
和right
。class PaddingTestRoute extends StatelessWidget { @override Widget build(BuildContext context) { return Padding( //上下左右各添加16像素补白 padding: EdgeInsets.all(16.0), child: Column( //显式指定对齐方式为左对齐,排除对齐干扰 crossAxisAlignment: CrossAxisAlignment.start, children: <Widget>[ Padding( //左边添加8像素补白 padding: const EdgeInsets.only(left: 8.0), child: Text("Hello world"), ), Padding( //上下各添加8像素补白 padding: const EdgeInsets.symmetric(vertical: 8.0), child: Text("I am Jack"), ), Padding( // 分别指定四个方向的补白 padding: const EdgeInsets.fromLTRB(20.0,.0,20.0,20.0), child: Text("Your friend"), ) ], ), ); } }
ConstrainedBox
onstrainedBox
用于对子组件添加额外的约束。例如,如果你想让子组件的最小高度是80像素,你可以使用const BoxConstraints(minHeight: 80.0)
作为子组件的约束。return ConstrainedBox( constraints: BoxConstraints( minHeight: 100, maxHeight: 200 ), child: Container( height:300, color: Colors.yellow, ), );
- minWidth: double.infinity, //宽度尽可能大
- minHeight: 100, //设置最小高度()
- maxHeight: 200, //设置最大高度(不管子控件高度多少,最多就是这么多)
SizedBox
SizedBox
用于给子元素指定固定的宽高,实际上SizedBox
只是ConstrainedBox
的一个定制,如:SizedBox( width: 80.0, height: 80.0, child: redBox )
DecoratedBox
DecoratedBox
可以在其子组件绘制前(或后)绘制一些装饰(Decoration),如背景、边框、渐变
decoration
:代表将要绘制的装饰,它的类型为Decoration
。Decoration
是一个抽象类,它定义了一个接口createBoxPainter()
,子类的主要职责是需要通过实现它来创建一个画笔,该画笔用于绘制装饰。position
:此属性决定在哪里绘制Decoration
,它接收DecorationPosition
的枚举类型,该枚举类有两个值:
background
:在子组件之后绘制,即背景装饰。foreground
:在子组件之上绘制,即前景。BoxDecoration
我们通常会直接使用
BoxDecoration
类,它是一个Decoration的子类,实现了常用的装饰元素的绘制。BoxDecoration({ Color color, //颜色 DecorationImage image,//图片 BoxBorder border, //边框 BorderRadiusGeometry borderRadius, //圆角 List<BoxShadow> boxShadow, //阴影,可以指定多个 Gradient gradient, //渐变 BlendMode backgroundBlendMode, //背景混合模式 BoxShape shape = BoxShape.rectangle, //形状 })
各个属性名都是自解释的,详情读者可以查看API文档。下面我们实现一个带阴影的背景色渐变的按钮:
DecoratedBox( decoration: BoxDecoration( gradient: LinearGradient(colors:[Colors.red,Colors.orange[700]]), //背景渐变 borderRadius: BorderRadius.circular(3.0), //3像素圆角 boxShadow: [ //阴影 BoxShadow( color:Colors.black54, offset: Offset(2.0,2.0), blurRadius: 4.0 ) ] ), child: Padding(padding: EdgeInsets.symmetric(horizontal: 80.0, vertical: 18.0), child: Text("Login", style: TextStyle(color: Colors.white),), ) )
运行后效果如图5-9所示:
Container
Container({ this.alignment, this.padding, //容器内补白,属于decoration的装饰范围 Color color, // 背景色 Decoration decoration, // 背景装饰 Decoration foregroundDecoration, //前景装饰 double width,//容器的宽度 double height, //容器的高度 BoxConstraints constraints, //容器大小的限制条件 this.margin,//容器外补白,不属于decoration的装饰范围 this.transform, //变换 this.child, })
Transform
官网链接https://book.flutterchina.club/chapter5/transform.html
Transform
可以在其子组件绘制时对其应用一些矩阵变换来实现一些特效。Matrix4
是一个4D矩阵,通过它我们可以实现各种矩阵操作
Transform
的变换是应用在绘制阶段,而并不是应用在布局(layout)阶段,所以无论对子组件应用何种变化,其占用空间的大小和在屏幕上的位置都是固定不变的,因为这些是在布局阶段就确定的平移
Transform.translate
接收一个offset
参数,可以在绘制时沿x
、y
轴对子组件平移指定的距离。旋转
Transform.rotate
可以对子组件进行旋转变换缩放
Transform.scale
可以对子组件进行缩小或放大
RotatedBox
RotatedBox
和Transform.rotate
功能相似,它们都可以对子组件进行旋转变换,但是有一点不同:RotatedBox
的变换是在layout阶段,会影响在子组件的位置和大小。