属性委托实现方式有两种，这里直接通过实现接口的形式实现：

• var修饰的属性实现属性委托需要实现ReadWriteProperty接口


• val修饰的属性实现属性委托需要实现ReadOnlyProperty接口

这里由于我们只需要读取值，所以直接实现ReadOnlyProperty接口即可。下面直接上Activity的Intent委托读取代码 ：

class IntentWrapper<T>(private val default: T) : ReadOnlyProperty<AppCompatActivity, T?> {

    override fun getValue(thisRef: AppCompatActivity, property: KProperty<*>): T? {

        return  when(default) {

            is Int -> thisRef.intent.getIntExtra(property.name, default)

            is String -> thisRef.intent.getStringExtra(property.name)

            else -> throw  Exception()

        } as? T

    }

}

需要注意，在这里读取Activity的Intent使用的key默认为属性名称:property.name，这也就意味着通过Intent存储值的时候key也要使用属性名称。

如果需要读写Intent的话key不想要使用属性名称，那就得对这个属性委托类IntentWrapper稍微改造下，构造方法中支持从外部传入key键值

上面的属性委托类IntentWrapper中，只是简单处理了String和Int类型，其他的类型Boolean、Float等类型需要请自行添加。

看下使用：

private val data by IntentWrapper(56)



//读

printlin(data)

上面使用起来还是有一丢丢不优雅，每次都得手动创建IntentWrapper并传入默认值，我们可以封装几个常用类型的方法，实现起来更加方便:

fun intIntent(default: Int = 0) = IntentWrapper(default)



fun stringIntent(default: String = "") = IntentWrapper(default)

intIntent()方法给了一个默认值为0，外部可以选择性传入的默认值，其他的类型也是一样处理。

然后就可以这样使用：

private val data by intIntent()

上面主要展示的是读取Activity的Intent，Fragment的Argument处理类似：

class ArgumentWrapper<T>(private val default: T) : ReadOnlyProperty<Fragment, T?> {

    override fun getValue(thisRef: Fragment, property: KProperty<*>): T? {

        return when(default) {

            is Int -> thisRef.arguments?.getInt(property.name, default)

            is String -> thisRef.arguments?.getString(property.name)

            else -> throw Exception()

        } as? T

    }

}

使用起来也和Activity类似，这里就不做展示了。当然了，这里可以定义几个常用类型的方法创建ArgumentWrapper，参考上面Activity的处理即可。

后续准备出一篇文章，从类委托的角度考虑封装下Activity的Intent、Fragment的Argument的读取。

概览

打开源码可以看到对 InheritedWidget的解释

Base class for widgets that efficiently propagate information down the tree

--在UI树上能够有效传递信息的一个基本组件。

我们可以使用这个类来定制一个组件来传递我们需要在整个界面的状态传递。可以在官方的介绍上看到一个案例：

   ###### 创建一个继承InheritedWidget的组件

其中我们会使用一个惯例的写法，创建一个 static 的方法 of 去获得他对应的InheritedWidget。此方法会间接的调用 BuildContext的

dependOnInheritedWidgetOfExactType方法，范型传入我们当前的 FrogColor组件。

///创建一个InheritedWidget的继承类，用于管理 color 信息的传递

class FrogColor extends InheritedWidget {

  const FrogColor({Key key, @required this.color, @required Widget child})

      : assert(color != null),

        assert(child != null),

        super(key: key, child: child);

  final Color color;

  ///一般的写法，官方推荐

  static FrogColor of(BuildContext context) {

    ///这个方法做了什么事情，待会会进行分析解释！

    return context.dependOnInheritedWidgetOfExactType<FrogColor>();

  }

  @override

  bool updateShouldNotify(covariant FrogColor oldWidget) {

    return color != oldWidget.color;

  }

}

当然我们有时候也可能会直接使用一个Wiget去包裹一个InheritedWidget去传递组件的状态，典型的一个就是Theme组件，参考Theme的源码，我们知道他内部包裹了 _InheritedTheme 和 CupertinoTheme 并且 在 他的字组件中传递了 ThemeData 。所以我们能够很方便的全局的去修改我们的主题。

使用这个InheritedWidgt进行信息的传递

这里我们使用了一个Builder来创建需要使用FrogColor配置信息的子组件。其实我们使用的这个context就是一个Element，这个Element属于FrogColor的Element中的子Element。这一点很重要（关于context的知识需要参考下 Builder的源码）。

class MyPage extends StatelessWidget{

  @override

  Widget build(BuildContext context) {

       return Scaffold(

           appBar: AppBar(),

           body: FrogColor(

             color: Colors.green,

             child: Builder(builder: (BuildContext context){

               //这里我门打印了一下context 。  Builder(dirty, dependencies: [FrogColor])

               //这里打印的是 Widget的一些信息，其实最终调用的是Element的 toString 方法

               /// @override

///     String toStringShort() {

///     return widget != null ? widget.toStringShort() : '[${objectRuntimeType(this, 'Element')}]';

/// }

               print(context);

               print(context as Element) ///并不会报错

               return Text("This is InnerText" ,style: TextStyle(

                 color: FrogColor.of(context).color

               ));

             }),

           ),

       );

  }

}

为什么我们需要将需要FrogColor信息的组件外面包裹一层Builder，因为 FrogColor.of(context) 这个context 必须是 FrogColor的子 context

（其实是Element）,若是使用 MyPage的context ， 这个context 位于FrogColor的父级，那么我们需要的效果肯定会达不到的。

为什么会出现这样的效果，我们应该从 我们 惯例定义的 static 方法 中说起。

dependOnInheritedWidgetOfExactType

这个方法我们调用的是 BuildContext.dependOnInheritedWidgetOfExactType , 其中唯一实现这个方法的类就是 Element，我们看 Element

中的这个方法的实现：

0. 去 _inheritedWidgets 中找输入范型对应的 InheritedElement，对应 FrogColor中的Element。在FrogColorElement创建的时候会将其加入到 _inheritedWidgets 中。


1. 在当前 Builder对应的Element中的_dependencies加入 找到的 FrogColorElement ,这样两者就建立了相关联系。


2. ancestor.updateDependencies(this, aspect) 在 FrogColorElement更新依赖关系。

///from  Eelement 

@override

T dependOnInheritedWidgetOfExactType<T extends InheritedWidget>({Object aspect}) {

  assert(_debugCheckStateIsActiveForAncestorLookup());

 

  //还记得我么给 这个 方法传入了一 FrogColor的范型。这里 _inheritedWidgets 将类型作为Key 查找 对应的 Element；

  /// _inheritedWidgets 这个 变量 会在Element 的 mount 方法 和 active 方法中调用，就是：如果当前的Elemnt属于InheritedElement便将此Element放入 _inheritedWidgets 中，不是的话向上追溯加入。

  final InheritedElement ancestor = _inheritedWidgets == null ? null : _inheritedWidgets[T];

  ///查到的情况下

  if (ancestor != null) {

    assert(ancestor is InheritedElement);

    /// 关键点 ： 添加依赖关系 

    return dependOnInheritedElement(ancestor, aspect: aspect) as T;

  }

  _hadUnsatisfiedDependencies = true;

  return null;

}



/// from Element  添加依赖关系

 @override

  InheritedWidget dependOnInheritedElement(InheritedElement ancestor, { Object aspect }) {

    assert(ancestor != null);

    _dependencies ??= HashSet<InheritedElement>();

    ///在本Element的依赖链中添加，一切的操作都在本Element中操作而非 FrogColor对应的Element中，

    ///这也是为什么我们在前面的打印中看到了 ： Builder(dirty, dependencies: [FrogColor])

    _dependencies.add(ancestor);

    ///刷新依赖关系（这个依赖关系刷新的是 FrogColor中的依赖关（这个一会再讲）

    ancestor.updateDependencies(this, aspect);

    return ancestor.widget;

  }

分析到这一步，其实我们便可以使用 InheritedWidget提供的一些属性信息，但是当我们更新数据的时候（比如：FrogColor 动态更新 color属性），若是子组件的Widget属性没有发生变化（参考 setState（）原理）的时候，子组件是不会发生变化的。也就是说只能在第一次构建的时候生效，那么我们全局修改主题，全局修改 ForgColor 的属性怎么办。我们需要解析 ancestor.updateDependencies(this, aspect) 内在都干了什么，怎么运行的。

InHeritedWidget 动态更新

经过以上的分析，我们知道，在 添加依赖关系的时候，会分别在自己的 _dependencies 中添加父级，然后在父级中的 _dependencies 添加 调用的Element。为什么要添加这种依赖关系？我们应分析当 Element更新的时候对这种依赖关系操作了什么。

熟悉Element更新原理的情况下（不知道顺着思路走）我们知道：属性更改后会调用update方法。而 InheritedElement 继承在 ProxyElement ,我们来分析 ProxyElement（这个类里面包含了通知客户端更新的定义方法） 中的update 做了什么。

/// from ProxyElement

@override

void update(ProxyWidget newWidget) {

  final ProxyWidget oldWidget = widget;

  assert(widget != null);

  assert(widget != newWidget);

  super.update(newWidget);

  assert(widget == newWidget);

  ///调用 updated 方法

  updated(oldWidget);

  _dirty = true;

  rebuild();

}

@protected

void updated(covariant ProxyWidget oldWidget) {

   /// 通知Clients ；   这个方法在ProxyElement中是空的

    notifyClients(oldWidget);

}

ProxyElement最终会调用 notifyClients方法，这个方法在 InhertedElement中进行了实现。

/// from InhertedElement

  /// Notifies all dependent elements that this inherited widget has changed, by

  /// calling [Element.didChangeDependencies].

@override

  void notifyClients(InheritedWidget oldWidget) {

    assert(_debugCheckOwnerBuildTargetExists('notifyClients'));

    //查找所有的依赖关系

    for (final Element dependent in _dependents.keys) {

      ///断言==一些判断。

      assert(() {

        // check that it really is our descendant

        Element ancestor = dependent._parent;

        while (ancestor != this && ancestor != null)

          ancestor = ancestor._parent;

        return ancestor == this;

      }());

      // check that it really depends on us

      assert(dependent._dependencies.contains(this));

      ///通知依赖

      notifyDependent(oldWidget, dependent);

    }

  }

}



 /// from  InhertedElement

  @protected

  void notifyDependent(covariant InheritedWidget oldWidget, Element dependent) {

    ///调用 element的 didChangeDependencies 方法；

    dependent.didChangeDependencies();

  }



  ///from Element

  @mustCallSuper

  void didChangeDependencies() {

    assert(_active); // otherwise markNeedsBuild is a no-op

    assert(_debugCheckOwnerBuildTargetExists('didChangeDependencies'));

    /// 标记需要重新进行绘制；

    markNeedsBuild();

  }

总结一句话：重新构建的时候，InheritedElement将_dependencies中的ELement全部标记为 重新构建。这样，当 InheritedWidget的属性发生变化的时候，便会很快的有目标的将使用到它属性的Widget进行更新。

这也是为什么很多基于组件基于InheritedWidget，这样的效率很高，而且使用起来很方便。一些状态管理框架也是基于InheritedWIdget进行了一定的封装。

PS：_inheritedWidgets的注册和继承

上面有一点我们是一句话带过的 ：在FrogColorElement创建的时候会将其加入到 _inheritedWidgets 中。 这里我们需要分析 Element的mount方法中执行了什么操作；

