在前面的文章里，通过比较基础的手段演示了如何开启协程、如何挂起、恢复协程。并没有涉及到如何切换线程执行，而没有切换线程功能的协程是没有灵魂的。

本篇将重点分析协程是如何切换线程执行以及如何回到原来的线程执行等知识。

通过本篇文章，你将了解到：

1. 如何指定协程运行的线程？


2. 协程调度器原理


3. 协程恢复时线程的选择

1. 如何指定协程运行的线程？

Android 切换线程常用手法

常规手段

平常大家用的切换到主线程的手段：Activity.runOnUiThread(xx)，View.post(xx)，Handler.sendMessage(xx) 等简单方式。另外还有一些框架，如AsyncTask、RxJava、线程池等。
它们本质上是借助了Looper+Handler功能。

先看个Demo，在子线程获取学生信息，拿到结果后切换到主线程展示：

    private inner class MyHandler : Handler(Looper.getMainLooper()) {

        override fun handleMessage(msg: Message) {

            //主线程弹出toast

            Toast.makeText(context, msg.obj.toString(), Toast.LENGTH_SHORT).show()

        }

    }



    //获取学生信息

    fun showStuInfo() {

        thread {

            //模拟网络请求

            Thread.sleep(3000)

            var handler = MyHandler()

            var msg = Message.obtain()

            msg.obj = "我是小鱼人"

            //发送到主线程执行

            handler.sendMessage(msg)

        }

    }

我们知道Android UI 刷新是基于事件驱动的，主线程一直尝试从事件队列里拿到待执行的事件，没拿到就等待，拿到后就执行对应的事件。这也是Looper的核心功能，不断检测事件队列，而往队列里放事件即是通过Handler来操作的。

子线程通过Handler 往队列里存放事件，主线程在遍历队列，这就是一次子线程切换到主线程运行的过程。

当然了，因为主线程有消息队列，若想要抛事件到子线程执行，在子线程构造消息队列即可。

协程切换到主线程

同样的功能，用协程实现：

    fun showStuInfoV2() {

        GlobalScope.launch(Dispatchers.Main) {

            var stuInfo = withContext(Dispatchers.IO) {

                //模拟网络请求

                Thread.sleep(3000)

                "我是小鱼人"

            }



            Toast.makeText(context, stuInfo, Toast.LENGTH_SHORT).show()

        }

    }

很明显，协程简洁太多。

相较于常规手段，协程无需显示构造线程，也无需显示通过Handler发送，在Handler里接收信息并展示。

我们有理由猜测，协程内部也是通过Handler+Looper实现切换到主线程运行的。

协程切换线程

当然协程不只能够从子线程切换到主线程，也可以从主线程切换到子线程，甚至在子线程之间切换。

    fun switchThread() {

        println("我在某个线程，准备切换到主线程")

        GlobalScope.launch(Dispatchers.Main) {

            println("我在主线程，准备切换到子线程")

            withContext(Dispatchers.IO) {

                println("我在子线程，准备切换到子线程")

                withContext(Dispatchers.Default) {

                    println("我在子线程，准备切换到主线程")

                    withContext(Dispatchers.Main) {

                        println("我在主线程")

                    }

                }

            }

        }

    }

无论是launch()函数还是withContext()函数，只要我们指定了运行的线程，那么协程将会在指定的线程上运行。

2. 协程调度器原理

指定协程运行的线程

接下来从launch()源码出发，一步步探究协程是如何切换线程的。

launch()简洁写法：

    fun launch1() {

        GlobalScope.launch { 

            println("launch default")

        }

    }

launch()函数有三个参数，前两个参数都有默认值，第三个是我们的协程体，也即是 GlobalScope.launch 花括号里的内容。

#Builders.common.kt

public fun CoroutineScope.launch(

    context: CoroutineContext = EmptyCoroutineContext,

    start: CoroutineStart = CoroutineStart.DEFAULT,

    block: suspend CoroutineScope.() -> Unit

): Job {

    //构造新的上下文

    val newContext = newCoroutineContext(context)

    //构造completion

    val coroutine = if (start.isLazy)

        LazyStandaloneCoroutine(newContext, block) else

        StandaloneCoroutine(newContext, active = true)

    //开启协程

    coroutine.start(start, coroutine, block)

    return coroutine

}

接着看newCoroutineContext 实现：

#CoroutineContext.kt

actual fun CoroutineScope.newCoroutineContext(context: CoroutineContext): CoroutineContext {

    //在Demo 环境里 coroutineContext = EmptyCoroutineContext

    val combined = coroutineContext + context

    //DEBUG = false

    val debug = if (DEBUG) combined + CoroutineId(COROUTINE_ID.incrementAndGet()) else combined

    //没有指定分发器，默认使用的分发器为：Dispatchers.Default

    //若是指定了分发器，就用指定的

    return if (combined !== Dispatchers.Default && combined[ContinuationInterceptor] == null)

        debug + Dispatchers.Default else debug

}

这块涉及到CoroutineContext 一些重载运算符的操作，关于CoroutineContext 本次不会深入，只需理解其意思即可。

只需要知道：

CoroutineContext 里存放着协程的分发器。

协程有哪些分发器呢？

Dispatchers.Main

UI 线程，在Android里为主线程

Dispatchers.IO

IO 线程，主要执行IO 操作

Dispatchers.Default

主要执行CPU密集型操作，比如一些计算型任务

Dispatchers.Unconfined

不特意指定使用的线程

指定协程在主线程运行

不使用默认参数，指定协程的分发器：

    fun launch1() {

        GlobalScope.launch(Dispatchers.Main) {

            println("我在主线程执行")

        }

    }

以此为例，继续分析其源码。

上面提到过，开启协程使用coroutine.start(start, coroutine, block)函数：

    #AbstractCoroutine.kt

    fun <R> start(start: CoroutineStart, receiver: R, block: suspend R.() -> T) {

        //start 为CoroutineStart里的函数

        //最终会调用到invoke

        start(block, receiver, this)

    }

    #CoroutineStart.kt

    public operator fun <R, T> invoke(block: suspend R.() -> T, receiver: R, completion: Continuation<T>): Unit =

        when (this) {

            //this 指的是StandaloneCoroutine，默认走default

            CoroutineStart.DEFAULT -> block.startCoroutineCancellable(receiver, completion)

            CoroutineStart.ATOMIC -> block.startCoroutine(receiver, completion)

            CoroutineStart.UNDISPATCHED -> block.startCoroutineUndispatched(receiver, completion)

            CoroutineStart.LAZY -> Unit // will start lazily

        }

CoroutineStart.DEFAULT、CoroutineStart.ATOMIC 表示的是协程的启动方式，其中DEFAULT 表示立即启动，也是默认启动方式。

接下来就是通过block去调用一系列的启动函数，这部分我们之前有详细分析过，此处再简单过一下：

block 代表的是协程体，其实际编译结果为：匿名内部类，该类继承自SuspendLambda，而SuspendLambda 间接实现了Continuation 接口。

继续看block的调用：

#Cancellable.kt

//block 的扩展函数

internal fun <R, T> (suspend (R) -> T).startCoroutineCancellable(

    receiver: R, completion: Continuation<T>,

    onCancellation: ((cause: Throwable) -> Unit)? = null

) =

    //runSafely 为高阶函数，里边就是调用了"{}"里的内容

    runSafely(completion) {

        createCoroutineUnintercepted(receiver, completion).intercepted().resumeCancellableWith(Result.success(Unit), onCancellation)

    }

流程流转到createCoroutineUnintercepted()函数了，在少年，你可知 Kotlin 协程最初的样子？ 里有重点分析过：该函数是真正创建协程体的地方。

直接上代码：

#IntrinsicsJvm.kt

actual fun <R, T> (suspend R.() -> T).createCoroutineUnintercepted(

    receiver: R,

    completion: Continuation<T>

): Continuation<Unit> {

    //包装completion

    val probeCompletion = probeCoroutineCreated(completion)

    return if (this is BaseContinuationImpl)

        //创建协程体类

       //receiver completion 皆为协程体对象 StandaloneCoroutine

        create(receiver, probeCompletion)

    else {

        createCoroutineFromSuspendFunction(probeCompletion) {

            (this as Function2<R, Continuation<T>, Any?>).invoke(receiver, it)

        }

    }

}

该函数的功能为创建一个协程体类，我们暂且称之为MyAnnoy。

class MyAnnoy extends SuspendLambda implements Function2 {

    @Nullable

    @Override

    protected Object invokeSuspend(@NotNull Object o) {

        //...协程体逻辑

        return null;

    }

    @NotNull

    @Override

    public Continuation<Unit> create(@NotNull Continuation<?> completion) {

        //...创建MyAnnoy

        return null;

    }

    @Override

    public Object invoke(Object o, Object o2) {

        return null;

    }

}

新的MyAnnoy 创建完成后，调用intercepted(xx)函数，这个函数很关键：

#Intrinsics.Jvm.kt

public actual fun <T> Continuation<T>.intercepted(): Continuation<T> =

    //判断如果是ContinuationImpl，则转为ContinuationImpl 类型

    //继而调用intercepted()函数

    (this as? ContinuationImpl)?.intercepted() ?: this

此处为什么要将MyAnnoy 转为ContinuationImpl ？

因为它要调用ContinuationImpl里的intercepted() 函数：

#ContinuationImpl.kt

public fun intercepted(): Continuation<Any?> =

    intercepted

        //1、如果intercepted 为空则从context里取数据

        //2、如果context 取不到，则返回自身，最后给intercepted 赋值

        ?: (context[ContinuationInterceptor]?.interceptContinuation(this) ?: this)

            .also { intercepted = it }

先看intercepted 变量类型：

#ContinuationImpl.kt

    private var intercepted: Continuation<Any?>? = null

还是Continuation 类型，初始时intercepted = null。

context[ContinuationInterceptor] 表示从CoroutineContext里取出key 为ContinuationInterceptor 的Element。

既然要取出，那么得要放进去的时候，啥时候放进去的呢？

答案是：

newCoroutineContext(context) 构造了新的CoroutineContext，里边存放了分发器。

又因为我们设定的是在主线程进行分发：Dispatchers.Main，因此context[ContinuationInterceptor] 取出来的是Dispatchers.Main。

Dispatchers.Main 定义：

#Dispatchers.kt

    public actual val Main: MainCoroutineDispatcher get() = MainDispatcherLoader.dispatcher

#MainCoroutineDispatcher.kt

public abstract class MainCoroutineDispatcher : CoroutineDispatcher() {}

MainCoroutineDispatcher 继承自 CoroutineDispatcher，而它里边有个函数：

#CoroutineDispatcher.kt

    public final override fun <T> interceptContinuation(continuation: Continuation<T>): Continuation<T> =

        DispatchedContinuation(this, continuation)

而 Dispatchers.Main 调用的就是interceptContinuation(xx)函数。

该函数入参为Continuation 类型，也就是MyAnnoy 对象，函数的内容很简单：

• 构造DispatchedContinuation 对象，传入的参数分别是Dispatchers.Main和MyAnnoy 对象。


• Dispatchers.Main、MyAnnoy 分别赋值给成员变量dispatcher和continuation。

DispatchedContinuation 继承自DispatchedTask，它又继承自SchedulerTask，本质上就是Task，Task 实现了Runnable接口：

#Tasks.kt

internal abstract class Task(

    @JvmField var submissionTime: Long,

    @JvmField var taskContext: TaskContext

) : Runnable {

    //...

}

至此，我们重点关注其实现了Runnable接口里的run()函数即可。

