【 -Flutter自定义组件- 】Wrapper组件，包裹装饰你的一切

零、前言

最近需要一个气泡框的需求，用图片，或现在三方组件一点都不灵活，倒不如自己写一个，分享来给大家一起用用。

1.看一下Wrapper组件整体的效果

主要就是一个包裹物，对于尖端的控制提供许多灵活的属性 包以及发布到pub,欢迎使用 wrapper

dependencies:
  wrapper: ^$lastVersion

2. 应用于弹出的菜单框

通过Overlay可以显示弹框浮层，一般都会有个尖角指示，用Wrapper包裹就会非常方便。

3.在聊天界面中的使用:

效果还算不错，也顺便为我的《Flutter之旅》庆下生。

一、基础使用

1. 颜色和尖角方向

spineType是四种类型的枚举，上图依次是: SpineType.left、SpineType.right、SpineType.top、SpineType.bottom

Wrapper(
    color: Color(0xff95EC69),
    spineType: SpineType.left,
    child: Text("张风捷特烈 " * 5),

2. 针尖属性控制

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

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

3. 框阴影

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

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

4. 边线边距

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

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

7.属性一览

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

二、Wrapper在聊天界面中的使用

1. 实现思路

首先应该有一组数据，根据数据的类型觉得是左侧框，还是右侧框 这里简单演示一下，左侧是第偶数条数据，右侧是第奇数条数据 item的实现透过Row+Flexible进行布局控制，也正是因为Wrapper是填充父组件区域 这样就能实现一行短文字包裹住，当文字多行时，自动延伸。

2.具体代码实现

class ChatList extends StatelessWidget {
  final data = [
    "经过十月怀胎，我的Flutter书总算出版了，是全彩色版的呢。",
    "编程书还搞彩色的，大佬就是有逼格，叫什么名字，我去捧捧场。",
    "书名是《Flutter之旅》，内容是偏向刚接触Flutter的小白，并没有讲的太深，像你这样的Lever，可能不是很需要。",
    "你想多了，我只是想买本书垫桌脚",
    "还有,书里的源码，你可以在FlutterUnit的GitHub主页看到下载链接。",
    "好的，话说FlutterUnit最近发展进度如何？",
    "FlutterUnit的绘制集录正在着手，不要心急。",
  @override
  Widget build(BuildContext context) {
    return Padding(
      padding: const EdgeInsets.all(8.0),
      child: ListView.builder(
        itemCount: data.length,
        itemBuilder: (_, index) => index.isEven ? buildLeft(index) : buildRight(index),
  //左侧item组件
  Widget buildLeft(int index) {
    return Padding(
      padding: const EdgeInsets.symmetric(vertical: 8),
      child: Row(
        crossAxisAlignment: CrossAxisAlignment.start,
        children: [
          Padding(
            padding: const EdgeInsets.only(right: 10),
            child: Image.asset( "assets/images/icon_head.png",  width: 50  ),
          Flexible(
              child: Padding(
                padding: const EdgeInsets.only(top:4.0),
                child: Wrapper(
                    elevation: 1,
                    shadowColor: Colors.grey.withAlpha(88),
                    offset: 8, color: Color(0xff95EC69), child: Text(data[index])),
          SizedBox(width: 50)
  //右测item组件
  Widget buildRight(int index) {
    return Padding(
      padding: const EdgeInsets.symmetric(vertical: 8),
      child: Row(
        textDirection: TextDirection.rtl,
        children: [
          Padding(
            padding: const EdgeInsets.only(left: 10),
            child: Image.asset( "assets/images/icon_7.webp", width: 5 ),
          Flexible(
              child: Wrapper(
                spineType: SpineType.right,
                  elevation: 1,
                  shadowColor: Colors.grey.withAlpha(88),
                  offset: 8, color: Colors.white, child: Text(data[index]))),
          SizedBox(width: 50)
复制代码

三、Wrapper源码核心实现

1.定义属性

根据需求，进行属性定义

typedef SpinePathBuilder = Path Function(
    Canvas canvas, SpineType spineType, Rect range);
class Wrapper extends StatelessWidget {
  final double spineHeight;
  final double angle;
  final double radius;
  final double offset;
  final SpineType spineType;
  final Color color;
  final Widget child;
  final SpinePathBuilder spinePathBuilder;
  final double strokeWidth;
  final bool formEnd;
  final EdgeInsets padding;
  final double elevation;
  final Color shadowColor;
  Wrapper(
      {this.spineHeight = 8.0,
      this.angle = 75,
      this.radius = 5.0,
      this.offset = 15,
      this.strokeWidth,
      this.child,
      this.elevation,
      this.shadowColor = Colors.grey,
      this.formEnd = false,
      this.color = Colors.green,
      this.spinePathBuilder,
      this.padding = const EdgeInsets.all(8),
      this.spineType = SpineType.left});
复制代码

2.build方法使用画板

不同类型的尖端，由于高度会让边距出现问题，可以在内部处理一下，以方便外界的使用，这里自定义WrapperPainter，将绘制需要的所有属性全部传入。

  @override
  Widget build(BuildContext context) {
    var _padding = padding;
    switch (spineType) {
      case SpineType.top:
        _padding = padding + EdgeInsets.only(top: spineHeight);
        break;
      case SpineType.left:
        _padding = padding + EdgeInsets.only(left: spineHeight);
        break;
      case SpineType.right:
        _padding = padding + EdgeInsets.only(right: spineHeight);
        break;
      case SpineType.bottom:
        _padding = padding + EdgeInsets.only(bottom: spineHeight);
        break;
    return CustomPaint(
      child: Padding(
        padding: _padding,
        child: child,
      painter: WrapperPainter(
          spineHeight: spineHeight,
          angle: angle,
          radius: radius,
          offset: offset,
          strokeWidth: strokeWidth,
          color: color,
          shadowColor: shadowColor,
          elevation: elevation,
          spineType: spineType,
          formBottom: formEnd,
          spinePathBuilder: spinePathBuilder),

3.WrapperPainter中的绘制

绘制主要分为两大块，一是外框盒子，二是尖端。由于尖端的存在，盒子需要根据类型进行处理。

• 核心逻辑

@override
void paint(Canvas canvas, Size size) {
  // 绘制盒子
  path = buildBoxBySpineType(
    canvas,
    spineType,
    size.width,
    size.height,
  // spinePathBuilder为null,使用buildDefaultSpinePath
  // 否则通过spinePathBuilder进行构造spinePath，比较复杂一丢丢的是区域的回调
  Path spinePath;
  if (spinePathBuilder == null) {
    spinePath = buildDefaultSpinePath(canvas, spineHeight, spineType, size);
  } else {
    Rect range ;
    switch(spineType){
      case SpineType.top:
        range = Rect.fromLTRB(0, -spineHeight, size.width, 0);
        break;
      case SpineType.left:
        range = Rect.fromLTRB(-spineHeight, 0, 0, size.height);
        break;
      case SpineType.right:
        range = Rect.fromLTRB(-spineHeight, 0, 0, size.height).translate(size.width, 0);
        break;
      case SpineType.bottom:
        range = Rect.fromLTRB(0, 0, size.width, spineHeight).translate(0, size.height-spineHeight);
        break;
    spinePath = spinePathBuilder(canvas, spineType, range);
  // 如果spinePath不为null，将两个路径结合，
  // 如果elevation存在，则绘制阴影
  if (spinePath != null) {
    path = Path.combine(PathOperation.union, spinePath, path);
    if (elevation != null) {
      canvas.drawShadow(path, shadowColor, elevation, true);
    canvas.drawPath(path, mPaint);

• 绘制盒子

  Path buildBoxBySpineType(
   Canvas canvas,
    SpineType spineType,
    double width,
    double height,
    double lineHeight, lineWidth;
    switch (spineType) {
      case SpineType.top:
        lineHeight = height - spineHeight;
        canvas.translate(0, spineHeight);
        lineWidth = width;
        break;
      case SpineType.left:
        lineWidth = width - spineHeight;
        lineHeight = height;
        canvas.translate(spineHeight, 0);
        break;
      case SpineType.right:
        lineWidth = width - spineHeight;
        lineHeight = height;
        break;
      case SpineType.bottom:
        lineHeight = height - spineHeight;
        lineWidth = width;
        break;
    Rect box = Rect.fromCenter(
        center: Offset(lineWidth / 2, lineHeight / 2),
        width: lineWidth,
        height: lineHeight);
    return Path()..addRRect(RRect.fromRectXY(box, radius, radius));

• 绘制默认的线条

buildDefaultSpinePath(
    Canvas canvas, double spineHeight, SpineType spineType, Size size) {
  switch (spineType) {
    case SpineType.top: return _drawTop(size.width, size.height, canvas);
    case SpineType.left:
      return  _drawLeft(size.width, size.height, canvas);
    case SpineType.right:
      return  _drawRight(size.width, size.height, canvas);
    case SpineType.bottom:
      return _drawBottom(size.width, size.height, canvas);
  Path _drawTop(double width, double height, Canvas canvas) {
    var angleRad = pi / 180 * angle;
    var spineMoveX = spineHeight * tan(angleRad / 2);
    var spineMoveY = spineHeight;
    if (spineHeight != 0) {
      return Path()
        ..moveTo(!formBottom ? offset : width - offset - spineHeight, 0)
        ..relativeLineTo(spineMoveX, -spineMoveY)
        ..relativeLineTo(spineMoveX, spineMoveY);
    return Path();
  Path _drawBottom(double width, double height, Canvas canvas) {
    var lineHeight = height - spineHeight;
    var angleRad = pi / 180 * angle;
    var spineMoveX = spineHeight * tan(angleRad / 2);
    var spineMoveY = spineHeight;
    if (spineHeight != 0) {
      return Path()
        ..moveTo(
            !formBottom ? offset : width - offset - spineHeight, lineHeight)
        ..relativeLineTo(spineMoveX, spineMoveY)
        ..relativeLineTo(spineMoveX, -spineMoveY);
    return Path();
  Path _drawLeft(double width, double height, Canvas canvas) {
    var angleRad = pi / 180 * angle;
    var spineMoveX = spineHeight;
    var spineMoveY = spineHeight * tan(angleRad / 2);
    if (spineHeight != 0) {
      return Path()
        ..moveTo(0, !formBottom ? offset : height - offset - spineHeight)
        ..relativeLineTo(-spineMoveX, spineMoveY)
        ..relativeLineTo(spineMoveX, spineMoveY);
    return Path();
  Path _drawRight(double width, double height, Canvas canvas) {
    var lineWidth = width - spineHeight;
    var angleRad = pi / 180 * angle;
    var spineMoveX = spineHeight;
    var spineMoveY = spineHeight * tan(angleRad / 2);
    if (spineHeight != 0) {
      return Path()
        ..moveTo(lineWidth, !formBottom ? offset : height - offset - spineHeight)
        ..relativeLineTo(spineMoveX, spineMoveY)
        ..relativeLineTo(-spineMoveX, spineMoveY);
    return Path();

本篇就到这里, 感谢大家关注FlutterUnit的发展~ , github地址: Star一下