/// from Element 

@mustCallSuper

void mount(Element parent, dynamic newSlot) {

   ////---省略

  ///最终调用

  _updateInheritance();

  assert(() {

    _debugLifecycleState = _ElementLifecycle.active;

    return true;

  }());

}



  /// from Element  若不是InheritedElement的情况下，会查找父级的 _inheritedWidgets

  void _updateInheritance() {

    assert(_active);

    _inheritedWidgets = _parent?._inheritedWidgets;

  }



/// from InheritedElement 若是InheritedElement的情况下 

@override

  void _updateInheritance() {

    assert(_active);

    /// 将父级的拿过来

    final Map<Type, InheritedElement> incomingWidgets = _parent?._inheritedWidgets;

    if (incomingWidgets != null)

      _inheritedWidgets = HashMap<Type, InheritedElement>.from(incomingWidgets);

    else

      _inheritedWidgets = HashMap<Type, InheritedElement>();

    /// 加入自己

    _inheritedWidgets[widget.runtimeType] = this;

  }

总结:通过 _updateInheritance 查找上级的 _inheritedWidgets 若本Element是InheritedElement那么将自己加入进去。

介绍

项目中需要使用雷达图来展示各个属性的不同比例，文字根据控件大小自动换行。

效果图

如何实现

1、绘制背景的三个圆形

从外圆向内圆绘制，这样内圆的颜色正确覆盖在外圆上，style = Stroke(2f)用来绘制圆形的border。

val CIRCLE_TURN = 3

val center = Offset(size.width / 2, size.height / 2)

val textNeedRadius = 25.dp.toPx() // 文本绘制范围

val radarRadius = center.x - textNeedRadius

val turnRadius = radarRadius / CIRCLE_TURN



for (turn in 0 until CIRCLE_TURN) {

    drawCircle(colors[turn], radius = turnRadius * (CIRCLE_TURN - turn))

    drawCircle(colors[3], radius = turnRadius * (CIRCLE_TURN - turn), style = Stroke(2f))

}

2、绘制圆环内的虚线

使用360/data.size算出每个区块需要的角度。

我们知道，竖直向上为-90度，当区块数量为奇数时，第一条虚线应当在竖直方向上，即起始绘制角度为-90度；当区块数量为偶数时，虚线绘制应当左右对称，所以将初始角度设置为-90 - itemAngle / 2。inCircleOffset()是用来获取在圆形中的xy位置，点击kotlin.math.cos()/sin()查看方法的描述Computes the cosine of the angle x given in radians可知，我们需要传入一个弧度，角度换算弧度的推导如下。

val itemAngle = 360 / data.size

val startAngle = if (data.size % 2 == 0) {

    -90 - itemAngle / 2

} else {

    -90

}



for (index in data.indices) {

    // 绘制虚线

    val currentAngle = startAngle + itemAngle * index

    val xy = inCircleOffset(center, progress * radarRadius, currentAngle)

    drawLine(colors[4], center, xy, pathEffect = PathEffect.dashPathEffect(floatArrayOf(10f, 10f)))

}



/**

 * 根据圆心，半径以及角度获取圆形中的xy坐标

 */

fun DrawScope.inCircleOffset(center: Offset, radius: Float, angle: Int): Offset {

    return Offset((center.x + radius * cos(angle * PI / 180)).toFloat(), (center.y + radius * sin(angle * PI / 180)).toFloat())

}

3、绘制雷达范围

在最大值为100的情况下，根据bean的value换算出应当绘制点的radius。并算出对应的xy的位置，将其记录到path中方便连成闭合区间绘制。

data class RadarBean(

    val text: String,

    val value: Float

)

for (index in data.indices) {

    val pointData = data[index]

    val pointRadius = radarRadius * pointData.value / 100

    val fixPoint = inCircleOffset(center, pointRadius, currentAngle)

    if (index == 0) {

        path.moveTo(fixPoint.x, fixPoint.y)

    } else {

        path.lineTo(fixPoint.x, fixPoint.y)

    }

}

drawPath(path, colors[5]) // 绘制闭合区间

drawPath(path, colors[6], style = Stroke(5f)) // 绘制区间的深色描边

4、绘制文字位置

接下来就是绘制最重要的文字的位置啦，首先我们先了解什么是StaticLayout，这里面有1.4小节介绍StaticLayout是如何使用的。  观察效果图，我们先分析出位置的绘制规律：

1. 垂直方向的文字x轴在文字宽度的正中间，y轴在文字的底部
2. 水平方向的文字x轴与y轴皆在文字的正中间
3. 左上角的文字x轴在文字的最右边，y轴在最后一行文字的中间
4. 右上角的文字x轴在文字的最左边，y轴在最后一行文字的中间
5. 左下角的文字x轴在文字的最右边，y轴在第一行文字的中间
6. 右下角的文字x轴在文字的最左边，y轴在第一行文字的中间

根据以上规律，需要对文字绘制区域进行区分：

private fun quadrant(angle: Int): Int {

    return if (angle == -90 || angle == 90) {

        0 // 垂直

    } else if (angle == 0) {

        -1 // 水平右边

    } else if (angle == 180) {

        -2 // 水平左边

    } else if (angle > -90 && angle < 0) {

        1 // 右上角

    } else if (angle > 0 && angle < 90) {

        2 // 右下角

    } else if (angle > 90 && angle < 180) {

        3 // 左下角

    } else {

        4 // 左上角

    }

}

设置文本的最大宽度：绿色虚线为左半边的文字最大宽度，蓝色虚线为右半边的文字最大宽度。通过quadrant(currentAngle)获取文字需要绘制的区域，垂直区域的文字最大宽度设置为雷达控件的一半，绿色虚线的文字最大宽度为offset.x，蓝色虚线的文字最大宽度为size.width - offset.x。

fun DrawScope.wrapText(

    text: String, // 绘制的文本

    textPaint: TextPaint, // 文字画笔

    width: Float, // 雷达控件的宽度

    offset: Offset, // 未调整前的文字绘制的xy位置

    currentAngle: Int, // 当前文字绘制所在的角度

    chineseWrapWidth: Float? = null // 用来处理UI需求中文每两个字符换行

) {

    val quadrant = quadrant(currentAngle)

    var textMaxWidth = width

    when (quadrant) {

        0 -> {

            textMaxWidth = width / 2

        }

        -1, 1, 2 -> {

            textMaxWidth = size.width - offset.x

        }

        -2, 3, 4 -> {

            textMaxWidth = offset.x

        }

    }

}

创建StaticLayout，传入文本绘制的最大宽度textMaxWidth，该控件会根据设置的最大宽度对文本自动换行。

val staticLayout = if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.M) {

    StaticLayout.Builder.obtain(text, 0, text.length, textPaint, textMaxWidth.toInt()).apply {

        this.setAlignment(Layout.Alignment.ALIGN_NORMAL)

    }.build()

} else {

    StaticLayout(text, textPaint, textMaxWidth.toInt(), Layout.Alignment.ALIGN_NORMAL, 1.0f, 0f, false)

}

通过staticLayout获取文本的高度，文本的行数。这里不能使用staticLayout.width来获取文本的宽度，因为假设设置的textMaxWidth=100，而文本绘制后的宽度只有50，通过staticLayout.width获取的宽度为100，这不是我们想要的。所以通过lines>1来判断文本是否换行，如果未换行，直接通过textPaint.measureText获取文本的真实宽度；如果换行，则staticLayout.getLineWidth(0)用来获取文本第一行的宽度就是文本的真实宽度。

val textHeight = staticLayout.height

val lines = staticLayout.lineCount

val isWrap = lines > 1

val textTrueWidth = if (isWrap) staticLayout.getLineWidth(0) else textPaint.measureText(text)

使用canvas绘制文本，这里的save() translate() staticLayout.draw(canvas) restore()是使用StaticLayout绘制的四步曲。

// 绘制文字

val textPointRadius = progress * radarRadius + 10f

val offset = inCircleOffset(center, textPointRadius, currentAngle)

val text = data[index].text

wrapText(

    text,

    textPaint,

    size.width,

    offset,

    currentAngle,

    if (specialHandle) textPaint.textSize * 2 else null

)



drawContext.canvas.nativeCanvas.save()

when (quadrant) {

    0 -> { // 规律1

        drawContext.canvas.nativeCanvas.translate(offset.x - textTrueWidth / 2, offset.y - textHeight)

    }

    -1 -> { // 规律2

        drawContext.canvas.nativeCanvas.translate(offset.x, offset.y - textHeight / 2)

    }

    -2 -> { // 规律2

        drawContext.canvas.nativeCanvas.translate(offset.x - textTrueWidth, offset.y - textHeight / 2)

    }

    1 -> { // 规律4

        drawContext.canvas.nativeCanvas.translate(

            offset.x,

            if (!isWrap) offset.y - textHeight / 2 else offset.y - (textHeight - textHeight / lines / 2)

        )

    }

    2 -> { // 规律6

        drawContext.canvas.nativeCanvas.translate(offset.x, if (!isWrap) offset.y - textHeight / 2 else offset.y - textHeight / lines / 2)

    }

    3 -> { // 规律5

        drawContext.canvas.nativeCanvas.translate(

            offset.x - textTrueWidth,

            if (!isWrap) offset.y - textHeight / 2 else offset.y - textHeight / lines / 2

        )

    }

    4 -> { // 规律3

        drawContext.canvas.nativeCanvas.translate(

            offset.x - textTrueWidth,

            if (!isWrap) offset.y - textHeight / 2 else offset.y - (textHeight - textHeight / lines / 2)

        )

    }

}

staticLayout.draw(drawContext.canvas.nativeCanvas)

drawContext.canvas.nativeCanvas.restore()

这样就画好了，但是产品看完效果图后不喜欢换行的效果，希望每两个字就换行，于是新增如下判断。

// 需要特殊处理换行&&包含中文字符&&文本绘制一行的宽度>文本最大宽度

if (chineseWrapWidth != null && isContainChinese(text) && textPaint.measureText(text) > textMaxWidth) {

    textMaxWidth = chineseWrapWidth

}

private fun isContainChinese(str: String): Boolean {

    val p = Pattern.compile("[\u4e00-\u9fa5]")

    val m = p.matcher(str)

    return m.find()

}

5、增加个小动画

当雷达图从屏幕中出现的时候，做一个绘制值从0到实际值的动画

var enable by remember {

    mutableStateOf(false)

}

val progress by animateFloatAsState(if (enable) 1f else 0f, animationSpec = tween(2000))



Modifier.onGloballyPositioned {

    enable = it.boundsInRoot().top >= 0 && it.boundsInRoot().right > 0

}

如何使用

private val list = listOf(

    RadarBean("基本财务", 43f),

    RadarBean("基本财务财务", 90f),

    RadarBean("基", 90f),

    RadarBean("基本财务财务", 90f),

    RadarBean("基本财务", 83f),

    RadarBean("技术择时择时", 50f),

    RadarBean("景气行业行业", 83f)

)

ComposeRadarView(

    modifier = Modifier

        .padding(horizontal = 4.dp)

        .size(180.dp),

    list

)

项目地址

最后贴上项目的地址：ComposeRadar

如果觉得对您有帮助就点个👍吧～

概述