再回过头来看构造好DispatchedContinuation 之后，调用resumeCancellableWith()函数：

#DispatchedContinuation.kt

    override fun resumeWith(result: Result<T>) {

        val context = continuation.context

        val state = result.toState()

        //需要分发

        if (dispatcher.isDispatchNeeded(context)) {

            _state = state

            resumeMode = MODE_ATOMIC

            //调用分发器分发

            dispatcher.dispatch(context, this)

        } else {

            executeUnconfined(state, MODE_ATOMIC) {

                withCoroutineContext(this.context, countOrElement) {

                    continuation.resumeWith(result)

                }

            }

        }

    }

而Demo里此处的dispatcher 即为Dispatchers.Main。

好了，总结一下launch()函数的功能：

Dispatchers.Main 实现

接着来看看Dispatchers.Main 如何分发任务的，先看其实现：

#MainDispatcherLoader.java

internal object MainDispatcherLoader {



    //默认true

    private val FAST_SERVICE_LOADER_ENABLED = systemProp(FAST_SERVICE_LOADER_PROPERTY_NAME, true)



    @JvmField

    val dispatcher: MainCoroutineDispatcher = loadMainDispatcher()

    //构造主线程分发

    private fun loadMainDispatcher(): MainCoroutineDispatcher {

        return try {

            val factories = if (FAST_SERVICE_LOADER_ENABLED) {

                //加载分发器工厂①

                FastServiceLoader.loadMainDispatcherFactory()

            } else {

                ...

            }

            //通过工厂类，创建分发器②

            factories.maxByOrNull { it.loadPriority }?.tryCreateDispatcher(factories)

                ?: createMissingDispatcher()

        } catch (e: Throwable) {

            ...

        }

    }

}

先看①：

#FastServiceLoader.kt

    internal fun loadMainDispatcherFactory(): List<MainDispatcherFactory> {

        val clz = MainDispatcherFactory::class.java

        //...

        return try {

            //反射构造工厂类：AndroidDispatcherFactory

            val result = ArrayList<MainDispatcherFactory>(2)

            FastServiceLoader.createInstanceOf(clz,

                "kotlinx.coroutines.android.AndroidDispatcherFactory")?.apply { result.add(this) }

            FastServiceLoader.createInstanceOf(clz,

                "kotlinx.coroutines.test.internal.TestMainDispatcherFactory")?.apply { result.add(this) }

            result

        } catch (e: Throwable) {

            //...

        }

    }

该函数返回的工厂类为：AndroidDispatcherFactory。

再看②，拿到工厂类后，就该用它来创建具体的实体了：

#HandlerDispatcher.kt

    internal class AndroidDispatcherFactory : MainDispatcherFactory {

        //重写createDispatcher 函数，返回HandlerContext

        override fun createDispatcher(allFactories: List<MainDispatcherFactory>) =

            HandlerContext(Looper.getMainLooper().asHandler(async = true), "Main")

        //...

    }



//定义

internal class HandlerContext private constructor(

    private val handler: Handler,

    private val name: String?,

    private val invokeImmediately: Boolean

) : HandlerDispatcher(), Delay {

}

最终创建了HandlerContext。

HandlerContext 继承自类：HandlerDispatcher

#HandlerDispatcher.kt

sealed class HandlerDispatcher : MainCoroutineDispatcher(), Delay {

    //重写分发函数

    override fun dispatch(context: CoroutineContext, block: Runnable) {

        //抛到主线程执行，handler为主线程的Handler

        handler.post(block)

    }

}

很明显了，DispatchedContinuation里借助dispatcher.dispatch()进行分发，而dispatcher 是Dispatchers.Main，最终的实现是HandlerContext。

因此dispatch() 函数调用的是HandlerDispatcher.dispatch()函数，该函数里将block 抛到了主线程执行。

block 为啥是呢？

block 其实是DispatchedContinuation 对象，从上面的分析可知，它间接实现了Runnable 接口。

查看其实现：

#DispatchedTask.kt

override fun run() {

    val taskContext = this.taskContext

    var fatalException: Throwable? = null

    try {

        //delegate 为DispatchedContinuation 本身

        val delegate = delegate as DispatchedContinuation<T>

        //delegate.continuation 为我们的协程体 MyAnnoy

        val continuation = delegate.continuation

        withContinuationContext(continuation, delegate.countOrElement) {

            val context = continuation.context

            //...

            val job = if (exception == null && resumeMode.isCancellableMode) context[Job] else null

            if (job != null && !job.isActive) {

                //...

            } else {

                if (exception != null) {

                    continuation.resumeWithException(exception)

                } else {

                    //执行协程体

                    continuation.resume(getSuccessfulResult(state))

                }

            }

        }

    } catch (e: Throwable) {

        //...

    } finally {

        //...

    }

}

continuation 变量是我们的协程体：MyAnnoy。

MyAnnoy.resume(xx) 这函数我们很熟了，再重新熟悉一下：

#ContinuationImpl.kt

override fun resumeWith(result: Result<Any?>) {

    // This loop unrolls recursion in current.resumeWith(param) to make saner and shorter stack traces on resume

    var current = this

    var param = result

    while (true) {

        with(current) {

            //completion 即为开始时定义的StandaloneCoroutine

            val completion = completion!! // fail fast when trying to resume continuation without completion

            val outcome: Result<Any?> =

                try {

                    //执行协程体里的代码

                    val outcome = invokeSuspend(param)

                    if (outcome === kotlin.coroutines.intrinsics.COROUTINE_SUSPENDED) return

                    kotlin.Result.success(outcome)

                } catch (exception: Throwable) {

                    kotlin.Result.failure(exception)

                }

            //...

        }

    }

}

invokeSuspend(param) 调用的是协程体里的代码，也就是launch 花括号里的内容，因此这里面的内容是主线程执行的。

再来看看launch(Dispatchers.Main)函数执行步骤如下：

1. 分发器HandlerContext 存储在CoroutineContext(协程上下文)里。


2. 构造DispatchedContinuation 分发器，它持有变量dispatcher=HandlerContext，continuation=MyAnnoy。


3. DispatchedContinuation 调用dispatcher(HandlerContext) 进行分发。


4. HandlerContext 将Runnable(DispatchedContinuation) 抛到主线程。

经过上面几步，launch(Dispatchers.Main) 任务算是完成了，至于Runnable什么时候执行与它无关了。

当Runnable 在主线程被执行后，从DispatchedContinuation 里取出continuation(MyAnnoy)，并调用continuation.resume()函数，进而执行MyAnnoy.invokeSuspend()函数，最后执行了launch{}协程体里的内容。

于是协程就愉快地在主线程执行了。

老规矩，结合代码与函数调用图：

3. 协程恢复时线程的选择

以主线程为例，我们知道了协程指定线程运行的原理。

想象另一种场景：

在协程里切换了子线程执行，子线程执行完毕后还会回到主线程执行吗？

对上述Demo进行改造：

    fun launch2() {

        GlobalScope.launch(Dispatchers.Main) {

            println("我在主线程执行")

            withContext(Dispatchers.IO) {

                println("我在子线程执行")//②

            }

            println("我在哪个线程执行？")//③

        }

    }

大家先猜猜③ 的答案是什么？是主线程还是子线程？

withContext(xx)函数上篇(讲真，Kotlin 协程的挂起没那么神秘(原理篇))已经深入分析过了，它是挂起函数，主要作用：

切换线程执行协程。

MyAnnoy1 对应协程体1，为父协程体。

MyAnnoy2 对应协程体2，为子协程体。

当② 执行完成后，会切换到父协程执行，我们看看切换父协程的流程。

每个协程的执行都要经历下面这个函数：

#BaseContinuationImpl.kt

override fun resumeWith(result: Result<Any?>) {

    //...

    while (true) {

        //..

        with(current) {

            val completion = completion!! // fail fast when trying to resume continuation without completion

            val outcome: Result<Any?> =

                try {

                    //执行协程体

                    val outcome = invokeSuspend(param)

                    if (outcome === kotlin.coroutines.intrinsics.COROUTINE_SUSPENDED) return

                    kotlin.Result.success(outcome)

                } catch (exception: Throwable) {

                    kotlin.Result.failure(exception)

                }

            releaseIntercepted() // this state machine instance is terminating

            if (completion is BaseContinuationImpl) {

                //...

            } else {

                //如果上一步的协程体不阻塞，则执行completion

                completion.resumeWith(outcome)

                return

            }

        }

    }

}

此处以withContext(xx)函数协程体执行为例，它的completion 为何物？

上面提到过launch()开启协程时，它的协程体的completion 为StandaloneCoroutine，也就是说MyAnnoy1.completion = StandaloneCoroutine。

从withContext(xx)源码里得知，它的completion 为DispatchedCoroutine，DispatchedCoroutine，它继承自ScopeCoroutine，ScopeCoroutine 有个成员变量为：uCont: Continuation。

当构造DispatchedCoroutine 时，传入的协程体赋值给uCont。
也就是DispatchedCoroutine.uCont = MyAnnoy1，MyAnnoy2.completion = DispatchedCoroutine。

此时，子协程体与父协程 通过DispatchedCoroutine 关联起来了。

因此completion.resumeWith(outcome)==DispatchedCoroutine.resumeWith(outcome)。
直接查看 后者实现即可：

#AbstractCoroutine.kt

    public final override fun resumeWith(result: Result<T>) {

        val state = makeCompletingOnce(result.toState())

        if (state === COMPLETING_WAITING_CHILDREN) return

        afterResume(state)

    }



#Builders.common.kt

#DispatchedCoroutine 类里

    override fun afterResume(state: Any?) {

        //uCont 为父协程体

        uCont.intercepted().resumeCancellableWith(recoverResult(state, uCont))

    }

到此就豁然开朗了，uCont.intercepted() 找到它的拦截器，因为uCont为MyAnnoy1，它的拦截器就是HandlerContext，又来了一次抛回到主线程执行。

因此，上面Demo里③ 的答案是：

它在主线程执行。

小结来看，就两步：

1. 父协程在主线程执行，中途遇到挂起的方法切换到子线程(子协程)执行。


2. 当子协程执行完毕后，找到父协程的协程体，继续让其按照原有规则分发。

老规矩，有代码有图有真相：

至此，切换到主线程执行的原理已经分析完毕。

好奇的小伙伴可能会问：你这举例都是子线程往主线程切换，若是子线程往子线程切换呢？

往主线程切换依靠Handler，而子线程切换依赖线程池，这块内容较多，单独拎出来分析。

既然都提到这个点了，那这里再提一个问题：

    fun launch3() {

        GlobalScope.launch(Dispatchers.IO) { 

            withContext(Dispatchers.Default) {

                println("我在哪个线程运行")

                delay(2000)

                println("delay 后我在哪个线程运行")

            }

            println("我又在哪个线程运行")

        }

    }

你知道上面的答案吗？

我们下篇将重点分析协程线程池的调度原理，通过它你将会知道上面的答案。

本文基于Kotlin 1.5.3，文中完整Demo请点击

hello 大家好，我是《Flutter 开发实战详解》的作者，Github GSY 项目的负责人郭树煜，同时也是今年新晋的 Flutter GDE，借着本次 Google I/O 之后发布的 Flutter 3.0，来和大家聊一聊 Flutter 里混合开发的技术演进。

为什么混合开发在 Flutter 里是特殊的存在？因为它渲染的控件是通过 Skia 直接和 GPU 交互，也就是说 Flutter 控件和平台无关，甚至连 UI 绘制线程都和原生平台 UI 线程是相互独立，所以甚至于 Flutter 在诞生之初都不支持和原生平台的控件进行混合开发，也就是不支持 WebView ，这就成了当时最大的缺陷之一 。

