7.属性一览

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

属性名类型默认值简介
colorColorColors.green框框颜色
spineTypeSpineTypeSpineType.left尖角边枚举
childWidgetnull子组件
angledouble75针尖夹角
spineHeightdouble10尖角高度
offsetdouble15偏移量
formEndboolfalse是否从尾部偏移
elevationdoublenull影深
shadowColorColorColors.grey阴影颜色
strokeWidthdoublenull边线宽
paddingEdgeInsetsEdgeInsets.all(5)内边距
radiusdouble5圆角半径
2. 针尖属性控制

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

属性名类型默认值简介
angledouble75针尖夹角
spineHeightdouble10尖角高度
offsetdouble15偏移量
formEndboolfalse是否从尾部偏移
Wrapper(
  color: Color(0xff95EC69),
  spineType: SpineType.bottom,
  spineHeight: 20,
  angle: 45,
  offset: 15,
  fromEnd: false,
  child: Text("张风捷特烈 " * 5),
)

3. 框阴影

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

属性名类型默认值简介
elevationdoublenull影深
shadowColorColorColors.grey阴影颜色
Wrapper(
  color: Colors.white,
  spineType: SpineType.right,
  elevation: 1,
  shadowColor: Colors.grey.withAlpha(88),
  child: Text("张风捷特烈 " * 5),
)

4. 边线边距

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

属性名类型默认值简介
strokeWidthdoublenull边线宽
paddingEdgeInsetsEdgeInsets.all(5)内边距
Wrapper(
  formEnd: true,
  padding: EdgeInsets.all(10),
  color: Colors.yellow,
  offset: 60,
  strokeWidth: 2,
  spineType: SpineType.bottom,
  child: Text("张风捷特烈 " * 5),
)

5. Wrapper.just

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

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

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));
}

Libraries

wrapper