GitLocker: The Coding Marketplace

Description:

wrapper

7.属性一览

注意一点: Wrapper的区域是由父容器控制的，Wrapper本身并不承担定尺寸职责。

属性名
类型
默认值
简介

color
Color
Colors.green
框框颜色

spineType
SpineType
SpineType.left
尖角边枚举

child
Widget
null
子组件

angle
double
75
针尖夹角

spineHeight
double
10
尖角高度

offset
double
15
偏移量

formEnd
bool
false
是否从尾部偏移

elevation
double
null
影深

shadowColor
Color
Colors.grey
阴影颜色

strokeWidth
double
null
边线宽

padding
EdgeInsets
EdgeInsets.all(5)
内边距

radius
double
5
圆角半径

2. 针尖属性控制

通过针尖的开角和高度能实现对尖角更细致的控制
通过offset进行位移，考虑到有可能从尾向前偏移，使用formEnd控制，如下[图四]

属性名
类型
默认值
简介

angle
double
75
针尖夹角

spineHeight
double
10
尖角高度

offset
double
15
偏移量

formEnd
bool
false
是否从尾部偏移

Wrapper(
color: Color(0xff95EC69),
spineType: SpineType.bottom,
spineHeight: 20,
angle: 45,
offset: 15,
fromEnd: false,
child: Text("张风捷特烈 " * 5),
)
copied to clipboard

3. 框阴影

注意: 只有当elevation不为空的时候才能有阴影

属性名
类型
默认值
简介

elevation
double
null
影深

shadowColor
Color
Colors.grey
阴影颜色

Wrapper(
color: Colors.white,
spineType: SpineType.right,
elevation: 1,
shadowColor: Colors.grey.withAlpha(88),
child: Text("张风捷特烈 " * 5),
)
copied to clipboard

4. 边线边距

注意: 当strokeWidth不为空时，会变为边线模式

属性名
类型
默认值
简介

strokeWidth
double
null
边线宽

padding
EdgeInsets
EdgeInsets.all(5)
内边距

Wrapper(
formEnd: true,
padding: EdgeInsets.all(10),
color: Colors.yellow,
offset: 60,
strokeWidth: 2,
spineType: SpineType.bottom,
child: Text("张风捷特烈 " * 5),
)
copied to clipboard

5. Wrapper.just

提供无针尖的构造方法，实现类似包裹的效果,可以包裹任意组件。

Wrapper.just(
padding: EdgeInsets.all(2),
color: Color(0xff5A9DFF),
child: Text(
"Lv3",
style: TextStyle(color: Colors.white),
),
)
copied to clipboard

6. 尖端路径构造器

为了让组件更灵活,我将尖端路径的构造提取出来，暴露接口，并提供默认路径
这样就可以自己定制尖端图形，提高拓展性。路径构造器，返回Path对象，回调尖端所在的矩形区域range,类型spineType，还回调了Canvas以供绘制。

Wrapper(
spinePathBuilder: _spinePathBuilder,
strokeWidth: 1.5,
color: Color(0xff95EC69),
spineType: SpineType.bottom,
child: Text("张风捷特烈 " * 5)
),

Path _spinePathBuilder2(Canvas canvas, SpineType spineType, Rect range) {
return Path()
..addOval(Rect.fromCenter(center: range.center, width: 10, height: 10));
}
copied to clipboard