其实从渲染的角度看 Flutter 更像是一个 2D 游戏引擎，事实上 Flutter 在这次 Google I/O 也分享了基于 Flutter 的游戏开发 ToolKit 和第三方工具包 Flame ，如图所示就是本次 Google I/O 发布的 Pinball 小游戏，所以从这些角度上看都可以看出 Flutter 在混合开发的特殊性。

如果说的更形象简单一点，那就是如何把原生控件渲染到 WebView 里。

最初的社区支持

不支持 WebView 在最初可以说是 Flutter 最大的痛点之一，所以在这样窘迫的情况下，社区里涌现出一些临时的解决方法，比如 flutter_webview_plugin 。

类似 flutter_webview_plugin 的出现，解决了当时大部分时候 App 里打开一个网页的简单需求，如下图所示，它的思路就是：

在 Flutter 层面放一个占位控件提供大小，然后原生层在同样的位置把 WebView 添加进去，从而达到看起来把 WebView 集成进去的效果，这个思路在后续也一直被沿用。

这样的实现方式无疑成本最低速度最快，但是也带来了很多的局限性。

相信大家也能想到，因为 Flutter 的所有控件都是渲染一个 FlutterView 上，也就是从原生的角度其实是一个单页面的效果，所以这种脱离 Flutter 渲染树的添加控件的方法，无疑是没办法和 Flutter 融合到一起，举个例子：

• 如图一所示，从 Flutter 页面跳到 Native 页面的时候，打开动画无法同步，因为 AppBar 是 Flutter 的，而 Native 是原生层，它们不在同一个渲染树内，所以无法实现同步的动画效果


• 如图二所示，比如在打开 Native 页面之后，通过 Appbar 再打开一个黄色的 Bottm Sheet ，可以看到此时黄色的 Bottm Sheet 打开了，但是却被 Native 遮挡住（Demo 里给 Native 设置了透明色），因为 Flutter 的 Bottm Sheet 是被渲染在 FlutterView 里面，而 Native UI 把 FlutterView 挡住了，所以新的 Flutter UI 自然也被遮挡


• 如图三所示，当我们通过 reload 重刷 Flutter UI 之后，可以看到 Flutter 得 UI 都被重置了，但是此时 Native UI 还在，因为此时已经没有返回按键之类的无法关闭，这也是这种集成方式一不小心就影响开发的问题


• 如图四通过 iOS 上的 debug 图层，我们可以更形象地看到这种方式的实现逻辑和堆叠效果

动画不同步	页面被挡	reload 之后	iOS

PlatformView

随着 Flutter 的发展，官方支持混合开发势在必行，所以第一代 PlatformView 的支持还是诞生了，但是由于 Android 和 iOS 平台特性的不同，最初Android 的 AndroidView 和 iOS 的 UIKitView 实现逻辑相差甚远，以至于后面 Flutter 的 PlatformView 的每次大调整都是围绕于 Android 在做优化 。

Android

最初 Flutter 在 Android 上对 PlatformView 的支持是通过 VirtualDisplay 实现，VirtualDisplay 类似于一个虚拟显示区域，需要结合 DisplayManager 一起调用，VirtualDisplay 一般在副屏显示或者录屏场景下会用到，而在 Flutter 里 VirtualDisplay 会将虚拟显示区域的内容渲染在一个内存 Surface上。

在 Flutter 中通过将 AndroidView 需要渲染的内容绘制到 VirtualDisplays 中 ，然后通过 textureId 在 VirtualDisplay 对应的内存中提取绘制的纹理， 简单看实现逻辑如下图所示：

这里其实也是类似于最初社区支持的模式：通过在 Dart 层提供一个 AndroidView ，从而获取到控件所需的大小，位置等参数，当然这里多了一个 textureId ，这个 id 主要是提交给 Flutter Engine ，通过 id Flutter 就可以在渲染时将画面从内存里提出出来。

iOS

在 iOS 平台上就不使用类似 VirtualDisplay 的方法，而是通过将 Flutter UI 分为两个透明纹理来完成组合，这种方式无疑更符合 Flutter 社区的理念，这样的好处是：

需要在 PlatformView 下方呈现的 Flutter UI 可以被绘制到其下方的纹理；而需要在 PlatformView 上方呈现的 Flutter UI 可以被绘制到其上方的纹理， 它们只需要在最后组合起来就可以了。

是不是有点抽象？

简单看下面这张图，其实就是通过在 NativeView 的不同层级设置不同的透明图层，然后把不同位置的控件渲染到不同图层，最终达到组合起来的效果。

那明明这种方法更好，为什么 Android 不一开始也这样实现呢？

因为当时在实现思路上， VirtualDisplay 的实现模式并不支持这种模式，因为在 iOS 上框架渲染后系统会有回调通知，例如：当 iOS 视图向下移动 2px 时，我们也可以将其列表中的所有其他 Flutter 控件也向下渲染 2px。

但是在 Android 上就没有任何有关的系统 API，因此无法实现同步输出的渲染。如果强行以这种方式在 Android 上使用，最终将产生很多如 AndroidView 与 Flutter UI 不同步的问题。

问题

事实上 VirtualDisplay 的实现方式也带来和很多问题，简单说两个大家最直观的体会：

触摸事件

因为控件是被渲染在内存里，虽然你在 UI 上看到它就在那里，但是事实上它并不在那里，你点击到的是 FlutterView ，所以用户产生的触摸事件是直接发送到 FlutterView。

所以触摸事件需要在 FlutterView 到 Dart ，再从 Dart 转发到原生，然后如果原生不处理又要转发回 Flutter ，如果中间还存在其他派生视图，事件就很容易出现丢失和无法响应，而这个过程对于 FlutterView 来说，在原生层它只有一个 View 。

所以 Android 的 MotionEvent 在转化到 Flutter 过程中可能会因为机制的不同，存在某些信息没办法完整转化的丢失。

文字输入

一般情况下 AndroidView 是无法获取到文本输入，因为 VirtualDisplay 所在的内存位置会始终被认为是 unfocused 的状态。

InputConnections 在 unfocused 的 View 中通常是会被丢弃。

所以 Flutter 重写了 checkInputConnectionProxy 方法，这样 Android 会认为 FlutterView 是作为 AndroidView 和输入法编辑器（IME）的代理，这样 Android 就可以从 FlutterView 中获取到 InputConnections 然后作用于 AndroidView 上面。

在 Android Q 开始又因为非全局的 InputMethodManager 需要新的兼容

当然还有诸如性能等其他问题，但是至少先有了支持，有了开始才会有后续的进阶，在 Flutter 3.0 之前， VirtualDisplay 一直默默在 PlatformView 的背后耕耘。

HybridComposition

时间来到 Flutter 1.2，Hybrid Composition 是在 Flutter 1.2 时发布的 Android 混合开发实现，它使用了类似 iOS 的实现思路，提供了 Flutter 在 Android 上的另外一种 PlatformView 的实现。

如下图是在 Dart 层使用 VirtualDisplay 切换到 HybridComposition 模式的区别，最直观的感受应该是需要写的 Dart 代码变多了。

但是其实 HybridComposition 的实现逻辑是变简单了： PlatformView 是通过 FlutterMutatorView 把原生控件 addView 到 FlutterView 上，然后再通过 FlutterImageView 的能力去实现图层的混合。

又懵了？不怕，马上你就懂了

简单来说就是 HybridComposition 模式会直接把原生控件通过 addView 添加到 FlutterView 上 。这时候大家可能会说，咦～这不是和最初的实现一样吗？怎么逻辑又回去了 ？

其实确实是社区的进阶版实现，Flutter 直接通过原生的 addView 方法将 PlatformView 添加到 FlutterView 里，而当你还需要在 PlatformView 上渲染 Flutter 自己的 Widget 时，Flutter 就会通过再叠加一个 FlutterImageView 来承载这个 Widget 的纹理。

举一个简单的例子，如下图所示，一个原生的 TextView 被通过 HybridComposition 模式接入到 Flutter 里（NativeView），而在 Android 的显示布局边界和 Layout Inspector 上可以清晰看到： 灰色 TextView 通过 FlutterMutatorView 被添加到 FlutterView 上被直接显示出来 。

所以在 HybridComposition 里 TextView 是直接在原生代码上被 add 到 FlutterView 上，而不是提取纹理。

那如果我们看一个复杂一点的案例，如下图所示，其中蓝色的文本是原生的 TextView ，红色的文本是 Flutter 的 Text 控件，在中间 Layout Inspector 的 3D 图层下可以清晰看到：

• 两个蓝色的 TextView 是通过 FlutterMutatorView 被添加在 FlutterView 之上，并且把没有背景色的红色 RE 遮挡住了


• 最顶部有背景色的红色 RE 也是 Flutter 控件，但是因为它需要渲染到 TextView 之上，所以这时候多一个 FlutterImageView ，它用于承载需要显示在 Native 控件之上的纹理，从而达 Flutter 控件“真正”和原生控件混合堆叠的效果。

可以看到 Hybrid Composition 上这种实现，能更原汁原味地保流下原生控件的事件和特性，因为从原生角度看它就是原生层面的物理堆叠，需要都一个层级就多加一个 FlutterImageView ，同一个层级的 Flutter 控件共享一个 FlutterImageView 。

当然，在 HybridComposition 里 FlutterImageView 也是一个很有故事的对象，由于篇幅原因这里就不详细展开，这里大家可以简单看这张图感受下，也就是在有 PlatformView 和没有 PlatformView 是，Flutter 的渲染会有一个转化的过程，而在这个变化过程，在 Flutter 3.0 之前可以通过 PlatformViewsService.synchronizeToNativeViewHierarchy(false); 取消。

最后，Hybrid Composition 也不少问题，比如上面的转化就是为了解决动画同步问题，当然这个行为也会产生一些性能开销，例如：

在 Android 10 之前， Hybrid Composition 需要将内存中的每个 Flutter 绘制的帧数据复制到主内存，之后再从 GPU 渲染复制回来 ，所以也会导致 Hybrid Composition 在 Android 10 之前的性能表现更差，例如在滚动列表里每个 Item 嵌套一个 Hybrid Composition 的 PlatformView ，就可能会变卡顿甚至闪烁。

其他还有线程同步，闪烁等问题，由于篇幅就不详细展开，如果感兴趣的可以详细看我之前发布过的 《Flutter 深入探索混合开发的技术演进》 。

TextureLayer

随着 Flutter 3.0 的发布，第一代 PlatformView 的实现 VirtualDisplay 被新的 TextureLayer 所替代，如下图所示，简单对比 VirtualDisplay 和 TextureLayer 的实现差异，可以看到主要还是在于原生控件纹理的提取方式上。

从上图我们可以得知：

• 从 VirtualDisplay 到 TextureLayer ， Plugin 的实现是可以无缝切换，因为主要修改的地方在于底层对于纹理的提取和渲染逻辑；


• 以前 Flutter 中会将 AndroidView 需要渲染的内容绘制到 VirtualDisplays ，然后在 VirtualDisplay 对应的内存中，绘制的画面就可以通过其 Surface 获取得到；现在 AndroidView 需要的内容，会通过 View 的 draw 方法被绘制到 SurfaceTexture 里，然后同样通过 TextureId 获取绘制在内存的纹理 ；

是不是又有点蒙？简单说就是不需要绘制到副屏里，现在直接通过 override View 的 draw 方法就可以了。

