共享控件¶

简单共享元素¶

使用共享元素时，只需在两个页面中使用Element函数将共享的元素起来，两者使用相同的key，然后在route时设置transform=share(key)，只有share指定的key的共享元素才会共享。

//page1
Button(onClick={
    pageScope.route("page2"){
        transform = share("ele_key")
    }
})

Element("ele_key"){
    //code...
}

//page2
Element("ele_key"){
    //code...
}

共享元素是支持多个的，只需要在share方法中指明即可，没有指明的Element将不执行共享（和普通的控件没有区别）
ele_key是唯一键，指定两个页面的元素是否共享，以及在一次页面路由中有哪些共享元素参与变换。
而唯一键可以是任意类型，建议使用data class，枚举或字符串

共享元素内部变换¶

上述是简单的共享元素使用，当你需要共享元素内部的样式也需要在共享过程中进行变换，比如希望共享元素的背景颜色可以顺滑的过渡，那么需要进阶一下。

//page1
Button(onClick={
    pageScope.route("page2"){
        transform = share("ele_key")
    }
})

Element("ele_key",styles=listOf(Color.Red)){
    val bgColor by getStyle(0, animate = animateColor())
    //code...
}

//page2
Element("ele_key",styles=listOf(Color.Blue)){
    val bgColor by getStyle(0, animate = animateColor())
    //code...
}

这样共享元素内部直接使用bgColor即可。除了color，还支持Int，Offset等多种值，如果有特殊的值，可使用animateValue方法进行自定义。当需要共享元素内部变换响应手势，只需要给getStyle方法设置sharing即可：

    val bgColor by getStyle(0,sharing = ::sharing, animate = animateColor())

如此，bgColor的值将会随着手势的进度而变化。

更新共享元素¶

当存在多个共享元素时，以A共享元素进入，可以通过更新共享元素使得可以使用B共享元素退出。

//page2
 updateElement("label")

 //page1
 onUpdateElement{
    //code...
 }

使用updateElement方法即可替换当前使用的共享元素，如果替换的共享元素并未找到，那么将会通过onUpdateElement回调方法通知给前一个页面，让其准备好。

官方的共享元素。¶

在我编写MRouter的时候官方是还没有推出共享元素的，但是到现在，官方已经推出了，是两种不同的实现，待官方的稳定之后也会考虑集成进来。官方的共享元素。