这次来讲讲心电图的绘制，这也是项目当中用到过的。心电图继承自View，概括一下主要有以下内容要实现：**实时显示动态心电测量数据、心电波形左右滑动、惯性滑动及波形 X轴和 Y轴方向双指滑动缩放。**下面我们来看看效果图，图片上传大小有限制，所以分两张：

Screenrecorder-2021-08-09-18-44-54-1282021891847387.gif

ECG_2.gif

下面我们将功能拆解，分步实现：

• 画背景绿色网格线


• 绘制实时动态心电曲线


• 实现单指曲线左右平移


• 实现曲线惯性滑动


• 实现 X轴及 Y轴方向上曲线的双指滑动缩放（多点触控改变曲线增益）


• 左上角显示当前增益

1、画网格线

这个就比较简单了。首先确定每一小格的边长，然后获取控件宽高。这样就能分别计算出水平方向及竖直方向有多少小格，也就是可以确定横线和竖线一共要画多少条。然后就可以用循环画出所有的线条，其中每隔5条进行线条加粗，而且画实线，这样就形成了实线大格。下面先看实现：

// 画 Bitmap

    protected Bitmap gridBitmap;

 // 画 Canvas

    protected Canvas bitmapCanvas;

// 控件宽高

    protected int viewWidth, viewHeight;

 @Override

    protected void onSizeChange() {

        // 获取控件宽高

        viewWidth = mBaseChart.getWidth();

        viewHeight = mBaseChart.getHeight();

        // 初始化网格 Bitmap

        gridBitmap = Bitmap.createBitmap(viewWidth, viewHeight, Bitmap.Config.ARGB_8888);

        bitmapCanvas = new Canvas(gridBitmap);

        Log.d(TAG, "onSizeChange - " + "-- width = " +

                mBaseChart.getWidth() + "-- height = " + mBaseChart.getHeight());

    }



 /**

     * 准备好画网格的 Bitmap

     */

    private void initBitmap(){

        // 计算横线和竖线条数

        hLineCount = (int) (viewHeight / gridSpace) + 2;

        vLineCount = (int) (viewWidth / gridSpace) + 2;

        // 画横线

        for (int h = 0; h < hLineCount; h ++){

            float startX = 0f;

            float startY = gridSpace * h;

            float stopX = viewWidth;

            float stopY = gridSpace * h;

            // 每个 5根画一条粗实线

            if (h % 5 != 0){

                linePaint.setPathEffect(pathEffect);

                linePaint.setStrokeWidth(1.5f);

            }else {

                linePaint.setPathEffect(null);

                linePaint.setStrokeWidth(3f);

            }

            // 画线

            bitmapCanvas.drawLine(startX, startY, stopX,stopY, linePaint);

        }

        // 画竖线

        for (int v = 0; v < vLineCount; v ++){

            float startX = gridSpace * v;

            float startY = 0f;

            float stopX = gridSpace * v;

            float stopY = viewHeight;

            // 每隔 5根画一条粗实线

            if (v % 5 != 0){

                linePaint.setPathEffect(pathEffect);

                linePaint.setStrokeWidth(1.5f);

            }else {

                linePaint.setPathEffect(null);

                linePaint.setStrokeWidth(3f);

                Log.d(TAG, "v = " + v);

            }

            // 画线

            bitmapCanvas.drawLine(startX, startY, stopX,stopY, linePaint);

        }

    }



 @Override

    protected void onDraw(Canvas canvas) {

         // 注释 1，Bitmap左边缘位置为getScrollX()，防止网格滑动

        canvas.drawBitmap(gridBitmap, mBaseChart.getScrollX(), 0, null);

    }

这里想提一下的是，这里网格线并不是直接画在控件 onDraw方法的 Canvas上的。而是在控件初始化时，事先将网格所有线条画在一张 Bitmap上，然后绘制时直接绘制 Bitmap。这样搞就不用每次绘制时都计算一遍线条的位置了。

还有就是上面注释 1处，绘制网格 Bitmap的左边缘的位置是 getScrollX()。因为后面要实现曲线左右滑动，但网格要固定不动。

2、绘制动态实时心电曲线

这就是心电图最主要的实现了。心电在测量的时候会实时传递电压值，我们需要把电压值实时存进数组里。然后把电压值换算成 Y坐标值，再根据事先确定好的 X轴方向两个数据点的距离来确定每个电压值在 X轴方向的坐标。然后从左到右确定曲线的路径Path，再将Path绘制到Canvas上就可以了。

我们观察上面效果图会发现，这里的实现是最后一个到达的数据的显示不会超过控件右边缘。也就是当曲线 X方向的长度不超过控件宽度时，曲线第一个点的横坐标 x = 0。当曲线 X方向长度大于控件宽度时，曲线 Path的第一个点的横坐标就向左移，也就是 x为负的了。这样就实现上面效果中，测量实时心电时，曲线会向左移。这样新来的数据就显示在控件可见范围内，早来的数据逐步向左移出控件可见范围。下面画个草图吧，草图大概就这么个意思：

心电.png

下面看一下实现：

    /**

     * 创建曲线

     */

    private boolean createPath() {

        // 曲线长度超过控件宽度，曲线起点往左移

        // 根据控件宽度和数组长度以及 X增益算出数组第一个数的 X坐标

        float startX = (this.data.size() * dataSpaceX > viewWidth) ?

                (viewWidth - (this.data.size() * dataSpaceX)) : 0f;

        // 曲线复位

        dataPath.reset();

        for (int i = 0; i < this.data.size(); i++) {

            // 确定 X轴坐标

            float x = startX + i * this.dataSpaceX;

            // 确定 Y轴坐标

            float y = getVisibleY(this.data.get(i));

            // 绘制曲线

            if (i == 0) {

                dataPath.moveTo(x, y);

            } else {

                dataPath.lineTo(x, y);

            }

        }

        return true;

    }

    /**

     * 电压 mv（毫伏）在 Y轴方向的换算

     * 屏幕向上往下是 Y 轴正方向，所以电压值要乘以 -1进行翻转

     * 目前默认每一大格代表 1000 mv，而真正一大格的宽度只有 150,所以 data要以两数换算

     * Y == 0，是在 View的上边缘，所以要向下偏移将波形显示在中间

     *

     * @param data

     * @return

     */

   // 注释 2

    private float getVisibleY(int data) {

        // 电压值换算成 Y值

        float visibleY = -smallGridSpace * 5 / mvPerLargeGrid * data;

        // 向下偏移

        visibleY = visibleY + smallGridSpace * 5 * offset;

        return visibleY;

    }



 @Override

    protected void onDraw(Canvas canvas) {

        // 绘制心电曲线

        canvas.drawPath(dataPath, linePaint);

    }

上面有一点需要注意的，就是我们的 Y值的换算。我们知道Android屏幕自上而下是 Y轴正方向，所以我们如果直接把电压值画在屏幕上它是倒挂的。另外，这里默认的一大格代表1000mv电压值（可设），而真正一大格的边长是150。所以我们需要将电压值换算成屏幕像素。具体看上面注释 2的getVisibleY方法上面注释。

3、实现曲线左右平移

当心电测量完之后，我们需要实现曲线随手指滑动平移。这样才能看到心电图的全部内容。这个实现原理也简单，也就是监听onTouch事件，根据手指位移使用View的scrollBy方法来实现内容平移就可以了：

 /**

     * @param event 单指事件

     */

    private void singlePoint(MotionEvent event) {

        mVelocityTracker.addMovement(event);

        switch (event.getAction()) {

            case MotionEvent.ACTION_DOWN:

                lastX = event.getX();

                break;

            case MotionEvent.ACTION_MOVE:

                float deltaX = event.getX() - lastX;

                delWithActionMove(deltaX);

                lastX = event.getX();

                break;

            case MotionEvent.ACTION_UP:

                // 计算滑动速度

                computeVelocity();

                break;

        }

    }



 /**

     * @param deltaX 处理 MOVE事件

     */

    private void delWithActionMove(float deltaX) {

        if (this.data.size() * dataSpaceX <= viewWidth) return;

        int leftBorder = getLeftBorder(); // 左边界

        int rightBorder = getRightBorder(); // 右边界

        int scrollX = mBaseChart.getScrollX(); // X轴滑动偏移量



        if ((scrollX <= leftBorder) && (deltaX > 0)) {

            mBaseChart.scrollTo((int) (viewWidth - this.data.size() * dataSpaceX), 0);

        } else if ((scrollX >= rightBorder) && (deltaX < 0)) {

            mBaseChart.scrollTo(0, 0);

        } else {

            // 内容平移

            mBaseChart.scrollBy((int) -deltaX, 0);

        }

    }

注意上面左右边界的设定，别让曲线划出屏幕了。

4、惯性滑动

惯性滑动的实现，这里使用的套路是 VelocityTracker。先追踪手指滑动速度，然后使用 Scroller并结合 View的 computeScroll()方法和 scrollTo方法，实现手指离开屏幕后的惯性滑动。这部分内容在我上一篇文章画一个FM调频收音机刻度表

有讲，这里不再重复。

5、实现双指滑动，在横纵坐标方向缩放曲线

在实现双指滑动曲线缩放功能之前，我们先讲讲一小部分 MotionEvent的基础知识。为什么说只讲一小部分呢？因为 MotionEvent这个事件体系还蛮大。我们只讲一下这次用到的部分。

onTou.png

onTouch2.png

好吧，还是直接画表格吧。这样也直观一点，不用解释那么多。上面红色圈圈圈出来的几个哥们是我们这次要用到的。

• 
  

  event.getActionMasked() ：上面也有解释，这个方法和 getAction()类似。只不过我们这次要处理多点触控，所以一定要用 getActionMasked() 来获取事件类型。

  
  


• 
  

  event.getPointerCount() ：上面也有解释，获取屏幕上手指个数。因为我们这次要处理双指滑动，所以要用 （getPointerCount() == 2）进行判断。两根手指以外的事件我们不做缩放处理。

  
  


• 
  

  ACTION_POINTER_DOWN ：上面又有解释，第一根手指之后，按下的其他手指。如果结合 （getPointerCount() == 2）这个前提条件，那么我们可以认为这次ACTION_POINTER_DOWN 就是第二根手指按下所触发的事件。

  
  


• 
  

  event.getX(int pointerIndex)：上面也有介绍，获取某个手指当前的 X坐标。我们在获取到两个手指当前的 X坐标之后，就可以算出两指当前在 X轴方向的距离。然后再结合 ACTION_POINTER_DOWN 时所记录的坐标值，就可以计算出两个手指在 X方向上是靠近了还是疏远了（收缩了还是放大了）。getY(int pointerIndex) 方法同理，不做解释了。

  
  


• 
  

  ACTION_MOVE ：两指滑动当然也要用到 MOVE事件，只不过这里 ACTION_MOVE 和单指的使用方法一样，就不做解释了。

  
  