在 TextureLayer 的实现里，同样是需要把控件添加到一个 PlatformViewWrapper 的原生布局控件里，但是这个控件通过 override 了 View 的 draw 方法，把原本的 Canvas 替换成 SurfaceTexture 在内存的 Canvas ，所以 PlatformViewWrapper 的 child 会把控件绘制到内存的 SurfaceTexture 上。

举个例子，还是之前的代码，如下图所示，这时候通过 TextureLayer 模式运行之后，通过 Layout Inspector 的 3D 图层可以看到，两个原生的 TextView 通过 PlatformViewWrapper 被添加到 FlutterView 上。

但是不同的是，在 3D 图层里看不到 TextView 的内容，因为绘制 TextView 的 Canvas 被替换了，所以 TextView 的内容被绘制到内存的 Surface 上，最终会在渲染时同步 Flutter Engine 里。

看到这里，你可能也发现了，这时候因为有 PlatformViewWrapper 的存在，点击会被 PlatformViewWrapper 内部拦截，从而也解决了触摸的问题， 而这里刚好有人提了一个问题，如下图所示：

"从图 1 Layout Inspector 看， PlatformWrapperView 是在 FlutterSurfaceView 上方，为什么如图 2 所示，点击 Flutter button 却可以不触发 native button的点击效果？"。

图1	图2

思考一下，因为最直观的感受：点击不都是被 PlatformViewWrapper 拦截了吗？明明 PlatformViewWrapper 是在 FlutterSurfaceView 之上，为什么 FlutterSurfaceView 里的 FlutterButton 还能被点击到？

这里简单解释一下：

• 1、首先那个 Button 并不是真的被摆放在那里，而是通过 PlatformViewWrapper 的 super.draw绘制到 surface 上的，所以在那里的是 PlatformViewWrapper ，而不是 Button ，Button 的内容已经变成纹理去到了 FlutterSurfaceView 里面。


• 2、 PlatformViewWrapper 里重写了 onInterceptTouchEvent 做了拦截，onInterceptTouchEvent 这个事件是从父控件开始往子控件传，因为拦截了所以不会让 Button 直接响应，然后在 PlatformViewWrapper 的 onTouchEvent 响应里是做了点击区域的分发，响应会分发到了 AndroidTouchProcessor 之后，会打包发到 _unpackPointerDataPacket 进入 Dart


• 3、 在 Dart 层的点击区域，如果没有 Flutter 控件响应，会是 _PlatformViewGestureRecognizer-> updateGestureRecognizers -> dispatchPointerEvent -> sendMotionEvent 又发送回原生层


• 4、回到原生 PlatformViewsController 的 createForTextureLayer 里的 onTouch ，执行 view.dispatchTouchEvent(event);

总结起来就是：**PlatfromViewWrapper 拦截了 Event ，通过 Dart 做二次分发响应，从而实现不同的事件响应 ** ，它和 VirtualDisplay 的不同是， VirtualDisplay 的事件响应都是在 FlutterView 上，但是TextureLayout 模式，是有独立的原生 PlatfromViewWrapper 控件来开始，所以区域效果和一致性会更好。

问题

最后这里还需要提个醒，如果你之前使用的插件使用的是 HybirdComposition ，但是没做兼容，也就是使用的还是 PlatformViewsService.initSurfaceAndroidView 的话，它也会切换成 TextureLayer 的逻辑，所以你需要切换为 PlatformViewsService.initExpensiveAndroidView ，才能继续使用原本 HybirdComposition 的效果。

⚠️我也比较奇怪为什么 Flutter 3.0 没有提及 Android 这个 breaking change ，因为对于开发来说其实是无感的，不小心就掉坑里。

那你说为什么还要 HybirdComposition ？

前面我们说过， TextureLayer 是通过在 super.draw 替换 Canvas 的方法去实现绘制，但是它替换不了 Surface 里的一些 Canvas ，所以比如一些需要 SurfaceView 、TextureView 或者有自己内部特殊 Canvas 的场景，你还是需要 HybirdComposition ，只不过可能会和官方新的 API 名字一样，它 Expensive 。

Expensive 是因为在 Flutter 3.0 正式版开始，FlutterView 在使用 HybirdComposition 时一定会 converted to FlutterImageView ，这也是 Flutter 3.0 下一个需要注意的点。

更多内容可见 《Flutter 3.0 之 PlatformView ：告别 VirtualDisplay ，拥抱 TextureLayer》

最后

最后做个总结，可以看到 Flutter 为了混合开发做了很多的努力，特别是在 Android 上，也是因为历史埋坑的原因，由于时间关系这里没办法都详细介绍，但是相信本次之后大家对 Flutter 的 PlatformView 实现都有了全面的了解，这对大家在未来使用 Flutter 也会有很好的帮助，如果你还有什么问题，欢迎交流。