好了，我们再看看 X轴方向缩放具体实现吧：

  /**

     * 处理onTouch事件

     *

     * @param event 事件

     * @return 拦截

     */

    @Override

    protected boolean onTouchEvent(MotionEvent event) {

        Log.d(TAG, "pointerCount = " + event.getPointerCount());

        if (event.getPointerCount() == 1) {  // 单指平滑

            singlePoint(event);

        }

        if (event.getPointerCount() == 2) { // 双指缩放

            doublePoint(event);

        }

        return true;

    }



  /**

     * @param event 双指事件

     */

    private void doublePoint(MotionEvent event) {

        if (pointOne == null) pointOne = new PointF();

        if (pointTwo == null) pointTwo = new PointF();



        switch (event.getActionMasked()) {

            case MotionEvent.ACTION_POINTER_DOWN:  // 第二根手指按下

                Log.d(TAG, "ACTION_POINTER_DOWN");

               // 记录第二根手指按下时，两指的坐标点

                saveLastPoint(event);

                numbersPerLargeGridOnThisTime = getDataNumbersPerGrid();

                mvPerLargeGridOnThisTime = getMvPerLargeGrid();

                break;

            case MotionEvent.ACTION_MOVE:  // 双指拉伸

                Log.d(TAG, "ACTION_MOVE");

                // 计算 X方向缩放量

                getScaleX(event);

               // 计算 Y轴方向所放量

                getScaleY(event);

                break;

            case MotionEvent.ACTION_POINTER_UP:  // 先离开的手指

                Log.d(TAG, "ACTION_POINTER_UP");

                break;

        }

    }



    /**

     * 处理 X方向的缩放

     *

     * @param event 事件

     * @return 拉伸量

     */

    private float getScaleX(MotionEvent event) {

        float pointOneX = event.getX(0);

        float pointTwoX = event.getX(1);

        // 算出 X轴方向的拉伸量

        float deltaScaleX = Math.abs(pointOneX - pointTwoX) - Math.abs(pointOne.x - pointTwo.x);

        // 设置拉伸敏感度

        int inDevi = mBaseChart.getWidth() / 54;

        // 计算拉伸时增益偏移量

        int inDe = (int) deltaScaleX / inDevi;

        // 算出最终增益

        int perNumber = numbersPerLargeGridOnThisTime - inDe;

        // 设置增益

        setDataNumbersPerGrid(perNumber);

        return deltaScaleX;

    

好了，该解释的原理上面都做了解释。上面代码要解释的无非就是缩放敏感度调节的问题，代码里做了解释。缩放量计算出来之后，我们就可以改变心电曲线的增益了。比如说 X方向两点数据之间的距离做了调整、Y方向心电数值计算因子做了调整，然后重新算出曲线 Path再重绘，也就可以了。

6、左上角显示当前增益

最后我们要把当前增益显示出来，比如说 X轴方向一大格绘制了多少点数据、Y轴方向一大格代表多少毫伏。这两个参数都是在上一步双指缩放时动态改变的，所以要留一个对外接口让外界获取到这两个参数。

 /**

     * 获取每大格显示的数据个数，再结合医疗版的采样率，就可以算出一格显示了多长时间的数据

     *

     * @return

     */

    public int getDataNumbersPerGrid() {

        return this.dataNumbersPerGrid;

    }

 /**

     * @return 获取每大格代表多少毫伏

     */

    public float getMvPerLargeGrid() {

        return this.mvPerLargeGrid;

    }

因为这次心电图的绘制比以往的文章都涉及到更多的细节，所以之前文章里讲过的一些实现细节这里就没重复讲。另外，这次自定义 View使用了 Base模板设计模式，用好几个类来实现了这幅心电图，所以没把完整代码贴在这里。代码还是直接放Github吧 ：心电图

前言

我去年发现Android新出了个UI框架Compose，看了Demo后发现，纳尼！和Flutter太像了吧，无论是编程逻辑、控件名，都有很多相似的地方。谷歌自己抄自己？一直想去尝试，感受一下，直到今年才有时间去写了小项目。

思考

我在写代码的时候和Flutter去做对比，就想到它俩的UI刷新机制是否有相似点，如果不一样，那Compose的刷新机制是什么？

在看Compose的刷新机制前，我回忆了一下Flutter的刷新机制。

简单讲Flutter是通过调用StatefulWidget的setState方法,重新走一遍build方法中的代码。那原理就是setState调用时会自己添加到BuildOwner的dirtyElements脏链表中，然后调用window.scheduleFrame来注册Vsync回调，当下一次vsync信号的到来时会重新绘制UI。

所以我觉得Flutter更像是一个屏幕，调用setState方法不断重新构建UI页面，一帧一帧的。那Compose是不是也是这样呢？

尝试

Demo如下，在页面上显示一个Text控件，和一个按钮,每一次点击，Text显示的数字自增。

@Composable

fun demo() {

    // 关键代码

    var versionCode by remember { mutableStateOf(0) }

    

    Column {

        Button(

            onClick = { versionCode++ }) {

            Text("Add +")

        }

        Text( versionCode.toString() )

    }

}

UI发生变化的关键代码就是 by remember { mutableStateOf(0) } ，这行代码删除后，怎么按UI都不会变化。我发每次versionCode变化的时候会重新走一遍demo()内的代码，这时该类中有其他方法，其他方法代码并不会重走。如果把Text中的versionCode引用删除，写一个固定值，这个再点击按钮，也不会重新走一遍代码。

问题

1. Compose 是如何进行更新的？


2. 如何做到更新时只有引用的方法内刷新？


3. 不引用为何不刷新方法？

分析

带着以上三个问题，点进mutableStateOf中去，看一看源码。

进入 createSnapshotMutableState

进入 ParcelableSnapshotMutableState

进入SnapshotMutableStateImpl，下面这个类中，红框标记的是关键代码，这个方法的注解是

A single value holder whose reads and writes are observed by Compose.Additionally, writes to it are transacted as part of the [Snapshot] system.

我理解的意思是，对value这个值做了监听，只要是 Compose的UI 引用了value，当其发生变化时就能自动更新

这里的 value 就是给 versionCode 赋的值，这里的 get() 方法中会调用readable() ，把当前 state 保存起来（我认为这里的 state 可以理解为 Flutter 的 state）。set() 方法内会进行对比，在 equivalent() 方法中比对的是对象，当两个对象的地址不一致时，会触发监听通知，重写用的Compose方法，

这也就解释了之前说的三个问题。

1. Compose的刷新本质是对 value 的监听通知；


2. 为了避免过度刷新，将刷新范围固定到最小的标记@Compose的注解的方法内，包括方法内的其他方法（和Flutter的StatefulWidget的刷新范围一样），前提是其他Compose方法有参数传入(我理解是有新的参数传入，会生成新的对象)，否则除了第一次不会再进行刷新；为提高性能，会把频繁刷新的View(Flutter中的widget）封装为单独的Compose方法（Stful）；


3. 对value的引用，调用了get内的注册方法，不引用，也就不会引起刷新。

以上就是我对Compose的刷新机制的理解，

应用

了解了Compose的刷新机制后，怎么才能高效的使用这中逻辑编程呢？我在踩了一堆坑后，有以下几个写代码的注意点，仅供参考。

一、

如果在方法内使用mutableStateOf，需要包一层remember函数，它的作用是运行完里面的代码后，就会存在缓存里，再次执行这行代码，不会再次初始化，会从缓存中拿出 State的对象，防止多次初始化。 如果你偏不，可以试试看有什么神奇的现象🙃。’
（PS ：在remember函数中有个熟悉的参数 Key，熟悉Flutter的估计都明白干啥的了，这就不再啰嗦了）

// 成员变量可以不用套，因为本身就初始化一次

var versionCode by mutableStateOf(0) 



@Composable

fun demo() {

    // 方法内这么写

    var versionCode by remember { mutableStateOf(0) }

    

    Column {

        Button(

            onClick = { versionCode++ }) {

            Text("Add +")

        }

        Text( versionCode.toString() )

    }

}

二、

对value的刷新是设置新的值，是对比对象本身，如果只改变了对象内的值，是不会放生刷新的。如代码中A对象并没有改变。

data class A(var a: Int = 0)

@Composable

fun demo() {

    val versionCode by remember { mutableStateOf(A(0)) }

    Column {

        Button(

            onClick = { versionCode.a++ }) {

            Text("Add +")

        }

        Text( versionCode.toString() )

    }

}

遇到这种情况需要刷新有两种办法

1. 复制对象，改变对象地址

        Button(

            onClick = { versionCode.copy(a = versionCode.a++) }) {

            Text("Add +")

        }

2. 给对象内的变量实现mutableStateOf

data class A(var a: MutableState<Int> = mutableStateOf(0)) {

    // 或写在下面用 by 代理的方式

    var a by mutableStateOf(0)

}

三、

单个对象好复制，好改，遇到列表，数组类的对象刷新，该怎么做呢，换列表对象？不合适。好在官方已经替咱们想到了这一点。神器 mutableStateListOf，当列表内的数据发生变化时，会刷新UI

val data = mutableStateListOf(1, 2, 3)

@Composable

fun demo() {

    Column {

        Button(onClick = {

            data.add(data.last() + 1)

        }) {

            Text(text = "onclick")

        }

        for (d in data) {

            Text(text = "data:${d}")

        }

    }

}

我大概遇到的UI刷新上的坑，可以归为以上三种，还有其他的欢迎交流补充。

总结

Compose的刷新机制简单来讲是有范围，有组织的用观察者模式进行刷新。
分析了个大概，更深层次的原理，以后慢慢啃。
Compose的编程模式和Flutter很像，会flutter很容易上手，还挺有意思的。

背景

最近学了下Kotlin Flow，顺便在项目中进行了实践，做一下总结。

Flow是什么

按顺序发出多个值的数据流。

本质就是一个生产者消费者模型，生产者发送数据给消费者进行消费。

• 冷流：当执行collect的时候（也就是有消费者的时候），生产者才开始发射数据流。
  
  生产者与消费者是一对一的关系。当生产者发送数据的时候，对应的消费者才可以收到数据。


• 热流：不管有没有执行collect（也就是不管有没有消费者），生产者都会发射数据流到内存中。
  
  生产者与消费者是一对多的关系。当生产者发送数据的时候，多个消费者都可以收到数据

实践场景

场景一：简单列表数据的加载状态

简单的列表显示场景，可以使用onStart，onEmpty，catch，onCompletion等回调操作符，监听数据流的状态，显示相应的加载状态UI。

• onStart：在数据发射之前触发，onStart所在的线程，是数据产生的线程


• onCompletion：在数据流结束时触发，onCompletion所在的线程，是数据产生的线程


• onEmpty：当数据流结束了，缺没有发出任何元素的时候触发。


• catch：数据流发生错误的时候触发


• flowOn：指定上游数据流的CoroutineContext，下游数据流不会受到影响

private fun coldFlowDemo() {

    //创建一个冷流，在3秒后发射一个数据

    val coldFlow = flow<Int> {

        delay(3000)

        emit(1)

    }

    lifecycleScope.launch(Dispatchers.IO) {

        coldFlow.onStart {

            Log.d(TAG, "coldFlow onStart, thread:${Thread.currentThread().name}")

            mBinding.progressBar.isVisible = true

            mBinding.tvLoadingStatus.text = "加载中"

        }.onEmpty {

            Log.d(TAG, "coldFlow onEmpty, thread:${Thread.currentThread().name}")

            mBinding.progressBar.isVisible = false

            mBinding.tvLoadingStatus.text = "数据加载为空"

        }.catch {

            Log.d(TAG, "coldFlow catch, thread:${Thread.currentThread().name}")

            mBinding.progressBar.isVisible = false

            mBinding.tvLoadingStatus.text = "数据加载错误:$it"

        }.onCompletion {

            Log.d(TAG, "coldFlow onCompletion, thread:${Thread.currentThread().name}")

            mBinding.progressBar.isVisible = false

            mBinding.tvLoadingStatus.text = "加载完成"

        }

            //指定上游数据流的CoroutineContext，下游数据流不会受到影响

            .flowOn(Dispatchers.Main)

            .collect {

                Log.d(TAG, "coldFlow collect:$it, thread:${Thread.currentThread().name}")

            }

    }

}

比如上面的例子。
使用flow构建起函数，创建一个冷流，3秒后发送一个值到数据流中。
使用onStart，onEmpty，catch，onCompletion操作符，监听数据流的状态。

日志输出：

coldFlow onStart, thread:main

coldFlow onCompletion, thread:main

coldFlow collect:1, thread:DefaultDispatcher-worker-1

场景二：同一种数据，需要加载本地数据和网络数据

在实际的开发场景中，经常会将一些网络数据保存到本地，下次加载数据的时候，优先使用本地数据，再使用网络数据。

但是本地数据和网络数据的加载完成时机不一样，所以可能会有下面几种场景。

1. 本地数据比网络数据先加载完成：那先使用本地数据，再使用网络数据


2. 网络数据比本地数据先加载完成：

• 网络数据加载成功，那只使用网络数据即可，不需要再使用本地数据了。


• 网络数据加载失败，可以继续尝试使用本地数据进行兜底。

3. 本地数据和网络数据都加载失败：通知上层数据加载失败

实现CacheRepositity

将上面的逻辑进行简单封装成一个基类，CacheRepositity。

相应的子类，只需要实现两个方法即可。

• CResult：代表加载结果，Success 或者 Error。


• fetchDataFromLocal()，实现本地数据读取的逻辑


• fetchDataFromNetWork()，实现网络数据获取的逻辑

abstract class CacheRepositity<T> {

    private val TAG = "CacheRepositity"



    fun getData() = channelFlow<CResult<T>> {

        supervisorScope {

            val dataFromLocalDeffer = async {

                fetchDataFromLocal().also {

                    Log.d(TAG,"fetchDataFromLocal result:$it , thread:${Thread.currentThread().name}")

                    //本地数据加载成功  

                    if (it is CResult.Success) {

                        send(it)

                    }

                }

            }



            val dataFromNetDeffer = async {

                fetchDataFromNetWork().also {

                    Log.d(TAG,"fetchDataFromNetWork result:$it , thread:${Thread.currentThread().name}")

                    //网络数据加载成功  

                    if (it is CResult.Success) {

                        send(it)

                        //如果网络数据已加载，可以直接取消任务,就不需要处理本地数据了

                        dataFromLocalDeffer.cancel()

                    }

                }

            }



            //本地数据和网络数据，都加载失败的情况

            val localData = dataFromLocalDeffer.await()

            val networkData = dataFromNetDeffer.await()

            if (localData is CResult.Error && networkData is CResult.Error) {

                send(CResult.Error(Throwable("load data error")))

            }

        }

    }



    protected abstract suspend fun fetchDataFromLocal(): CResult<T>



    protected abstract suspend fun fetchDataFromNetWork(): CResult<T>



}



sealed class CResult<out R> {

    data class Success<out T>(val data: T) : CResult<T>()

    data class Error(val throwable: Throwable) : CResult<Nothing>()

}

测试验证

写个TestRepositity，实现CacheRepositity的抽象方法。

通过delay延迟耗时来模拟各种场景，观察日志的输出顺序。

private fun cacheRepositityDemo(){

    val repositity=TestRepositity()

    lifecycleScope.launch {

        repositity.getData().onStart {

            Log.d(TAG, "TestRepositity: onStart")

        }.onCompletion {

            Log.d(TAG, "TestRepositity: onCompletion")

        }.collect {

            Log.d(TAG, "collect: $it")

        }

    }

}

本地数据比网络数据加载快

class TestRepositity : CacheRepositity<String>() {

    override suspend fun fetchDataFromLocal(): CResult<String> {

        delay(1000)

        return CResult.Success("data from fetchDataFromLocal")

    }



    override suspend fun fetchDataFromNetWork(): CResult<String> {

        delay(2000)

        return CResult.Success("data from fetchDataFromNetWork")

    }

}

模拟数据：本地加载delay1秒，网络加载delay2秒

日志输出：collect 执行两次，先收到本地数据，再收到网络数据。

onStart

fetchDataFromLocal result:Success(data=data from fetchDataFromLocal) , thread:main

collect: Success(data=data from fetchDataFromLocal)

fetchDataFromNetWork result:Success(data=data from fetchDataFromNetWork) , thread:main

collect: Success(data=data from fetchDataFromNetWork)

onCompletion

网络数据比本地数据加载快

class TestRepositity : CacheRepositity<String>() {

    override suspend fun fetchDataFromLocal(): CResult<String> {

        delay(2000)

        return CResult.Success("data from fetchDataFromLocal")

    }



    override suspend fun fetchDataFromNetWork(): CResult<String> {

        delay(1000)

        return CResult.Success("data from fetchDataFromNetWork")

    }

}

模拟数据：本地加载delay 2秒，网络加载delay 1秒

日志输出：collect 只执行1次，只收到网络数据。

onStart

fetchDataFromNetWork result:Success(data=data from fetchDataFromNetWork) , thread:main

collect: Success(data=data from fetchDataFromNetWork)

onCompletion

网络数据加载失败，使用本地数据

class TestRepositity : CacheRepositity<String>() {

    override suspend fun fetchDataFromLocal(): CResult<String> {

        delay(2000)

        return CResult.Success("data from fetchDataFromLocal")

    }



    override suspend fun fetchDataFromNetWork(): CResult<String> {

        delay(1000)

        return CResult.Error(Throwable("fetchDataFromNetWork Error"))

    }

}

模拟数据：本地加载delay 2秒，网络数据加载失败

日志输出：collect 只执行1次，只收到本地数据。

onStart

fetchDataFromNetWork result:Error(throwable=java.lang.Throwable: fetchDataFromNetWork Error) , thread:main

fetchDataFromLocal result:Success(data=data from fetchDataFromLocal) , thread:main

collect: Success(data=data from fetchDataFromLocal)

onCompletion

网络数据和本地数据都加载失败

class TestRepositity : CacheRepositity<String>() {

    override suspend fun fetchDataFromLocal(): CResult<String> {

        delay(2000)

        return CResult.Error(Throwable("fetchDataFromLocal Error"))

    }



    override suspend fun fetchDataFromNetWork(): CResult<String> {

        delay(1000)

        return CResult.Error(Throwable("fetchDataFromNetWork Error"))

    }

}

模拟数据：本地数据加载失败，网络数据加载失败

日志输出: collect 只执行1次，结果是CResult.Error，代表加载数据失败。

onStart

fetchDataFromNetWork result:Error(throwable=java.lang.Throwable: fetchDataFromNetWork Error) , thread:main

fetchDataFromLocal result:Error(throwable=java.lang.Throwable: fetchDataFromLocal Error) , thread:main

collect: Error(throwable=java.lang.Throwable: load data error)

onCompletion

场景三：多种数据源，按照顺序合并进行展示

在实际的开发场景中，经常一个页面的数据，是需要发起多个网络请求之后，组合数据之后再进行显示。
比如类似这种页面，3种数据，需要由3个网络请求获取得到，然后再进行相应的显示。

实现目标：

1. 接口间不需要互相等待，哪些数据先回来，就先展示哪部分


2. 控制数据的显示顺序

flow combine操作符

可以合并多个不同的 Flow 数据流，生成一个新的流。
只要其中某个子 Flow 数据流有产生新数据的时候，就会触发 combine 操作，进行重新计算，生成一个新的数据。

例子

class HomeViewModel : ViewModel() {



    //暴露给View层的列表数据

    val list = MutableLiveData<List<String?>>()



    //多个子Flow，这里简单都返回String，实际场景根据需要，返回相应的数据类型即可

    private val bannerFlow = MutableStateFlow<String?>(null)

    private val channelFlow = MutableStateFlow<String?>(null)

    private val listFlow = MutableStateFlow<String?>(null)





    init {

        //使用combine操作符

        viewModelScope.launch {

            combine(bannerFlow, channelFlow, listFlow) { bannerData, channelData, listData ->

                Log.d("HomeViewModel", "combine  bannerData:$bannerData,channelData:$channelData,listData:$listData")

                //只要子flow里面的数据不为空，就放到resultList里面

                val resultList = mutableListOf<String?>()

                if (bannerData != null) {

                    resultList.add(bannerData)

                }

                if (channelData != null) {

                    resultList.add(channelData)

                }

                if (listData != null) {

                    resultList.add(listData)

                }

                resultList

            }.collect {

                //收集combine之后的数据，修改liveData的值，通知UI层刷新列表

                Log.d("HomeViewModel", "collect: ${it.size}")

                list.postValue(it)

            }

        }

    }



    fun loadData() {

        viewModelScope.launch(Dispatchers.IO) {

            //模拟耗时操作

            async {

                delay(1000)

                Log.d("HomeViewModel", "getBannerData success")

                bannerFlow.emit("Banner")

            }

            async {

                delay(2000)

                Log.d("HomeViewModel", "getChannelData success")

                channelFlow.emit("Channel")

            }

            async {

                delay(3000)

                Log.d("HomeViewModel", "getListData success")

                listFlow.emit("List")

            }

        }

    }

}

HomeViewModel

1. 提供一个 LiveData 的列表数据给View层使用


2. 内部有3个子 flow ，分别负责相应数据的生产。（这里简单都返回String，实际场景根据需要，返回相应的数据类型即可）。


3. 通过 combine 操作符，组合这3个子flow的数据。


4. collect 接收生成的新数据，并修改liveData的数据，通知刷新UI

View层使用

private fun flowCombineDemo() {

    val homeViewModel by viewModels<HomeViewModel>()

    homeViewModel.list.observe(this) {

        Log.d("HomeViewModel", "observe size:${it.size}")

    }

    homeViewModel.loadData()

}

简单的创建一个 ViewModel ，observe 列表数据对应的 LiveData。

通过输出的日志发现，触发数据加载之后，每次子 Flow 流生产数据的时候，都会触发一次 combine 操作，生成新的数据。

日志输出：

combine  bannerData:null,channelData:null,listData:null

collect: 0

observe size:0



getBannerData success

combine  bannerData:Banner,channelData:null,listData:null

collect: 1

observe size:1



getChannelData success

combine  bannerData:Banner,channelData:Channel,listData:null

collect: 2

observe size:2



getListData success

combine  bannerData:Banner,channelData:Channel,listData:List

collect: 3

observe size:3

总结

具体场景，具体分析。刚好这几个场景，配合Flow进行使用，整体实现也相对简单了一些。

前言

在阅读Kotlin的代码时，经常有看到 :: 这个符号，这个符号专业术语叫做成员引用，在代码中使用可以简化代码，那到底怎么使用呢以及使用的范围，这篇文章就来好好捋一下。

正文

这里虽然很熟悉，但是我们还是从简单说起，需要了解为什么这样设计。

传递函数优化

这里我们举个栗子，就看这个熟悉的sortBy排序函数，先定义People类：

//测试代码

data class People(val name: String,val age: Int){

    //自定义的排序条件

    fun getMax() : Int{

        return age * 10 + name.length

    }

}

然后我们来进行排序：

val people = People("zyh",10)

val people1 = People("zyh1",100)

val peopleList = arrayListOf(people,people1)

//给sortBy传入lambda

peopleList.sortBy { people -> people.getMax() }

这里我们给sortBy函数传递一个lambda，由于sortBy函数是内联的，所以传递给它的lambda会被内联，但是假如现在有个问题，就是这些lambda已经被定义成了函数变量，比如我定义了一个顶层函数：

//定义了一个顶层函数

fun getMaxSort(people: People): Int{

    return (people.age) * 10 + people.name.length

}

或者排序条件已经定义成了一个变量值：

//排序条件

val condition = { people: People -> people.getMax() }

那这时如果我想再进行排序必须要这么写了：

//调用一遍函数

peopleList.sortBy { getMaxSort(it) }

//传递参数

peopleList.sortBy(condition)

然后这里我们可以利用成员引用 :: 符号来优化一下：

//直接就会调用顶层函数getMaxSort

peopleList.sortBy(::getMaxSort)

//直接就会调用People类的getMax函数

peopleList.sortBy(People::getMax)

这里看起来就是语法糖，可以简化代码。

成员引用 ::

你有没有想过这里是为什么，这里使用了 :: 符号其实就是把函数转换成了一个值，首先我们使用

val condition = { people: People -> people.getMax() }

这种时，其实condition就是一个函数类型的变量，这个我们之前文章说过，Kotlin支持完整的函数类型，而使用高阶函数可以用lambda，但是getMaxSort()函数它就是一个函数了，它不是一个值，除非你再外面给它包裹一层构成lambda，所以这里调用condition传递进的是sortBy()中，而getMaxSort(it)是以lambda的形式又包裹了一层。

但是使用 :: 符号后，也就是把函数转换成了一个值，比如 People::getMax 这就是一个值，它代表的就是People内的getMax函数。

而 ::getMaxSort 也是一个值，它表示getMaxSort函数。

使用范围

前面2个例子其实也就表明了这种成员引用的使用范围，一个是类的函数或者属性，还有就是顶层函数，它没有类名，可以省略。

绑定引用

这里再额外说一个知识点，前面说成员引用都是 类名:属性名 这种格式，比如 People::getMax ,但是它在后面KT版本变化后进行了优化，可以看下面代码：

//定义一个people实例

val people = People("zyh",10)

//利用成员引用，把函数转换成值

val ageFun = People::age

val age = ageFun(people)

//直接在对象实例上使用 ::

val ageValue = people::age

从上面我们发现，ageValue的值可以从实例上通过成员引用调用得到，不过这里区别就大了，ageFun是一个函数类型，而ageValue则是一个int值。

总结

总结一下，其实成员引用 :: 很简单，它就是把函数给转成了值，而这个值可以看成是函数类型，这样说就十分好理解了。

不过这个真实原理可不是这么简单，并不是利用lambda又把函数包裹了一层，这里应该是反射的相关知识，我们后续再具体来说其原理，刚好后续有反射相关的文章，大家可以点赞、关注一波。

引言

在前面的几篇文章中分别从DDD概念、核心思想以及代码落地等层面阐述了DDD的落地实践的过程，但是很多同学表示对于DDD的某些概念还是觉得不太好理解，影响了对于DDD的学习以及实际应用。因此本文针对大家反馈的问题进行详细的说明，希望可以用大白话的方式把这些看似复杂的概念形象化、简单化。

领域、子域、核心域等这么多域到底怎么理解？

在DDD的众多概念中，首先需要搞清楚的就是到底什么是领域。因为DDD是领域驱动设计，所以领域是DDD的核心基础概念。那么到底什么是领域呢？领域是指某个业务范围以及在范围内进行的活动。根据这个定义，我们知道领域最重要的一个核心点就是范围，只有限定了问题研究的范围，才能针对具体范围内的问题进行研究分析，在后期 进行微服务拆分的的时候也是根据范围来进行的。

我们开发的软件平台是为了解决用户问题，既然我们需要研究问题并解决问题，那就得先确定问题的范围到底是什么。如果我们做的是电商平台，那么我们研究的是电商这个领域或者说电商这个范围的问题，实体店内的销售情况就不是我们研究的问题范围了。因此我们可以把领域理解为我们需要解决指定业务范围内的问题域。再举个生活中的例子，派出所实际都是有自己的片区的也就是业务范围，户籍管理、治安等都是归片区的派出所负责的。这里的片区实际就是领域，派出所专注解决自己片区内的各种事项。

既然我们研究的领域确定了，或者说研究的问题域以及范围确定了，那么接下来就需要对领域进行进一步的划分和切割。实际上这和我们研究事物的一般方法手段是一致的，一旦某个问题太大无从下手的时候，都会将问题进行一步步的拆解，再逐个进行分析和解决。那么放到DDD中，我们在进行分析领域的时候，如果领域对应的业务范围过大，那么就需要对领域进行拆解划分，形成对应的子域或者说更小的问题域，所以说子域对应的是相对于领域来说，更小的业务范围以及问题域。

回到我们刚才所说的电商领域，它就是一个非常大的领域，因为电商实际还包含了商品、用户、营销、支付、订单、物流等等各种复杂的业务。因此支付域、物流域等就是相对于电商来说更小的业务范围或者更小的问题域，那么这部分领域就是对于电商这个领域的子域，相当于对电商这个业务范围的进一步的划分。

搞清楚了领域和子域的区别之后，那么怎么理解核心域、通用域以及支撑域这么多其他的域呢（域太多了，我脑袋开始嗡嗡响了）？领域和子域是按照范围大小进行区分的，那么核心域、通用域等实际就是按照功能属性进行划分的。

核心域：平台的核心竞争力、最重要的业务，比如对于阿里来说，电商就是核心域。

通用域：其他子域沉淀的通用能力，没有定制化的能力，比如公司的数据中台。

支撑域：不包含核心业务能力也不是各个子域的通用能力沉淀。

那么为什么划分了子域之后，还要分什么核心域、通用域呢？实际上这样划分的目的是根据子域的属性，确定公司对于不同域的资源投入。将优势的资源投入到具备核心竞争力的域上，也是为了让产品更加具备竞争力，就是所谓的钱要花到刀刃上。

限界上下文？限界是什么？上下文又是什么？

限界上下文我觉得是DDD中一个不太好理解的概念，光看这个不明觉厉的名字，甚至有点不知道它到底想表达什么样的意思。我们先来看下限界上下文的原文---Bounded Context，通过原文我们可以看得出来，实际上限界上下文这个翻译增加了我们的理解成本。而反观Bounded Context这个原文实际更好理解一点，即为有边界的上下文。这里给大家一个小建议，如果技术上某个概念不好理解，那么不妨去看看它的原文是什么，大部分情况下原文会比翻译过来的更好理解，更能反映设计者想要表达的真实含义。

大家都知道我们的语言是有上下文环境的，有的时候同样一句话在不同的语言环境或者说语言上下文中，所代表的意思是不一样的。打个比方假如你有一个女朋友，你们约好晚上一起去吃饭，你在去晚上吃饭地方的路上，这个时候你收到一条来自女朋友的语音：“我已经到龙翔桥了，你出来后往苹果店走。如果你到了，我还没到，你就等着吧。如果我到了，你还没到，你就等着吧。”这里的你就等着吧，在不同的语境下包含的意思是不同的，一个是陈述事实，一个让你瑟瑟发抖。

因此，既然语言本身就有上下文，那么用通用语言描述的业务肯定也是有边界的。DDD中的限界上下文就是用来圈定业务范围的，目的是为了确保业务语言在限界上下文内的表达唯一，不会产生额外的歧义。这个时候大家会不会有另外一个问题，那么这个限界上下文到底是一个逻辑概念还是代码层面会有一个实实在在的边界呢？

按照我自己的理解，限界上下文既是概念上的业务边界，也是代码层面的逻辑逻辑边界。为什么这么说呢？我们在进行业务划分的时候，领域划分为子域集合，子域再划分为子子域集合，那么子子域的业务边界有时候就会和限界上下文的边界重合，也就是说子子域本身就是限界上下文，那么此时限界上下文就是业务边界。在代码落地的过程中，用户服务涉及到用户的创建、用户信息的修改等操作。肯定不会到订单服务中去做这些事情。因为他们属于不同的业务域，也就是说订单相关的操作已经超越了用户的边界上下文，因此它应该在订单的边界上下文中进行。

域和边界上下文的关系是一对一或者一对多的关系，实际上我认为域和限界上下文本质上一致的，应该是为什么这么说呢，比如我们做的微服务当中用户服务，比如，肯定不会到订单服务中去做这些事情。因为他们属于不同的业务域，也就是说订单相关的操作已经超越了用户的边界上下文，因此它应该在订单的限界上下文中进行。限界上下文最主要的作用就是限定哪些业务面描述以及业务动作在这个限界当中。

总结
DDD在实际落地实践过程中会遇到各种各样的问题，首当其冲的就是一些核心概念晦涩难懂，阻碍了技术人员对DDD的理解和掌握。本文对DDD比较难理解的核心概念进行了详细的描述，相信通过本文大家对于这些核心概念的理解能够更加深入。

创作不易，如果各位同学觉得文章还不错的话，麻烦点赞+收藏+评论交流哦。老样子，文末和大家分享一首诗词。

西江月▪中秋和子由

世事一场大梦，人生几度秋凉？夜来风叶已鸣廊，看取眉头鬓上。

酒贱常愁客少，月明多被云妨。中秋谁与共孤光，把盏凄然北望。

最近在创建 bottomSheet的时候遇到一个问题：弹窗的高度无法根据其内容自适应

先放上显示弹窗的代码，如下：

Future<T?> showSheet<T>(

    BuildContext context,

    Widget body, {

      bool scrollControlled = false,

      Color bodyColor = Colors.white,

      EdgeInsets? bodyPadding,

      BorderRadius? borderRadius,

    }) {

  const radius = Radius.circular(16);

  borderRadius ??= const BorderRadius.only(topLeft: radius, topRight: radius);

  bodyPadding ??= const EdgeInsets.all(20);

  return showModalBottomSheet(

      context: context,

      elevation: 0,

      backgroundColor: bodyColor,

      shape: RoundedRectangleBorder(borderRadius: borderRadius),

      barrierColor: Colors.black.withOpacity(0.25),

      // A处

      constraints: BoxConstraints(

          maxHeight: MediaQuery.of(context).size.height - MediaQuery.of(context).viewPadding.top),

      isScrollControlled: scrollControlled,

      builder: (ctx) => Padding(

        padding: EdgeInsets.only(

          left: bodyPadding!.left,

          top: bodyPadding.top,

          right: bodyPadding.right,

          // B处

          bottom: bodyPadding.bottom + MediaQuery.of(ctx).viewPadding.bottom,

        ),

        child: body,

      ));

}

其中，A处、B处的作用就是，让弹窗的内容始终显示在安全区域内

高度自适应问题

首先，我们在弹窗中显示点内容：

showSheet(context, Column(

    crossAxisAlignment: CrossAxisAlignment.stretch,

    children: const [

        Text('这是第一行'),

    ],

));

效果如下图所示：

此时，我们只需要将显示内容的代码改为如下：

showSheet(context, Column(

  mainAxisSize: MainAxisSize.min,  // 这一行是关键所在

  crossAxisAlignment: CrossAxisAlignment.stretch,

  children: const [

    Text('这是第一行'),

  ],

));

现在的效果图如下：

现在我们可以看到，弹窗的高度已经根据内容自适应了。

内容溢出问题

前面的解决方式，仅在内容高度小于默认高度时有效。当内容过多，高度大于默认高度时，就会出现溢出警告，如下图所示：

此时，我们该怎么办呢？

答案是：运用 showModalBottomSheet 的 isScrollControlled 参数，将其设置为true即可，代码如下：

showSheet(context, Column(

  mainAxisSize: MainAxisSize.min,

  crossAxisAlignment: CrossAxisAlignment.stretch,

  children: const [

    Text('这是第一行'),

    Text('这是很长长..（此处省略若干字）..的一段话,')

  ],

), scrollControlled: true); // 这一行用于告诉系统，弹窗的内容完全由我们自己管理

此时，效果图如下：

showSheet 补充说明

对前面showSheet代码中，A处、B处的进一步说明：

A处：如果不对内容的高度进行限制，则内容会显示在状态栏之后，而引起用户交互问题。如下图所示：

B处：如果不加 MediaQuery.of(ctx).viewPadding.bottom 这一句，则内容有可能会显示在底部横条的下方，此时也不利于交互

最终版本图样

内容较少（高度跟随内容自适应）：

内容很多（顶部、底部均显示在安全区域内）：

一. 项目开始

1. 新建flutter项目时首先明确native端用的语言 java还是kotlin , objectC 还是swift ,否则选错了后期换挺麻烦的

2. 选择自己的路由管理和状态管理包,决定项目架构
以我而言 第一个项目用的 fluro 和 provider 一个路由管理一个状态管理,项目目录新建store和route文件夹,分别存放provider的model文件和fluro的配置文件,到了第二个项目,发现了Getx,一个集合了依赖注入,路由管理,状态管理的包,用起来! 项目目录结构有了很大的变化,整体条理整洁

第一个

第二个

3. 常用包配置,比如 Getx 需要把外层MaterialApp换成GetMaterialApp, flutter_screenutil 需要初始化设计图比例,provider全局导入,Dio 封装,拦截器,网络提示等等

二. 全局配置

1. 复用样式

1. 由于flutter 某些小widget复用性很高,而App 需要统一样式 ,样式颜色之类的预设文件放在command文件夹内

colours.dart ,可以预设静态class,存储常用主题色

styles.dart,可以预设 字体样式 分割线样式 各种固定值间隔

2. 建议全局管理后端接口,整洁还便于维护,舒服

3. models 文件夹

models 文件夹,可能在web端并不常用,但是在dart里我觉得很需要,后端返回的Json 字符串,一定要通过model类 格式化为一个类,可以极大地减少拼写错误或者类型错误, . 语法也比 [''] 用起来舒服的多推荐一个网站 quickType 输入json对象,一键输出model类!

4. 是否强制横竖屏?

需要在main.dart里配置好

// 强制横屏

  SystemChrome.setPreferredOrientations(

      [DeviceOrientation.landscapeLeft, DeviceOrientation.landscapeRight]);

5. 是否需要修改顶部 底部状态栏布局以及样式?

用 SystemUiOverlayStyle 和 SystemChrome.setSystemUIOverlayStyle(systemUiOverlayStyle); 来配置

6. 设置字体不跟随系统

参考地址

class MyApp extends StatefulWidget {

  @override

  _MyAppState createState() => _MyAppState();

}



class _MyAppState extends State with WidgetsBindingObserver {

  @override

  Widget build(BuildContext context) {

    return MaterialApp(

      debugShowCheckedModeBanner: false,

      home: Container(color: Colors.white),

      builder: (context, widget) {

        return MediaQuery(

          //设置文字大小不随系统设置改变

          data: MediaQuery.of(context).copyWith(textScaleFactor: 1.0),

          child: widget,

        );

      },

    );

  }

}

7. 国际化配置

使用部分widget会显示英文,比如IOS风格的dialog,显示中文这需要设置一下了,
首先需要一个包支持,

  flutter_localizations:

    sdk: flutter

引入包,然后在main.dart MetrialApp 的配置项中加入

   // 设置本地化，部分原生内容显示中文，例如长按选中文本显示复制、剪切

      localizationsDelegates: [

        GlobalMaterialLocalizations.delegate, //国际化

        GlobalWidgetsLocalizations.delegate,//国际化

        const FallbackCupertinoLocalisationsDelegate() // 这里是为了解决一个报错 看第 8 条

      ],

      //国际化

      supportedLocales: [

        const Locale('zh', 'CH'),

        const Locale('en', 'US'),

      ],

8. 使用CupertinoAlertDialog报错：The getter 'alertDialogLabel' was called on null

解决方法:
在main.dart中 加入如下类,然后在MetrialApp 的 localizationsDelegates 中实例化 见第 7 条

class FallbackCupertinoLocalisationsDelegate

    extends LocalizationsDelegate {

  const FallbackCupertinoLocalisationsDelegate();



  @override

  bool isSupported(Locale locale) => true;



  @override

  Future load(Locale locale) =>

      DefaultCupertinoLocalizations.load(locale);



  @override

  bool shouldReload(FallbackCupertinoLocalisationsDelegate old) => false;

}

9. ImageCache

最近版本的flutter更新,限制了catchedImage的上限, 100张 1000mb ,而业务需求却需要缓存更多,设置一下了这需要

    class ChangeCatchImage extends WidgetsFlutterBinding {

  @override

  createImageCache() *{*

    Global.myImageCatche = ImageCache()

      ..maximumSize = 1000

      ..maximumSizeBytes = 1000 << 20; // 1000MB

    return Global.myImageCatche;

  }

}

然后在main.dart runApp那里实例化一下ChangeCatchImage() 就可以了

三. 业务模块

常见的业务模块代码分析,比如登录页,闪屏页,首页,退出登录等

1. 首先安利一下Getx

一个文件夹就是一个业务模块,独自管理数据,通过依赖注入数据共享,
非常舒服

包括 logic 逻辑控制层 state 数据管理层 view 视图组件层 ,当前业务的复用widget写在文件夹下

2. 登录模块

作为app的入口门户,炫酷美观是少不了的,这就需要关注性能优化,而输入的地方,验证的逻辑要有安全设计

• 首先关于动画性能优化,最关键的一点是精准的更新需要变化的组件,我们可以通过devtool的工具查看更新范围

• 其次时安全设计,简单的来看,限制登录次数,禁止简易密码,加密传输,验证token等,进阶版的比如,防止参数注入,过滤敏感字符等


• 登录之前的账户验证,密码验证,必填项等,然后登录请求,需要加loading,按钮禁用,就不需要防抖了


• 登录之后保存到本地用户基本信息(可能存在安全问题,暂未深究),然后下次登陆默认检测是否存在基本信息,并验证过期时间,和token,之后隐式登录到首页

3. splash闪屏模块

app登陆首页的准备页面,可以嵌入广告,或者定制软件宣传动画,提示三秒后跳过
如何优雅的加入app闪屏页?
其实就是在main.dart里把初始化页面设置为splash页面,之后通过跳转逻辑
判断去首页还是登录注册页面
比如这里我用了Getx 就简单配置一下

4. 操作引导模块

第一次使用app,或者重大更新之后往往会有操作引导
我的项目里用到了两种类型的操作引导

成果图
第一种

第二种

二者都是基于overlayEntry()和Overlay.of(context).insert(overlayEntry)实现的
第二种用了一个包 操作引导 flutter_intro: ^2.2.1,绑定Widget的GlobalKey,来获取Element信息,拿到位置大小,确保框选的位置正确,外层遮罩与第一种一样都是用overlayEntry()创建的

创建之后,展示出来
Overlay.of(context).insert(your_overlayEntry)
在某个按钮处切换下一个 比如点击我知道了,下一页之类的

     onPressed: () {

                  // 执行 remove 方法销毁 第一个overlayEntry 实例

                  overlayEntryTap.remove();

                  // 第二个

                  Overlay.of(context).insert(overlayEntryScale);

                },

关于第二个实现涉及的flutter_intro包,粘一下我的代码,详细的可以参照pub食用

final intro = Intro(

  // 一共有几步,这里就会创建2个GlobalKey,一会用到

  stepCount: 2,

  // 点击遮罩下一个

  maskClosable: true,

  // 高亮区域与 widget 的内边距

  padding: EdgeInsets.all(0),

  // 高亮区域的圆角半径

  borderRadius: BorderRadius.all(Radius.circular(4)),

  // use defaultTheme

  widgetBuilder: StepWidgetBuilder.useDefaultTheme(

    texts: ["点击添加收藏", "下拉添加书签"],

    buttonTextBuilder: (currPage, totalPage) {

      return currPage < totalPage - 1

          ? '我知道了 ${currPage + 3}/${totalPage + 2}'

          : '完成 ${currPage + 3}/${totalPage + 2}';

    },

  ),

);



......

// 这里用到key来绑定任意Widget

  Positioned(

              key: intro.keys[1],

              top: 0,

              right: 20,

        ...

  )

......

5. CustomPaint 绘图画板模块

成果图

当初选择flutter就是因为,有大量的绘制需求,看中了自带skia,绘制效率高且流畅而且具备平台一致性
结果坑也不少

首先来讲一下 猪脚 CustomPaint

顾名思义,这是一个个性化绘制组件,他的工作就是给你创建一个画布,你想怎么画怎么画,我们直接看怎么用
首先格式化写法

• 首先 需要写在widget 树里吧
  

  Container( 
  
  child: CustomPaint(
  
  painter: myPainter(),
  
  ),
  

  
  看一下参数列表,发现painter 接收一个CustomePainter对象,这里可以注意一下child参数,很奇怪明明绘制界面都放在painter里了,留一个child干啥用??? 其实有大用,这里面放是他的子widget,但是不参与绘制更新的,通俗一点就是我绘制一片流动的云彩,但是有个静止的太阳,云彩的位置是实时repaint的,这时就可以把太阳widget放在child中,优化性能

• 接下来我们创建myPainter()

    class myPainter extends CustomPainter { 

    @override 

    void paint(Canvas canvas, Size size) { 

    // 创建画笔 

    final Paint paint = Paint(); 

    // 绘制一个圆 

    canvas.drawCircle(Offset(50, 50), 5, paint); 

    } 

    @override 

    bool shouldRepaint(CustomPainter oldDelegate) => false;

    

• 到这里 我们需要实现两个重要的函数(如上代码)

第一个paint()函数,自带了画布对象 canvas,和画布尺寸 size,这样我们就可以使用Canvas的内置绘制函数了!
而绘制函数,都需要接收一个Paint 画笔对象

这个画笔对象,就是用来设置画笔颜色,粗细,样式,接头样式等等

Paint paint = Paint(); 

//设置画笔

paint ..style = PaintingStyle.stroke 

      ..color = Colors.red 

      ..strokeWidth = 10;

    

第二个函数shouldRepaint() 顾名思义判断是否需要重绘,如果返回false就是不需要重绘,只执行一次paine(),返回true就是总是重绘,依据实际需求设置
如果需要绘制类似于 根据数值不断变高的柱状图动画

代码如下(搬走就能用哦)

class BarChartPainter extends CustomPainter {

  final List datas;

  final List datasrc;

  final List xAxis;

  final double max;

  final Animation animation;



  BarChartPainter(

      {@required this.xAxis,

      @required this.datas,

      this.max,

      this.datasrc,

      this.animation})

      : super(repaint: animation);



  @override

  void paint(Canvas canvas, Size size) {

    _darwBars(canvas, size);

    _drawAxis(canvas, size);

  }



  @override

  bool shouldRepaint(BarChartPainter oldDelegate) => true;



  // 绘制坐标轴

  void _drawAxis(Canvas canvas, Size size) {

    final double sw = size.width;

    final double sh = size.height;



    // 使用 Paint 定义路径的样式

    final Paint paint = Paint()

      ..color = Colors.grey

      ..style = PaintingStyle.stroke

      ..strokeWidth = 1

      ..strokeCap = StrokeCap.round;



    // 使用 Path 定义绘制的路径，从画布的左上角到左下角在到右下角

    final Path path = Path()

      ..moveTo(40, sh)

      ..lineTo(sw - 20, sh);



    // 使用 drawPath 方法绘制路径

    canvas.drawPath(path, paint);

  }



  // 绘制柱形

  void _darwBars(Canvas canvas, Size size) {

    final sh = size.height;

    final paint = Paint()..style = PaintingStyle.fill;

    final double _barWidth = size.width / 20;

    final double _barGap = size.width / 25 * 2 + 18;

    final double textFontSize = 14.0;



    for (int i = 0; i < datas.length; i++) {

      final double data = datas[i] * ((size.height - 15) / max);

      final top = sh - data;

      // 矩形的左边缘为当前索引值乘以矩形宽度加上矩形之间的间距

      final double left = i * _barWidth + (i * _barGap) + _barGap;

      // 使用 Rect.fromLTWH 方法创建要绘制的矩形

      final rect = RRect.fromLTRBAndCorners(

          left, top, left + _barWidth, top + data,

          topLeft: Radius.circular(5), topRight: Radius.circular(3));

      // 使用 drawRect 方法绘制矩形



      final offset = Offset(

        left + _barWidth / 2 - textFontSize / 2 - 8,

        top - textFontSize - 5,

      );

      paint.color = Color(0xFF59C8FD);



      //绘制bar

      canvas.drawRRect(rect, paint);



      // 使用 TextPainter 绘制矩形上放的数值

      TextPainter(

        text: TextSpan(

          text: datas[i] == 0.0 ? '' : datas[i].toStringAsFixed(0) + " %",

          style: TextStyle(

            fontSize: textFontSize,

            color: paint.color,

            // color: Colours.gray_33,

          ),

        ),

        textAlign: TextAlign.center,

        textDirection: TextDirection.ltr,

      )

        ..layout(

          minWidth: 0,

          maxWidth: textFontSize * data.toString().length,

        )

        ..paint(canvas, offset);



      final xData = xAxis[i];

      final xOffset = Offset(left, sh + 6);

      // 绘制横轴标识

      TextPainter(

        textAlign: TextAlign.center,

        text: TextSpan(

          text: '$xData' != ''

              ? '$xData'.substring(0, 4) + '-' + '$xData'.substring(4, 6)

              : '',

          style: TextStyle(

            fontSize: 12,

            color: Colors.black,

          ),

        ),

        textDirection: TextDirection.ltr,

      )

        ..layout(

          minWidth: 0,

          maxWidth: size.width,

        )

        ..paint(canvas, xOffset);

    }

  }

}

好了,customPainter,大体就这么用,下面回归话题,绘制画板
其实整体任务相当复杂,这里刨析一处,其他的融会贯通

拿最经典的铅笔画图来说
其实单纯的实现铅笔画图,甚至带笔锋,类似于签名,都很简单,网上教程一堆

大体思路就是 加一个GestureDetector ,主要用 onPanUpdate事件实时触发绘制动作,用canvas绘制出来
绘制简单,但是性能优化复杂

这里直接给出我测试的最优解
先把新的坐标点与之前的点连成线,可以一次多连接几个,也就是类似于节流的处理手法,
比如等panUpate触发了五次回调,先都把这五个点连接成线,第六次再统一绘制一条线(要是还有啥好办法,希望不吝赐教!)
详细的以后单独整理出来一个项目

6. websocket 即时通讯模块

成果图

只做了最基本的文字 图片 文件功能

简单把各项功能实现说一下,以后会详细整理,并加入音视频

• 
  

  关于websocket

  
  

  首先肯定是连接websocket,用到一个包 web_socket_channel

  
  

  然后初始化websocket

  
  

  // 初始化websocket
  
  initWebsocket(){
  
   Global.channel = IOWebSocketChannel.connect(
  
     WebsocketUrl, // websocket地址
  
     //这个参数注意一下, 这里是每隔10000毫秒发送ping,如果间隔10000ms没收到pong,就默认断开连接
  
     //所以收网速等影响,这个参数如果太小,比如100ms就会,出现过一阵子自己断开连接的问题,参考实际设置
  
     pingInterval: Duration(milliseconds: 10000),
  
   );
  
   // 监听服务端消息
  
   Global.channel.stream.listen(
  
       (mes) => onMessage(mes),// 处理消息
  
       onError: (error) => {onError(error)}, // 连接错误
  
       onDone: () => {onDone()}, // 断开连接
  
       cancelOnError: true //设置错误时取消订阅
  
   );
  
  }
  

  
  


• 
  

  处理消息

  
  

  进入页面加载聊天消息,长列表还是得用ListView.build(),消息多的时候体验好很多

  
  

  每次监听到新消息,加入到数组中,并更新视图,这一步不同的状态管理方法不同.

  
  

  加入消息这里就有难点了

  
  

  首先分四种情况 a. 自己发的并且在ListView底部,b. 自己发的但是不在ListView底部, c. 别人发的消息并且在底部,d. 别人发的不在底部.

  
  

  a 和 b,c: 只要是自己发得就滚动到底部,在底部时就滚动的慢点,有种消息上拉的感觉

  
  

  // 这里要确保在LIstView中已经加入并渲染完成新消息
  
  // 我的处理就是加了一个延迟,再滚动
  
  // 直接滚动到ListView底部
  
  scrollController.jumpTo(scrollController.position.maxScrollExtent);
  
  // 滚动到某个确定的元素
  
  Scrollable.ensureVisible(
  
       // 给每一条消息对象加GlobalKey,获取到当前上下文
  
       state.messageList[index].key.currentContext,
  
       duration: Duration(milliseconds: 100),
  
       curve: Curves.easeInOut,
  
       // 控制对齐方式
  
       alignmentPolicy: ScrollPositionAlignmentPolicy.keepVisibleAtEnd);
  

  
  

  d : 这种情况,做了个类似于微信的提示

  
  

但是点击定位到消息有坑了,因为用的listView.build,当你在翻阅上边的消息,下面的消息并没有加载,因此获取不到currentContext,因为元素并没有渲染,也就定位错乱了,目前最理想的解决办法就是,往上翻的时候,之下的记录全部渲染,往下滑时再依次清.

• 
  

  文件和图片

  
  

  用到了几个包 file_picker, open_file, path_provider

  
  

  file_picker ,用来选择文件和图片,可以配置单选多选,需要在安卓的配置文件里加权限

  
  

  open_file , 类似于微信点击文件,先下载,然后调用本地默认程序打开文件

  
  

  path_provider,提供系统可用路径,用于创建文件目录

  
  

  具体使用如下

  
  

   // 访问不到app私有目录 导致我卡了很久...
  
   // Directory dirloc = await getTemporaryDirectory();
  
   // 访问外置存储目录
  
   final dirPath = await getExternalStorageDirectory();
  
   Directory file = Directory(dirPath.path + "/" + "temFile");
  
   // 不存在就创建目录
  
    try {
  
     bool exists = await file.exists();
  
     if (!exists) {
  
       await file.create(); // 创建了temFile 目录 用于缓存文件
  
     }
  
   } catch (e) {
  
     print(e);
  
   }
  
   // 下边就很关键了 可能不同的后端数据不同实现
  
    // 请求存储权限 需要一个包 permission_handler: ^6.1.1
  
     Permission.storage.request().then((value) async {
  
     //如果许可
  
     if (value.isGranted) {
  
       // 判断文件是否存在 wjmc 就是一个变量存储着文件名
  
       File _tempFile = File(file.path + '/' + wjmc);
  
       if (!await _tempFile.exists()) {
  
         try {
  
           //1、创建文件地址 带扩展 我用了getx cstate 
  
           //  final ChatState cState = Get.find().state;
  
           // 这是一个通用组件 不管理数据 从chatState里注入
  
           cState.path = file.path + '/' + wjmc;
  
           //2、下载文件到本地
  
           cState.downloading.value = nbbh; 
  
           var response = await dio.get(fileUrl);
  
           Stream resp = response.data.stream;
  
           //4. 转为uint8类型
  
           final Uint8List bytes =
  
               await consolidateHttpClientResponseBytes(resp);
  
           //5. 转为List 并写入文件
  
           final List _filelist = List.from(bytes);
  
           final filePath = File(cState.path);
  
           await filePath.writeAsBytes(_filelist,
  
               mode: FileMode.append, flush: true);
  
         } catch (e) {
  
           print(e);
  
         }
  
       }
  
       cState.downloading.value = '';
  
      // 6.这里可以记录位置,保存path到一个数组里,退出软件之后清除缓存 我没做
  
       open(cState.path);
  
     }
  
   });
  
  // 读取Stream 文件流 处理为Uint8List
  
  Future consolidateHttpClientResponseBytes(Stream response) {
  
   final Completer completer = Completer.sync();
  
   final List> chunks = >[];
  
   int contentLength = 0;
  
   response.listen((chunk) {
  
     chunks.add(chunk);
  
     contentLength += chunk.length;
  
   }, onDone: () {
  
     final Uint8List bytes = Uint8List(contentLength);
  
     int offset = 0;
  
     for (List chunk in chunks) {
  
       bytes.setRange(offset, offset + chunk.length, chunk);
  
       offset += chunk.length;
  
     }
  
     completer.complete(bytes);
  
   }, onError: completer.completeError, cancelOnError: true);
  
  
  
   return completer.future;
  
  }
  
  void open(path) {
  
  // 下载完成 准备打开文件
  
   showCupertinoDialog(
  
     context: Get.context,// 舒服
  
     builder: (context) {
  
       return Material(
  
         color: Colors.transparent,
  
         child: CupertinoAlertDialog(
  
             title: Padding(
  
               padding: EdgeInsets.only(bottom: 10),
  
               child: Text("提示"),
  
             ),
  
             content: Padding(
  
               padding: EdgeInsets.only(left: 5),
  
               child: Text("是否打开文件?"),
  
             ),
  
             actions: [
  
               CupertinoButton(
  
                 child: Text(
  
                   "取消",
  
                   style: TextStyle(color: Colours.gray_88),
  
                 ),
  
                 onPressed: () {
  
                   Get.back();
  
                 },
  
               ),
  
               CupertinoButton(
  
                   child: Text("确定"),
  
                   onPressed: () async {
  
                     Get.back();
  
                     // 直接调用就能打开,会通过系统默认程序打开 比如.doc 默认用office等.
  
                     await OpenFile.open(
  
                       cState.path,
  
                     );
  
                   }),
  
             ]),
  
       );
  
     },
  
   );
  
  }
  

  
  

  音视频用的小鱼易连,但是木有Flutter SDK ,只能基于安卓的去封装,以后有机会再讲讲.