相信稍微接触过Kotlin的同学都知道Kotlin Coroutine(协程）的大名，甚至有些同学认为重要到"无协程，不Kotlin"的地步，吓得我赶紧去翻阅了协程源码，同时也学习了不少博客，博客里比较典型的几个说法：

• 协程是轻量级线程、比线程耗费资源少


• 协程是线程框架


• 协程效率高于线程


• ...

一堆术语听起来是不是很高端的样子？这些表述正确吗？妥当吗？你说我学了大半天，虽然我也会用，但还是没弄懂啥是协程...

为了彻底弄懂啥是协程，需要将进程、线程拉进来一起pk。

通过本篇文章，你将了解到：

1、程序、进程、CPU、内存关系

2、进程与线程的故事

3、线程与Kotlin协程的故事

4、Kotlin 协程的使命

1、程序、进程、CPU、内存关系

如上图，平时我们打包好一个应用，放在磁盘上，此时我们称之为程序或者应用，是静态的。也就是咱们平常说的：我下载个程序，你传给apk给我，它们都是程序(应用)。

当我们执行程序(比如点击某个App)，OS 会将它加载进内存，CPU 从内存某个起始地址开始读取指令并执行程序。

程序从磁盘上加载到内存并被CPU运行期间，称之为进程。因此我们通常说某个应用是否还在存活，实际上说的是进程是否还在内存里；也会说某某程序CPU占用率太高，实际上说的是进程的CPU占用率。

而操作系统负责管理磁盘、内存、CPU等交互，可以说是大管家。

2、进程与线程的故事

接下来我们以一个故事说起。

上古时代的合作

在上古时候，一个设备里只有一个CPU，能力比较弱，单位时间内能够处理的任务量有限，内存比较小，能加载的应用不多，相应的那会儿编写的程序功能单一，结构简单。

OS 说："大家都知道，我们的情况比较具体，只有一个CPU，内存也很小，而现在有不少应用想要占用CPU和内存，无规矩不成方圆，我现在定下个规矩："

每个应用加载到内存后，我将给他安排内存里的一块独立的空间，并记录它的一些必要信息，最后规整为一个叫进程的东西，就是代表你这个应用的所有信息，以后我就只管调度进程即可。

并且进程之间的内存空间是隔离的，无法轻易访问，特殊情况需要经过我的允许。

应用(程序)说："哦，我知道了，意思就是：进程是资源分派的基本单位嘛"

OS 说："对的，悟性真好，小伙子。"

规矩定下了，大家就开始干活了：

1、应用被加载到内存后，OS分派了一些资源给它。

2、CPU 从内存里逐一取出并执行进程。

3、其它没有得到CPU青睐的进程则静候等待，等待被翻牌。

中古时代的合作

一切都有条不紊的进行着，大家配合默契，其乐融融，直到有一天，OS 发现了一些端倪。

他发现CPU 在偷懒...找到CPU，压抑心中的愤怒说到：

"我发现你最近不是很忙哎，是不是工作量不饱和？"

CPU 忙不迭说到："冤枉啊，我确实不是很忙，但这不怪我啊。你也知道我最近升级了频率，处理速度快了很多，进程每次给我的任务我都快速执行完了，不过它们却一直占用我，不让我处理其它进程的，我也是没办法啊。"

OS 大吃一惊到："大胆进程，居然占着茅坑不拉屎！"

CPU 小声到："我又不是茅坑..."

OS 找来进程劈头盖脸训斥一道："进程你好大的胆，我之前不是给你说请CPU 做事情要讲究一个原则：按需占有，用完就退。你把我话当耳边风了？"

进程直呼："此事与我无关啊，你知道的我最讲原则了，你之前说过对CPU 的使用：应占尽占。我现在不仅要处理本地逻辑，还要从磁盘读取文件，这个时候我虽然不占用CPU，但是我后面文件读结束还是需要他。"

OS 眉头紧皱，略微思索了一下对进程和CPU道："此事前因后果均已知悉，容我斟酌几日。"

几天后，OS 过来对他俩说："我现在重新拟定一个规则：进程不能一直占用CPU到任务结束为止，需要规定占用的时间片，在规定的时间片内进程能完成多少是多少，时间一到立即退出CPU换另一个进程上，没能完成任务的进程等下个轮到自己的时间片再上"

进程和CPU 对视一眼，立即附和："谨遵钧令，使命必达！"

近现代的合作

自从实行新规定以来，进程们都有机会抢占CPU了，算是雨露均沾，很少出现某进程长期霸占CPU的现象了，OS 对此很是满意。

一则来自进程的举报打破这黎明前的宁静。

OS 收到一则举报："我进程实名举报CPU 偷懒。"

OS 心里咯噔一跳，寻思着咋又是CPU，于是叫来CPU 对簿公堂。

CPU 听到OS 召唤，暗叫不妙，心里立马准备了一套说辞。

OS 对着CPU 和 进程说："进程说你偷懒，你在服务进程的时间片内无所事事，我希望你能给我一个满意的答复。"

CPU 一听这话，心里一阵鄙视，果不出我所料，就知道你问这事。虽然心里诽腹不已，脸上却是郑重其事道："这事是因为进程交给我的任务很快完成了，它去忙别的事了，让我等等他。"

OS 诧异道："你这么快就将进程的任务处理完成了？"

CPU 面露得以之色道："你知道的我一直追求进步，这不前阵子又升级了一下嘛，处理能力又提升了。如果说优秀是一种原罪的话，那这个罪名由我承担吧，再如果..."

OS 看了进程一眼，对CPU 说："行行行，打住，此事确实与你无关。进程虽然你误会了CPU，但是你提出的问题确实是一个好的思考点，这个下来我想个方案，回头咱们评审一下。"

一个月后，OS 将进程和CPU召集起来，并拿出方案说："我们这次将进行一次大的调整，鉴于CPU 处理能力提升，他想要承担更多的工作，而目前以进程为单位提交任务颗粒度太大了，需要再细化。我建议将进程划分为若干线程，这些线程共享进程的资源池，进程想要执行某任务直接交给线程即可，而CPU每次以线程为单位执行。接下来，你们说说各自的意见吧。"

进程说到："这个方案很优秀，相当于我可以弄出分身，让各个分身干各项任务，处理UI一个线程，处理I/O是另一个线程，处理其它任务是其它线程，我只需要分派各个任务给线程，剩下的无需我操心了。CPU 你觉得呢？"

CPU 心底暗道："你自己倒是简单，只管造分身，脏活累活都是我干..."

表面故作沉重说到："这个改动有点大，我现在需要直接对接线程，这块需要下来好好研究一下，不过问题不大。"

进程补充道："CPU 你可以要记清楚了，以后线程是CPU 调度的基本单位了。"

CPU 应道："好的，好的，了解了(还用你复述OS 的话嘛...)。"

规矩定下了，大家热火朝天地干活。

进程至少有一个线程在运行，其余按需制造线程，多个线程共用进程资源，每个线程都被CPU 执行。

新时代的合作

OS 照例视察各个模块的合作，这天进程又向它抱怨了："我最近各个线程的数据总是对不上，是不是内存出现了差错？"

OS 愣了一下，说到："这问题我知道了，还没来得及和你说呢。最近咱们多放了几个CPU 模块提升设备的整体性能，你的线程可能在不同的CPU上运行，因此拿到的数据有点问题。"

进程若有所思道："以前只有一个CPU，各个进程看似同时运行，实则分享CPU时间片，是并发行为。现在CPU 多了，不同的线程有机会同时运行，这就是真并行了吧。"

OS 道："举一反三能力不错哦，不管并行还是并发，多个线程共享的数据有可能不一致，尤其加入了多CPU后，现象比较明显，这就是多线程数据安全问题。底层已经提供了一些基本的机制，比如CPU的MESI，但还是无法完全解决这问题，剩下的交给上层吧。"

进程道："了解了，那我告诉各个线程，如果他们有共享数据的需求，自己协商解决一下。"

进程告知线程自己处理线程安全问题，线程答到："我只是个工具人，谁用谁负责处理就好。"

一众编程语言答到："我自己来处理吧。"

多CPU 如下，每个线程都有可能被其它CPU运行。

3、线程与Kotlin协程的故事

Java 线程调用

底层一众大佬已经将坑踩得差不多了，这时候得各个编程语言出场了。

C 语言作为骨灰级人物远近闻名，OS、驱动等都是由他编写，这无需介绍了。

之后如雨后春笋般又冒出了许多优秀的语言，如C++、Java、C#、Qt 等，本小结的主人公：Java。

Java 从小目标远大，想要跨平台运行，借助于JVM他可以实现这个梦想，每个JVM 实例对应一个进程，并且OS 还给了他操作线程的权限。

Java 想既然大佬这么支持，那我要撸起袖子加油干了，刚好在Android 上接到一个需求：

通过学生的id，向后台(联网)查询学生的基本信息，如姓名、年龄等。

Java 心想："这还不简单，且看我猛如虎的操作。"

先定义学生Bean类型：

public class StudentInfo {

    //学生id

    private long stuId = 999;

    private String name = "fish";

    private int age = 18;

}

再定义一个获取的动作：

    //从后台获取信息

    public StudentInfo getWithoutThread(long stuId) {

        try {

            //模拟耗时操作

            Thread.sleep(2000);

        } catch (InterruptedException e) {

            e.printStackTrace();

        }

        return new StudentInfo(); 

    }

信心满满地运行，却被现实无情打脸，只见控制台显目的红色：

不能在主线程进行网络请求。

同步调用

Java 并不气馁，这问题简单，我开个线程取获取不就得了?

    Callable<StudentInfo> callable = new Callable<StudentInfo>() {

        @Override

        public StudentInfo call() throws Exception {

            try {

                //模拟耗时操作

                Thread.sleep(2000);

            } catch (InterruptedException e) {

                e.printStackTrace();

            }

            return new StudentInfo();

        }

    };



    public StudentInfo getStuInfo(long stuId) {

        //定义任务

        FutureTask<StudentInfo> futureTask = new FutureTask<>(callable);

        //开启线程，执行任务

        new Thread(futureTask).start();

        try {

            //阻塞获取结果

            StudentInfo studentInfo = futureTask.get();

            return studentInfo;

        } catch (ExecutionException e) {

            e.printStackTrace();

        } catch (InterruptedException e) {

            e.printStackTrace();

        }

        return null;

    }

而后，再在界面上弹出学生姓名：

 JavaStudent javaStudent = new JavaStudent();

        StudentInfo studentInfo = javaStudent.getWithoutThread(999);

        Toast.makeText(this, "学生姓名:" + studentInfo.getName(), Toast.LENGTH_LONG).show();

刚开始能弹出Toast，然而后面动不动UI就卡顿，甚至出现ANR 弹窗。

Java 百思不得其解，后得到Android 本尊指点：

Android 主线程不能进行耗时操作。

Java 说到："我就简单获取个信息，咋这么多限制..."

Android 答到："Android 通常需要在主线程更新UI，主线程不能做过多耗时操作，否则影响UI 渲染流畅度。不仅是Android，你Java 本身的主线程(main线程)通常也不会做耗时啊，都是通过开启各个线程去完成任务，要不然每一步都要主线程等待，那主线程的其它关键任务就没法开启了。"

Java 沉思道："有道理，容我三思。"

异步调用与回调

Java 果不愧是编程语言界的老手，闭关几天就想出了方案，直接show us code：

    //回调接口

    public interface Callback {

        void onCallback(StudentInfo studentInfo);

    }



    //异步调用

    public void getStuInfoAsync(long stuId, Callback callback) {

        new Thread(() -> {

            try {

                //模拟耗时操作

                Thread.sleep(2000);

            } catch (InterruptedException e) {

                e.printStackTrace();

            }



            StudentInfo studentInfo = new StudentInfo();

            if (callback != null) {

                //回调给调用者

                callback.onCallback(studentInfo);

            }

        }).start();

    }

在调用耗时方法时，只需要将自己的凭证(回调对象)传给方法即可，调用者不管方法里具体是咋实现的，才不管你开几个线程呢，反正你有结果通过回调给我。

调用者只需要在需要的地方实现回调接收即可：

        JavaStudent javaStudent = new JavaStudent();

        javaStudent.getStuInfoAsync(999, new JavaStudent.Callback() {

            @Override

            public void onCallback(StudentInfo studentInfo) {

                //异步调用，回调从子线程返回，需要切换到主线程更新UI

                runOnUiThread(() -> {

                    Toast.makeText(TestJavaActivity.this, "学生姓名:" + studentInfo.getName(), Toast.LENGTH_LONG).show();

                });

            }

        });

异步调用的好处显而易见：

1、不用阻塞调用者，调用者可继续做其它事情。

2、线程没有被阻塞，相比同步调用效率更高。

缺点也是比较明显：

1、没有同步调用直观。

2、容易陷入多层回调，不利于阅读与调试。

3、从内到外的异常处理缺失传递性。

Kotlin 协程毛遂自荐

Java 靠着左手同步调用、右手异步调用的左右互搏技能，成功实现了很多项目，虽然异步调用有着一些缺点，但瑕不掩瑜。

这天，Java 又收到需求变更了：

通过学生id，获取学生信息，通过学生信息，获取他的语文老师id，通过语文老师id，获取老师姓名，最后更新UI。

Java 不假思索到："简单，我再嵌套一层回调即可。"

    //回调接口

    public interface Callback {

        void onCallback(StudentInfo studentInfo);

        //新增老师回调接口

        default void onCallback(TeacherInfo teacherInfo){}

    }



    //异步调用

    public void getTeachInfoAsync(long stuId, Callback callback) {

        //先获取学生信息

        getStuInfoAsync(stuId, new Callback() {

            @Override

            public void onCallback(StudentInfo studentInfo) {

                //获取学生信息后，取出关联的语文老师id，获取老师信息

                new Thread(() -> {

                    try {

                        //模拟耗时操作

                        Thread.sleep(2000);

                    } catch (InterruptedException e) {

                        e.printStackTrace();

                    }

                    

                    TeacherInfo teacherInfo = new TeacherInfo();

                    if (callback != null) {

                        //老师信息获取成功

                        callback.onCallback(teacherInfo);

                    }

                }).start();

            }

        });

    }

眼看Java 一下子实现了功能，Android再提需求：

通过老师id，获取他所在的教研组信息，再通过教研组id获取教研组排名...

Java 抗议道："哪有这么奇葩的需求，那我不是要无限回调吗，我可以实现，但不好维护，过几天我自己看都看不懂了。"

Android："不就是几个回调的问题嘛，亏你还是老员工，实在不行，我找其他人。"

Java："...我再想想。"

正当Java 一筹莫展之际，吃饭时刚好碰到了Kotlin，Java 难得有时间和这位新入职的小伙伴聊聊天，发发牢骚。

Kotlin 听了Java 的遭遇，表达了同情并劝说Java 赶紧离职，Android 这块不适合他。

Kotlin 随后找到Android，略微紧张地说："吾有一计，可安天下。"

Android 对于毛遂自荐的人才是非常欢迎的，问曰："计将安出"

Kotlin 随后激动到：协程。

Android 诧异道："协程，旅游？"

class StudentCoroutine {

    private val FIXED_TEACHER_ID = 888

    fun getTeachInfo(act: Activity, stuId: Long) {

        GlobalScope.launch(Dispatchers.Main) {



            var studentInfo: StudentInfo

            var teacherInfo: TeacherInfo? = null



            //先获取学生信息

            withContext(Dispatchers.IO) {

                //模拟网络获取

                Thread.sleep(2000)

                studentInfo = StudentInfo()

            }

            //再获取教师信息

            withContext(Dispatchers.IO) {

                if (studentInfo.lanTechId.toInt() === FIXED_TEACHER_ID) {

                    //模拟网络获取

                    Thread.sleep(2000)

                    teacherInfo = TeacherInfo()

                }

            }

            //更新UI

            Toast.makeText(act, "teacher name:${teacherInfo?.name}", Toast.LENGTH_LONG).show()

        }

        Toast.makeText(act, "主线程还在跑...", Toast.LENGTH_LONG).show()

    }

}

外部调用：

    var student = StudentCoroutine()

    student.getTeachInfo(this@MainActivity, 999)

Android 一看，大吃一惊："想不到，语言界竟然有如此厚颜无耻之...不对，如此简洁的写法。"

Kotlin 道："协程这概念早就有了，其它兄弟语言Python、Go等也实现了，我也是站在巨人的肩膀上，秉着解决用户痛点的思路来设计的。"

Android 随即大手一挥道："就冲着你这简洁的语法，今后Android 业务你来搞吧，希望你能够担起重担。"

Kotlin 立马道："没问题，我本身也是跨平台的，只是Java 那边...。"

Android："这个你无需顾虑，Java 的工作我来做，成年人应该知道这世界是残酷的。"

Java 听到Kotlin 逐渐蚕食了自己在Android上的业务，略微生气，于是看了Kotlin 的写法，最后长舒一口气："确实比较简洁，看起来功能阻塞了主线程，实际并没有。其实就是 用同步的写法，表达异步的调用。"

Koltin ："知我者，老大哥Java 也。"

4、Kotlin 协程的使命

通过与Java 的比对，大家也知道了协程最大的特色：

将异步编程同步化。

当然还有一些特点，如异常处理、协程取消等。

再回过头来看看上面的疑问。

1、协程是轻量级线程、比线程耗费资源少
这话虽然是官方说的，但我觉得有点误导的作用，协程是语言层面的东西，线程是系统层面的东西，两者没有可比性。

协程就是一段代码块，既然是代码那就离不开CPU的执行，而CPU调度的基本单位是线程。

2、协程是线程框架
协程解决了移步编程时过多回调的问题，既然是异步编程，那势必涉及到不同的线程。Kotlin 协程内部自己维护了线程池，与Java 线程池相比有些优化的地方。在使用协程过程中，无需关注线程的切换细节，只需指定想要执行的线程即可，从对线程的封装这方面来说这说话也没问题。

3、协程效率高于线程
与第一点类似，协程在运行方面的高效率其实换成回调方式也是能够达成同样的效果，实际上协程内部也是通过回调实现的，只是在编译阶段封装了回调的细节而已。因此，协程与线程没有可比性。

阅读完上述内容，想必大家都知道进程、线程、协程的关系了，也许大家还很好奇协程是怎么做到不阻塞调用者线程的？它又是怎么在获取结果后回到原来的位置继续执行呢？线程之间如何做到丝滑般切换的？

不要着急，这些点我们一点点探秘，下篇文章开始徒手开启一个协程，并分析其原理。

Kotlin 源码阅读需要一定的Kotlin 基础，尤其是高阶函数，若是这方面还不太懂的同学可以查阅之前的文章：Kotlin 高阶函数从未如此清晰 系列

本文基于Kotlin 1.5.3，文中完整Demo请点击

废话不多说，先上效果图：

该效果其实由三部分组成：

• 渐变


• 圆角


• 文本

渐变

关于渐变，估计大家都不会陌生，以往都是使用gradient进行制作：

shape_gradient.xml

<?xml version="1.0" encoding="utf-8"?>

<shape xmlns:android="http://schemas.android.com/apk/res/android">

    <gradient

        android:startColor="#B620E0"

        android:endColor="#E38746" />

</shape>

    <View

        android:layout_width="match_parent"

        android:layout_height="70dp"

        android:background="@drawable/shape_gradient" />

但是，这个只能支持双色渐变，超过双色就无能为力了，所以，我们要考虑使用其它方式：

    /**

     * Create a shader that draws a linear gradient along a line.

     *

     * @param x0           The x-coordinate for the start of the gradient line

     * @param y0           The y-coordinate for the start of the gradient line

     * @param x1           The x-coordinate for the end of the gradient line

     * @param y1           The y-coordinate for the end of the gradient line

     * @param colors       The colors to be distributed along the gradient line

     * @param positions    May be null. The relative positions [0..1] of

     *                     each corresponding color in the colors array. If this is null,

     *                     the the colors are distributed evenly along the gradient line.

     * @param tile         The Shader tiling mode

    */

    public LinearGradient(float x0, float y0, float x1, float y1, @NonNull @ColorInt int colors[],

            @Nullable float positions[], @NonNull TileMode tile)

    /**

     * x0、y0、x1、y1为决定渐变颜色方向的两个坐标点，x0、y0为起始坐标，x1、y1为终点坐标

     * @param colors       所有渐变颜色的数组，即放多少个颜色进去，就有多少种渐变颜色

     * @param positions    渐变颜色的比值，默认为均匀分布。

     * 把总长度理解为1，假如里面的值为[0.3，0.2，0.5]，那么，渐变的颜色就会以 0.3 : 0:2 :0.5 比例进行排版

     * @param tile         着色器模式

    */

public LinearGradient(float x0, float y0, float x1, float y1, int colors[], float positions[],

           TileMode tile) 

创建自定义View

public class ColorView extends View {

    public ColorView(Context context) {

        super(context);

    }



    public ColorView(Context context, @Nullable AttributeSet attrs) {

        super(context, attrs);

    }



    public ColorView(Context context, @Nullable AttributeSet attrs, int defStyleAttr) {

        super(context, attrs, defStyleAttr);

    }



    @Override

    protected void onDraw(Canvas canvas) {

        super.onDraw(canvas);

        //获取宽高

        int width = getWidth();

        int height = getHeight();



        //渐变的颜色

        int colorStart = Color.parseColor("#E38746");

        int color1 = Color.parseColor("#B620E0");

        int colorEnd = Color.parseColor("#5995F6");

        //绘画渐变效果

        Paint paintColor = new Paint();

        LinearGradient backGradient = new LinearGradient(0, height, width, 0, new int[]{colorStart, color1, colorEnd}, null, Shader.TileMode.CLAMP);

        paintColor.setShader(backGradient);

        canvas.drawRect(0, 0, width, height, paintColor);

    }

}

    <com.jm.xpproject.ColorView

        android:layout_width="match_parent"

        android:layout_height="70dp" />

效果：

圆角

关于圆角，我们需要使用到BitmapShader，使用方式：

        BitmapShader bitmapShaderColor = new BitmapShader(bitmapColor, Shader.TileMode.CLAMP, Shader.TileMode.CLAMP);

        // 初始化画笔

        Paint paintFillet = new Paint();

        paintFillet.setAntiAlias(true);

        paintFillet.setShader(bitmapShaderColor);

        //绘画到画布中

        canvas.drawRoundRect(new RectF(0, 0, width, height), radius, radius, paintFillet);

由于这里的BitmapShader是对于Bitmap进行操作的，所以，对于渐变效果，我们不能直接把他绘画到原始画布上，而是生成一个Bitmap，将渐变绘画记录下来：

还是刚刚的自定义View

    @Override

    protected void onDraw(Canvas canvas) {

        super.onDraw(canvas);

        //获取View的宽高

        int width = getWidth();

        int height = getHeight();



        //第一步，绘画出一个渐变效果的Bitmap

        //创建存放渐变效果的bitmap

        Bitmap bitmapColor = Bitmap.createBitmap(width, height, Bitmap.Config.ARGB_8888);

        Canvas canvasColor = new Canvas(bitmapColor);

        //渐变的颜色

        int colorStart = Color.parseColor("#E38746");

        int color1 = Color.parseColor("#B620E0");

        int colorEnd = Color.parseColor("#5995F6");

        //绘画渐变效果

        Paint paintColor = new Paint();

        LinearGradient backGradient = new LinearGradient(0, height, width, 0, new int[]{colorStart, color1, colorEnd}, null, Shader.TileMode.CLAMP);

        paintColor.setShader(backGradient);

        canvasColor.drawRect(0, 0, width, height, paintColor);

        //第二步，绘画出一个圆角渐变效果

        //绘画出圆角渐变效果

        BitmapShader bitmapShaderColor = new BitmapShader(bitmapColor, Shader.TileMode.CLAMP, Shader.TileMode.CLAMP);

        // 初始化画笔

        Paint paintFillet = new Paint();

        paintFillet.setAntiAlias(true);

        paintFillet.setShader(bitmapShaderColor);

        //绘画到画布中

        canvas.drawRoundRect(new RectF(0, 0, width, height), 100, 100, paintFillet);

    }

效果：

至于中间的空白部分，其实我们依葫芦画瓢，再画上一个白色的圆角Bitmap即可：

        //创建存放白底的bitmap

        Bitmap bitmapWhite = Bitmap.createBitmap(width - colorWidth * 2, height - colorWidth * 2, Bitmap.Config.RGB_565);

        bitmapWhite.eraseColor(Color.parseColor("#FFFFFF"));



        BitmapShader bitmapShaderWhite = new BitmapShader(bitmapWhite, Shader.TileMode.CLAMP, Shader.TileMode.CLAMP);

        // 初始化画笔

        Paint paintWhite = new Paint();

        paintWhite.setAntiAlias(true);

        paintWhite.setShader(bitmapShaderWhite);

        // 将白色Bitmap绘制到画布上面

        canvas.drawRoundRect(new RectF(colorWidth, colorWidth, width - colorWidth, height - colorWidth), radius, radius, paintWhite);

总体代码：

    @Override

    protected void onDraw(Canvas canvas) {

        super.onDraw(canvas);

        //获取View的宽高

        int width = getWidth();

        int height = getHeight();



        //第一步，绘画出一个渐变效果的Bitmap

        //创建存放渐变效果的bitmap

        Bitmap bitmapColor = Bitmap.createBitmap(width, height, Bitmap.Config.ARGB_8888);

        Canvas canvasColor = new Canvas(bitmapColor);

        //渐变的颜色

        int colorStart = Color.parseColor("#E38746");

        int color1 = Color.parseColor("#B620E0");

        int colorEnd = Color.parseColor("#5995F6");

        //绘画渐变效果

        Paint paintColor = new Paint();

        LinearGradient backGradient = new LinearGradient(0, height, width, 0, new int[]{colorStart, color1, colorEnd}, null, Shader.TileMode.CLAMP);

        paintColor.setShader(backGradient);

        canvasColor.drawRect(0, 0, width, height, paintColor);

        //第二步，绘画出一个圆角渐变效果

        //绘画出圆角渐变效果

        BitmapShader bitmapShaderColor = new BitmapShader(bitmapColor, Shader.TileMode.CLAMP, Shader.TileMode.CLAMP);

        // 初始化画笔

        Paint paintFillet = new Paint();

        paintFillet.setAntiAlias(true);

        paintFillet.setShader(bitmapShaderColor);

        //绘画到画布中

        canvas.drawRoundRect(new RectF(0, 0, width, height), 100, 100, paintFillet);



        //第三步，绘画出一个白色的bitmap覆盖上去

        //创建存放白底的bitmap

        Bitmap bitmapWhite = Bitmap.createBitmap(width - 5 * 2, height - 5 * 2, Bitmap.Config.RGB_565);

        bitmapWhite.eraseColor(Color.parseColor("#FFFFFF"));



        BitmapShader bitmapShaderWhite = new BitmapShader(bitmapWhite, Shader.TileMode.CLAMP, Shader.TileMode.CLAMP);

        // 初始化画笔

        Paint paintWhite = new Paint();

        paintWhite.setAntiAlias(true);

        paintWhite.setShader(bitmapShaderWhite);

        // 将白色Bitmap绘制到画布上面

        canvas.drawRoundRect(new RectF(5, 5, width - 5, height - 5), 100, 100, paintWhite);

    }

效果：

文本

像文本就简单了，使用drawText即可，只要注意在绘画的时候，要对文本进行居中显示，因为 Android 默认绘画文本，是从左下角进行绘画的，就像这样：

        Paint paintText = new Paint();

        paintText.setAntiAlias(true);

        paintText.setColor(Color.parseColor("#000000"));

        paintText.setTextSize(100);

        canvas.drawText("收藏", width / 2, height / 2, paintText);

        canvas.drawLine(width / 2, 0, width / 2, height, paintText);

        canvas.drawLine(0, height / 2, width, height / 2, paintText);

正确做法：

        String text = "收藏";

        Rect rect = new Rect();

        Paint paintText = new Paint();

        paintText.setAntiAlias(true);

        paintText.setColor(Color.parseColor("#000000"));

        paintText.setTextSize(100);

        paintText.getTextBounds(text, 0, text.length(), rect);

        int widthFont = rect.width();//文本的宽度

        int heightFont = rect.height();//文本的高度

        canvas.drawText(text, (width - widthFont) / 2, (height+heightFont) / 2, paintText);

至此，基本功能的制作就完成了

    @Override

    protected void onDraw(Canvas canvas) {

        super.onDraw(canvas);

        //获取View的宽高

        int width = getWidth();

        int height = getHeight();



        //第一步，绘画出一个渐变效果的Bitmap

        //创建存放渐变效果的bitmap

        Bitmap bitmapColor = Bitmap.createBitmap(width, height, Bitmap.Config.ARGB_8888);

        Canvas canvasColor = new Canvas(bitmapColor);

        //渐变的颜色

        int colorStart = Color.parseColor("#E38746");

        int color1 = Color.parseColor("#B620E0");

        int colorEnd = Color.parseColor("#5995F6");

        //绘画渐变效果

        Paint paintColor = new Paint();

        LinearGradient backGradient = new LinearGradient(0, height, width, 0, new int[]{colorStart, color1, colorEnd}, null, Shader.TileMode.CLAMP);

        paintColor.setShader(backGradient);

        canvasColor.drawRect(0, 0, width, height, paintColor);

        //第二步，绘画出一个圆角渐变效果

        //绘画出圆角渐变效果

        BitmapShader bitmapShaderColor = new BitmapShader(bitmapColor, Shader.TileMode.CLAMP, Shader.TileMode.CLAMP);

        // 初始化画笔

        Paint paintFillet = new Paint();

        paintFillet.setAntiAlias(true);

        paintFillet.setShader(bitmapShaderColor);

        //绘画到画布中

        canvas.drawRoundRect(new RectF(0, 0, width, height), 100, 100, paintFillet);



        //第三步，绘画出一个白色的bitmap覆盖上去

        //创建存放白底的bitmap

        Bitmap bitmapWhite = Bitmap.createBitmap(width - 5 * 2, height - 5 * 2, Bitmap.Config.RGB_565);

        bitmapWhite.eraseColor(Color.parseColor("#FFFFFF"));



        BitmapShader bitmapShaderWhite = new BitmapShader(bitmapWhite, Shader.TileMode.CLAMP, Shader.TileMode.CLAMP);

        // 初始化画笔

        Paint paintWhite = new Paint();

        paintWhite.setAntiAlias(true);

        paintWhite.setShader(bitmapShaderWhite);

        // 将白色Bitmap绘制到画布上面

        canvas.drawRoundRect(new RectF(5, 5, width - 5, height - 5), 100, 100, paintWhite);



        String text = "收藏";

        Rect rect = new Rect();

        Paint paintText = new Paint();

        paintText.setAntiAlias(true);

        paintText.setColor(Color.parseColor("#000000"));

        paintText.setTextSize(100);

        paintText.getTextBounds(text, 0, text.length(), rect);

        int widthFont = rect.width();//文本的宽度

        int heightFont = rect.height();//文本的高度

        canvas.drawText(text, (width - widthFont) / 2, (height+heightFont) / 2, paintText);

    }

封装

上面虽然已经把全部功能都讲解完了，但是，假如就直接这样放入项目中，是极其不规范的，无法动态设置文本、文本大小、颜色厚度等等

这里，我进行了简易封装，大家可以基于此进行业务修改：

attrs.xml

    <declare-styleable name="GradientColorButton">

        <attr name="btnText" format="string" />

        <attr name="btnTextSize" format="dimension" />

        <attr name="btnTextColor" format="color" />

        <attr name="colorWidth" format="dimension" />

        <attr name="colorRadius" format="dimension" />

    </declare-styleable>

public class GradientColorButton extends View {



    /**

     * 文本

     */

    private String text = "";

    /**

     * 文本颜色

     */

    private int textColor;

    /**

     * 文本大小

     */

    private float textSize;

    /**

     * 颜色的宽度

     */

    private float colorWidth;

    /**

     * 圆角度数

     */

    private float radius;



    //渐变的颜色

    private int colorStart = Color.parseColor("#E38746");

    private int color1 = Color.parseColor("#B620E0");

    private int colorEnd = Color.parseColor("#5995F6");



    //控件的宽高

    private int width;

    private int height;

    /**

     * 渐变颜色的Bitmap

     */

    private Bitmap bitmapColor;



    //画笔

    private Paint paintColor;

    private Paint paintFillet;

    private Paint paintWhite;

    private Paint paintText;

    //字体的宽高

    private int widthFont;

    private int heightFont;



    public GradientColorButton(Context context) {

        super(context);

    }



    public GradientColorButton(Context context, @Nullable AttributeSet attrs) {

        this(context, attrs, 0);

    }



    public GradientColorButton(Context context, @Nullable AttributeSet attrs, int defStyleAttr) {

        super(context, attrs, defStyleAttr);



        //获取参数

        TypedArray a = context.obtainStyledAttributes(attrs,

                R.styleable.GradientColorButton, defStyleAttr, 0);



        text = a.getString(R.styleable.GradientColorButton_btnText);

        textColor = a.getColor(R.styleable.GradientColorButton_btnTextColor, Color.BLACK);

        textSize = a.getDimension(R.styleable.GradientColorButton_btnTextSize, 16);

        colorWidth = a.getDimension(R.styleable.GradientColorButton_colorWidth, 5);

        radius = a.getDimension(R.styleable.GradientColorButton_colorRadius, 100);





    }



    @Override

    protected void onLayout(boolean changed, int left, int top, int right, int bottom) {

        super.onLayout(changed, left, top, right, bottom);



        //获取View的宽高

        width = getWidth();

        height = getHeight();



        //制作一个渐变效果的Bitmap

        createGradientBitmap();



        //初始化圆角配置

        initFilletConfiguration();



        //初始化白色Bitmap配置

        initWhiteBitmapConfiguration();



        //初始化文本配置

        initTextConfiguration();



    }





    /**

     * 创建渐变颜色的Bitmap

     */

    private void createGradientBitmap() {

        //创建存放渐变效果的bitmap

        bitmapColor = Bitmap.createBitmap(width, height, Bitmap.Config.ARGB_8888);

        Canvas canvasColor = new Canvas(bitmapColor);

        LinearGradient backGradient = new LinearGradient(0, height, width, 0, new int[]{colorStart, color1, colorEnd}, null, Shader.TileMode.CLAMP);

        //绘画渐变效果

        paintColor = new Paint();

        paintColor.setShader(backGradient);

        canvasColor.drawRect(0, 0, width, height, paintColor);

    }





    /**

     * 初始化圆角配置

     */

    private void initFilletConfiguration() {

        //绘画出圆角渐变效果

        BitmapShader bitmapShaderColor = new BitmapShader(bitmapColor, Shader.TileMode.CLAMP, Shader.TileMode.CLAMP);

        // 初始化画笔

        paintFillet = new Paint();

        paintFillet.setAntiAlias(true);

        paintFillet.setShader(bitmapShaderColor);

    }



    /**

     * 初始化白色Bitmap配置

     */

    private void initWhiteBitmapConfiguration() {

        //创建存放白底的bitmap

        Bitmap bitmapWhite = Bitmap.createBitmap((int) (width - colorWidth * 2), (int) (height - colorWidth * 2), Bitmap.Config.RGB_565);

        bitmapWhite.eraseColor(Color.parseColor("#FFFFFF"));



        BitmapShader bitmapShaderWhite = new BitmapShader(bitmapWhite, Shader.TileMode.CLAMP, Shader.TileMode.CLAMP);

        // 初始化画笔

        paintWhite = new Paint();

        paintWhite.setAntiAlias(true);

        paintWhite.setShader(bitmapShaderWhite);

    }



    /**

     * 初始化文本配置

     */

    private void initTextConfiguration() {

        Rect rect = new Rect();

        paintText = new Paint();

        paintText.setAntiAlias(true);

        paintText.setColor(textColor);

        paintText.setTextSize(textSize);

        if (!TextUtils.isEmpty(text)) {

            paintText.getTextBounds(text, 0, text.length(), rect);

            widthFont = rect.width();//文本的宽度

            heightFont = rect.height();//文本的高度



        }

    }





    @Override

    protected void onDraw(Canvas canvas) {

        super.onDraw(canvas);



        //将圆角渐变bitmap绘画到画布中

        canvas.drawRoundRect(new RectF(0, 0, width, height), radius, radius, paintFillet);

        // 将白色Bitmap绘制到画布上面

        canvas.drawRoundRect(new RectF(colorWidth, colorWidth, width - colorWidth, height - colorWidth), radius, radius, paintWhite);





        if (!TextUtils.isEmpty(text)) {

            canvas.drawText(text, (width - widthFont) / 2, (height + heightFont) / 2, paintText);

        }



    }

}

    <com.jm.xpproject.GradientColorButton

        android:layout_width="120dp"

        android:layout_height="70dp"

        android:layout_margin="10dp"

        app:btnText="收藏"

        app:btnTextColor="#123456"

        app:btnTextSize="18sp"

        app:colorRadius="50dp"

        app:colorWidth="5dp" />

用 TypeScript，但不完全用

TypeScript大行其道，在每个团队中，总有那么些个宵小之辈想尽一切办法在项目里引入 ts，这种行为严重阻碍了屎山的成长速度，但同是打工人我们也不好阻止，不过就算如此，也无法阻止我们行使正义

众所周知，TypeScript 别名 AnyScript，很显然，这就是TypeScript创始人Anders Hejlsberg给我们留下的暗示，我们有理由相信AnyScript 才是他真正的目的

const list: any = []
const obj: any = {}
const a: any = 1

export default defineComponent({
  props: {
    // 现在 data 是 any 类型的啦 
    data: {
      type: Number as PropType<any>,
    },
  },
  setup(_, { emit }) {
    // 现在 props 是 any 类型的啦
    const props: any = _
    ...
  }
})

const obj: number[] = []
// ...
// 虽然 obj 是个 number[]，但为了实现业务，就得塞入一些不是 number 的类型，我也不想的啊是不是
// 至于编辑器会划红线报错？那是小问题，不用管它，别人一打开这个项目就是满屏的红线，想想就激动
obj.push('2')
obj.push([3])

const a1 = {}
const a2 = {}
const a3 = 2
const p = 1

<div class="box">
  <div class="box1"></div>
  <div class="box2"></div>
<div>
<div class="box3"></div>

&-card {
  &-btn {
    &_link {
      &--right {
      }
    }
    &-nodata {
      &_link {
        &--replay {
          &--create {}
        }
      }
    }
  }
  &-desc {}
}

data === 1
  ? 'img'
  : data === 2
    ? 'video'
    : data === 3
      ? 'text'
      : data === 4
        ? 'picture'
        : data === 5
          ? 'miniApp'

if (a > 10) {
  // 虽然下面几个 if 中对于 a 的判断毫无用处，但不仔细看谁能看出来呢？看出来了也不好说什么，毕竟也没啥错
  // 除此之外，多级 if 嵌套也是堆屎山的一个小技巧，什么提前 return 不是太明白
  if (a > 5) {
    if (a > 3 && b) {

    }
  }
  if (a > 4) {

  }
}

// 首先这个命名就很契合上面说的自由命名法
function fn1() {
  // ...
  // fn1 的逻辑比较长，且解决的是通用问题，
  // 但 myObj 偏偏是一个外部变量，这下看你怎么复用
  window.myObj.name = 'otherName'
  window.myObj.children.push({ id: window.myObj.children.length })
  // ...
}

if (a === 'prepare') {
  const data = localStorage.getItem('HOME-show_guide')
  // ...
} else if (a === 'head' && b === 'repeating-error') {
  switch(c) {
    case 'pic':
      // ...
      break
    case 'inDrawer':
      // ...
      break
  }
}

if (a === query.name + '_head') {

}

if (data === '正常') {

} else if (data === '错误') {

} else if (data === '通过') {

}

function format(str1: any, str2: any) {
  const num1 = new Date(str1).getTime()
  const num2 = new Date(str2).getTime()
  return (num2 - num1) / 1000
}

import _ from 'lodash'

mounted() {
  setTimeout(() => {
    const width = this.$refs.box.offsetWidth
    const itemWidth = 50
    // ...
  }, 200)
}

// 计算 data 是否可用
//（实际上，这个方法的作用是计算 data 是否 不可用）
function isDisabledData(data: any) {
  // ...
}

这个问题是我最近做业务开发和业余开发都遇到的，这里的 angle 指的是旋转弧度。不是旋转角度。

先看一下我使用 angle 的场景吧：

图一中使用了 canvas.drawArc，传入了 startAngle 和 sweepAngle。图二也是如此。图三是 Flutter ConstraintLayout 中圆形定位的 example，我没有使用 Flutter ConstraintLayout 自带的旋转能力，而是用了 Transform.rotate，传入了 angle。Flutter ConstraintLayout 自带的对 Widget 的旋转能力用了 canvas.rotate，也传入了 angle。

我现在还没搞明白弧度和角度的对应关系，官网文档中也没有详细说明。但对于我来说，我根本就不想去关心弧度是多少，我只关心角度，这个角度的范围是 [0.0, 360.0]。以图三中的时钟为例，旋转 0.0 或 360.0 度时，指针应该指向 12，旋转 90.0 度时，指针应该指向 3，旋转 180.0 度时，指针应该指向 6，旋转 270.0 度时，指针应该指向 9。

于是我们需要将旋转弧度转换成旋转角度，我研究出的转换公式如下：

Transform.rotate：

pi + pi * (angle / 180)

canvas.rotate：

angle * pi / 180

canvas.drawArc：

startAngle = -pi / 2

sweepAngle = angle * pi / 180

看见没有，这三类旋转的转换公式都不一样。我不明白 Flutter 官方为什么要这么设计，为啥这么优秀的 Flutter 引入了这么糟糕的 API。于是我带着气愤给官方提了个 Issue，想喷一喷设计这几个 API 的哥们：

结果我被反杀了。

冷静下来之后，我决定提交一个 Pull Request 来修正这个 API。但这需要时间，因为提交 Pull Request 的周期很长，上次我提了个 bug，Oppo 的一个哥们修复了它，Pull Request 等了将近两个月才合并。

GraphQL是一个用于API的查询语言，它可以使客户端准确地获得所需的数据，没有任何冗余。在Flutter项目中怎么使用Graphql呢？我们需要借助graphql-flutter插件

Tip： 这里以4.0.1为例

1. 添加依赖

首先添加到pubspec.yaml

然后我们再看看graphql-flutter(API)有什么，以及我们该怎么用。

2.重要API

GraphQLClient

• 仿apollo-client，通过配置Link和Cache构造客户端实例


• 像apollo-client一样通过构造不同Link来丰富client实例的功能

client实例方法几乎跟apollo-client一致，如query 、mutate 、 subscribe，也有些许差别的方法watchQuery 、 watchMutation 等，后面具体介绍使用区别

Link

• 作为抽象类，提供了Link.concat 、 Link.from的等factory函数，如上

graphql-flutter里基于Link实现了一些比较使用的类，如下

HttpLink

• 设置请求地址，默认header等

AuthLink

• 通过函数的形式设置Authentication

ErrorLink

• 设置错误拦截

DedupeLink

• 请求去重

GraphQLCache

• 配置实体缓存，官方推荐使用 HiveStore 配置持久缓存

• HiveStore在项目中关于环境是Web还是App需要作判断，所以我们需要一个方法

综上各个Link以及Cache构成了Client，我们稍加对这些API做一个封装，以便在项目复用。

3.基本封装

• 代码及释义如下

import 'dart:async';

import 'package:flutter/material.dart';

import 'package:graphql/client.dart';



import 'package:flutter/foundation.dart' show kIsWeb;

import 'package:path_provider/path_provider.dart'

    show getApplicationDocumentsDirectory;

import 'package:path/path.dart' show join;

import 'package:hive/hive.dart' show Hive;



class Gql {

  final String source;

  final String uri;

  final String token;

  final Map<String, String> header;



  HttpLink httpLink;

  AuthLink authLink;

  ErrorLink errorLink;



  GraphQLCache cache;

  GraphQLClient client;



  String authHeaderKey = 'token';

  String sourceKey = 'source';



  Gql({

    @required this.source,

    @required this.uri,

    this.token,

    this.header = const {},

  }) {

    // 设置url，复写传入header

    httpLink = HttpLink(uri, defaultHeaders: {

      sourceKey: source,

      ...header,

    });

    // 通过复写getToken动态设置auth

    authLink = AuthLink(getToken: getToken, headerKey: authHeaderKey);

    // 错误拦截

    errorLink = ErrorLink(

      onGraphQLError: onGraphQLError,

      onException: onException,

    );

    // 设置缓存

    cache = GraphQLCache(store: HiveStore());



    client = GraphQLClient(

      link: Link.from([

        DedupeLink(), // 请求去重

        errorLink,

        authLink,

        httpLink,

      ]),

      cache: cache,

    );

  }



  static Future<void> initHiveForFlutter({

    String subDir,

    Iterable<String> boxes = const [HiveStore.defaultBoxName],

  }) async {

    if (!kIsWeb) { // 判断App获取path，初始化

      var appDir = await getApplicationDocumentsDirectory(); // 获取文件夹路径

      var path = appDir.path;

      if (subDir != null) {

        path = join(path, subDir);

      }

      Hive.init(path);

    }



    for (var box in boxes) {

      await Hive.openBox(box);

    }

  }



  FutureOr<String> getToken() async => null;



  void _errorsLoger(List<GraphQLError> errors) {

    errors.forEach((error) {

      print(error.message);

    });

  }



  // LinkError处理函数

  Stream<Response> onException(

      Request req,

      Stream<Response> Function(Request) _,

      LinkException exception,

      ) {

    if (exception is ServerException) {  // 服务端错误

      _errorsLoger(exception.parsedResponse.errors);

    }



    if (exception is NetworkException) { // 网络错误

      print(exception.toString());

    }



    if (exception is HttpLinkParserException) { // http解析错误

      print(exception.originalException);

      print(exception.response);

    }



    return _(req);

  }



  // GraphqlError

  Stream<Response> onGraphQLError(

      Request req,

      Stream<Response> Function(Request) _,

      Response res,

      ) {

    // print(res.errors);

    _errorsLoger(res.errors); // 处理返回错误

    return _(req);

  }

}

4. 基本使用

• main.dart

void main() async {



  await Gql.initHiveForFlutter(); // 初始化HiveBox



  runApp(App());

}

• clent.dart

import 'dart:async';

import 'package:flutter/material.dart';

import 'package:shared_preferences/shared_preferences.dart';





const codeMessage = {

  401: '登录失效,',

  403: '用户已禁用',

  500: '服务器错误',

  503: '服务器错误',

};



// 通过复写，实现错误处理与token设置

class CustomGgl extends Gql {

  CustomGgl({

    @required String source,

    @required String uri,

    String token,

    Map<String, String> header = const {},

  }) : super(source: source, uri: uri, token: token, header: header);



  String authHeaderKey = 'token';



  @override

  FutureOr<String> getToken() async {  // 设置token

    final sharedPref = await SharedPreferences.getInstance();

    return sharedPref.getString(authHeaderKey);

  }



  @override

  Stream<Response> onGraphQLError( // 错误处理并给出提示

      Request req,

      Stream<Response> Function(Request) _,

      Response res,

      ) {

    res.errors.forEach((error) {

      final num code = error.extensions['exception']['status'];

      Toast.error(message: codeMessage[code] ?? error.message);

      print(error);

    });

    return _(req);

  }

}



// 创建ccClient

final Gql ccGql = CustomGgl(

  source: 'cc',

  uri: 'https://xxx/graphql',

  header: {

    'header': 'xxxx',

  },

);

• demo.dart

import 'package:flutter/material.dart';



import '../utils/client.dart';

import '../utils/json_view/json_view.dart';

import '../models/live_bill_config.dart';

import '../gql_operation/gql_operation.dart';



class GraphqlDemo extends StatefulWidget {

  GraphqlDemo({Key key}) : super(key: key);



  @override

  _GraphqlDemoState createState() => _GraphqlDemoState();

}



class _GraphqlDemoState extends State<GraphqlDemo> {

  ObservableQuery observableQuery;

  ObservableQuery observableMutation;



  Map<String, dynamic> json;

  num pageNum = 1;

  num pageSize = 10;



  @override

  void initState() {

    super.initState();



    Future.delayed(Duration(), () {

      initObservableQuery();

      initObservableMutation();

    });

  }



  @override

  Widget build(BuildContext context) {

    return SingleChildScrollView(

      child: Column(

        crossAxisAlignment: CrossAxisAlignment.start,

        children: [

          Wrap(

            spacing: 10.0,

            runSpacing: 10.0,

            children: [

              RaisedButton(

                onPressed: getLiveBillConfig,

                child: Text('Basic Query'),

              ),

              RaisedButton(

                onPressed: sendPhoneAuthCode,

                child: Text('Basic Mutation'),

              ),

              RaisedButton(

                onPressed: () {

                  pageNum++;



                  observableQuery.fetchMore(FetchMoreOptions(

                    variables: {

                      'pageNum': pageNum,

                      'pageSize': pageSize,

                    },

                    updateQuery: (prev, newData) => newData,

                  ));

                },

                child: Text('Watch Query'),

              ),

              RaisedButton(

                onPressed: () {

                  observableMutation.fetchResults();

                },

                child: Text('Watch Mutation'),

              ),

            ],

          ),

          Divider(),

          if (json != null)

            SingleChildScrollView(

              child: JsonView.map(json),

              scrollDirection: Axis.horizontal,

            ),

        ],

      ),

    );

  }





  @override

  dispose() {

    super.dispose();



    observableQuery.close();

  }



  void getLiveBillConfig() async {

    Toast.loading();



    try {

      final QueryResult result = await ccGql.client.query(QueryOptions(

        document: gql(LIVE_BILL_CONFIG),

        fetchPolicy: FetchPolicy.noCache,

      ));



      final liveBillConfig =

      result.data != null ? result.data['liveBillConfig'] : null;

      if (liveBillConfig == null) return;



      setState(() {

        json = LiveBillConfig.fromJson(liveBillConfig).toJson();

      });

    } finally {

      if (Toast.loadingType == ToastType.loading) Toast.dismiss();

    }

  }





  void sendPhoneAuthCode() async {

    Toast.loading();



    try {

      final QueryResult result = await ccGql.client.mutate(MutationOptions(

        document: gql(SEND_PHONE_AUTH_CODE),

        fetchPolicy: FetchPolicy.cacheAndNetwork,

        variables: {

          'phone': '15883300888',

          'authType': 2,

          'platformName': 'Backend'

        },

      ));



      setState(() {

        json = result.data;

      });

    } finally {

      if (Toast.loadingType == ToastType.loading) Toast.dismiss();

    }

  }



  void initObservableQuery() {

    observableQuery = ccGql.client.watchQuery(

      WatchQueryOptions(

        document: gql(GET_EMPLOYEE_CONFIG),

        variables: {

          'pageNum': pageNum,

          'pageSize': pageSize,

        },

      ),

    );



    observableQuery.stream.listen((QueryResult result) {

      if (!result.isLoading && result.data != null) {

        if (result.isLoading) {

          Toast.loading();

          return;

        }



        if (Toast.loadingType == ToastType.loading) Toast.dismiss();

        setState(() {

          json = result.data;

        });

      }

    });

  }



  void initObservableMutation() {

    observableMutation = ccGql.client.watchMutation(

      WatchQueryOptions(

        document: gql(LOGIN_BY_AUTH_CODE),

        variables: {

          'phone': '15883300888',

          'authCodeType': 2,

          'authCode': '5483',

          'statisticInfo': {'platformName': 'Backend'},

        },

      ),

    );



    observableMutation.stream.listen((QueryResult result) {

      if (!result.isLoading && result.data != null) {

        if (result.isLoading) {

          Toast.loading();

          return;

        }



        if (Toast.loadingType == ToastType.loading) Toast.dismiss();

        setState(() {

          json = result.data;

        });

      }

    });

  }

}

总结

这篇文章介绍了如何在Flutter项目中简单快速的使用GraphQL。并实现了一个简单的Demo。但是上面demo将UI和数据绑定在一起，导致代码耦合性很高。在实际的公司项目中，我们都会将数据和UI进行分离，常用的做法就是将GraphQL的 ValueNotifier client 调用封装到VM层中，然后在Widget中把VM数据进行绑定操作。网络上已经有大量介绍Provider|Bloc|GetX的文章，这里以介绍GraphQL使用为主，就不再赘述了。