Recomposition的概念以及原则
在讲HorizontalPager与BottomNavigation联动之前先需要区理解下一下Composable 的 Recomposition(官方文档译为”重组”),可以移步看这两篇文章。
Compose 的重组会影响性能吗?聊一聊 recomposition scope
手把手带你走一遍Compose重组流程
总结来说就是:Compose 在编译期分析出会受到某 state 变化影响的代码块,并记录其引用,当此 state 变化时,会根据引用找到这些代码块并标记为 Invalid 。在下一渲染帧到来之前 Compose 会触发 recomposition,并在重组过程中执行 invalid 代码块。
Invalid 代码块即编译器找出的下次重组范围。能够被标记为 Invalid 的代码必须是非 inline 且无返回值的 @Composalbe function/lambda,必须遵循 重组范围最小化 原则。
为何是 非 inline 且无返回值(返回 Unit)?
对于 inline 函数,由于在编译期会在调用处中展开,因此无法在下次重组时找到合适的调用入口,只能共享调用方的重组范围。
而对于有返回值的函数,由于返回值的变化会影响调用方,因此无法单独重组,而必须连同调用方一同参与重组,因此它不能作为入口被标记为 invalid
范围最小化原则
只有会受到 state 变化影响的代码块才会参与到重组,不依赖 state 的代码不参与重组。
HorizontalPager与BottomNavigation联动
还没有玩过compose的可以简单的把HorizontalPager理解成平常用的viewpager,BottomNavigationl理解成底部导航栏。一般一个activity多个fragment模式的都会用到这两个东西。
主要代码如下:compose版本为compose_version = ‘1.0.2’,介绍这个compose的版本是因为在后续我升级到最新的版本,HorizontalPager的实现方式发生了变化,前面能用的,升级后不能用了。
class MainActivity : ComponentActivity() {
@OptIn(ExperimentalPagerApi::class)
override fun onCreate(savedInstanceState: Bundle?) {
super.onCreate(savedInstanceState)
/**
* 1、setContent方法里 通过创建ComposeView,并当作R.layout.xxx 设置到原setContentView方法中,来初始化内容视图。
* 2、@Composable 函数最后生成LayoutNode,一些列@Composable 最后构建成了一个以root为根的LayoutNode树
* 3、Modifier 绑定到 LayoutNode 中,每一个Modifier的扩展方法首先会通过 then 方法生成CombinedModifier的链,
* 即每一个CombinedModifier 中 都包含上一个扩展方法返回的 Modifier,然后在 LayoutNode 中转换为LayoutNodeWrapper链,
* 然后测量过程中递归遍历所有LayoutNodeWrapper链中所有LayoutNodeWrapper进行各个属性测量,最后回到LayoutNodeWrapper链中
* 最后一个节点 InnerPlaceable(LayoutNode成员属性中初始化) 中开始测量当前LayoutNode子node,然后记录测量结果。
* 4、测量流程 从我们的 AndroidComposeView 的 onMeasure 方法中开始,通过AndroidComposeView中的root来递归测量所有的LayoutNode,
* 每一个LayoutNode又通过 LayoutNodeWrapper链测量。
* 5、绘制draw入口 也在 AndroidComposeView 里,在 dispatchDraw 方法里调用了 root.draw(this)
*/
setContent {
//observeAsState 该函数的作用就是将ViewModel提供的LiveData数据转换为Compose需要的State数据。
val viewModel:MainViewModel = viewModel()
val selectIndex by viewModel.getSelectedIndex().observeAsState(initial = 0)
ComposePracticeTheme {
Column {
val pageState = rememberPagerState(
pageCount = 5,
initialPage = selectIndex,
initialOffscreenLimit = 4
)
HorizontalPager(
state = pageState,
dragEnabled = false,
modifier = Modifier.weight(1f)
) { pager ->
when(pager){
0 -> NewsPage()
1 -> MoviePage()
2 -> PicturePage()
3 -> MusicPage()
4 -> WeatherPage()
}
}
BottomNavigationAlwaysShowLabelComponent(pagerState = pageState)
}
}
}
}
}
/**
* Composable的生命周期
*
* onActive :当Composable首次进入组件树的时候
* onCommit :当UI随着recomposition发生更新的时候
* onDispose : 当Composable从组件树移除的时候
*/
@OptIn(ExperimentalPagerApi::class)
@Composable
fun BottomNavigationAlwaysShowLabelComponent(pagerState: PagerState){
val viewModel:MainViewModel = viewModel()
val selectIndex by viewModel.getSelectedIndex().observeAsState(0)
/**
* 作用:用来创建并获取某个跨越函数栈存在的数据
* rememberCoroutineScope创建CoroutineScope,CoroutineScope不会随函数的执行反复创建
* Scope与Composable生命周期一致,随着onDispose而cancel,避免泄露、
* Dispatcher通常为AndroidUiDispatcher.Main
*/
val scope = rememberCoroutineScope()
BottomNavigation(backgroundColor = Color.White) {
listItem.forEachIndexed { index, label ->
BottomNavigationItem(
icon = {
when(index){
0 -> BottomIcon(image = Icons.Filled.Home, selectIndex = selectIndex, index = index)
1 -> BottomIcon(image = Icons.Filled.List, selectIndex = selectIndex, index = index)
2 -> BottomIcon(image = Icons.Filled.Favorite, selectIndex = selectIndex, index = index)
3 -> BottomIcon(image = Icons.Filled.ThumbUp, selectIndex = selectIndex, index = index)
4 -> BottomIcon(image = Icons.Filled.Place, selectIndex = selectIndex, index = index)
}
},
label = {
Text(
text = label,
color = if (selectIndex == index) MaterialTheme.colors.primary else Color.Gray
)
},
selected = selectIndex == index ,
onClick = {
viewModel.saveSelectIndex(index)
scope.launch {
pagerState.scrollToPage(index)
}
})
}
}
}
用上面的代码没有问题,但是升级之后,HorizontalPager的实现方式改变了,所以初始化方式也改变了,在compose_version = ‘1.1.0-beta02’中,HorizontalPager的使用方式为:
HorizontalPager(
state = pageState,
modifier = Modifier
.weight(1f)
/*.scrollable(
state = rememberScrollState(),
enabled = false,
orientation = Orientation.Horizontal
)*/,
count = listItem.size
) { page ->
when(page){
0 -> {
NewsPage()
}
1 -> {
MoviePage()
}
2 -> {
PicturePage()
}
3 -> {
MusicPage()
}
4 -> {
WeatherPage()
}
}
}
然后运行发现,滑动HorizontalPager的时候发现,BottomNavigation不跟随联动,然后我返回到前面的版本做的方式,原来是有个方式可以禁止HorizontalPager滑动的参数,直接将那个参数置为false,这样HorizontalPager滑不动,那自然也没这个联动的效果,自然也就没问题。
那现在的问题是HorizontalPager没有这个dragEnabled这个参数来控制,那我们也就没办法禁止HorizontalPager滑动,那现在的问题有两种解决办法,1是回退到最开始的版本,但是有个问题,以后一直不升级嘛?那就选择第二个问题,就是硬着头皮试着去改。
于是先去看原来的版本dragEnabled这个参数是怎么控制HorizontalPager滑动的。
HorizontalPager里面调用的是Pager,然后搜索找到最终使用dragEnabled的使用处为
val scrollable = Modifier.scrollable(
orientation = if (isVertical) Orientation.Vertical else Orientation.Horizontal,
flingBehavior = flingBehavior,
reverseDirection = reverseDirection,
state = state,
interactionSource = state.internalInteractionSource,
enabled = dragEnabled,
)
然后调用Layout方法,
Layout(
modifier = modifier
.then(semantics)
.then(scrollable)
// Add a NestedScrollConnection which consumes all post fling/scrolls
.nestedScroll(connection = ConsumeFlingNestedScrollConnection)
.clipScrollableContainer(isVertical),
......
)
上面modifier具体的操作的原理可以看
Compose | 一文理解神奇的Modifier 一文。从上面可以看到,其实是将dragEnabled传入到Modifier,那这换不简单,好像说一句,就这?
于是进行操作,修改如下,
HorizontalPager(
state = pageState,
modifier = Modifier
.weight(1f)
.scrollable(
state = rememberScrollState(),
enabled = false,
orientation = Orientation.Horizontal
),
count = listItem.size
)
然后一运行,打脸来的太快,和原来的效果一模一样,依旧无法联动。
看来得转换思路啊,我们看到在点击BottomNavigationItem得时候,HorizontalPager是可以跟着动的,但是滑动HorizontalPager,BottomNavigationItem却不跟着改变,可以看到点击事件做了下面的操作。
onClick = {
//viewModel.saveSelectIndex(pagerState.currentPage)
scope.launch {
pagerState.scrollToPage(index)
}
}
是不是可以理解pagerState控制着HorizontalPager,然后联想到本来开头讲的重绘,当pagerState发生改变的时候,HorizontalPager是使用了pageState,然后发生了重绘,但是我们的BottomNavigationItem没有使用pageState,所以也就没有发生改变。有了这个思路,尝试的对原来的代码进行改变如下;
BottomNavigation(backgroundColor = Color.White) {
listItem.forEachIndexed { index, label ->
BottomNavigationItem(
icon = {
when(index){
0 -> BottomIcon(image = Icons.Filled.Home, selectIndex = pagerState.currentPage, index = index)
1 -> BottomIcon(image = Icons.Filled.List, selectIndex = pagerState.currentPage, index = index)
2 -> BottomIcon(image = Icons.Filled.Favorite, selectIndex = pagerState.currentPage, index = index)
3 -> BottomIcon(image = Icons.Filled.ThumbUp, selectIndex = pagerState.currentPage, index = index)
4 -> BottomIcon(image = Icons.Filled.Place, selectIndex = pagerState.currentPage, index = index)
}
},
label = {
Text(
text = label,
color = if (index == pagerState.currentPage) MaterialTheme.colors.primary else Color.Gray
)
},
selected = index == pagerState.currentPage ,
onClick = {
//viewModel.saveSelectIndex(pagerState.currentPage)
scope.launch {
pagerState.scrollToPage(index)
}
})
}
}
最终运行实现了我们想要的效果。
参考资料
Compose 的重组会影响性能吗?聊一聊 recomposition scope
手把手带你走一遍Compose重组流程
Compose | 一文理解神奇的Modifier
1、本站所有资源均从互联网上收集整理而来,仅供学习交流之用,因此不包含技术服务请大家谅解!
2、本站不提供任何实质性的付费和支付资源,所有需要积分下载的资源均为网站运营赞助费用或者线下劳务费用!
3、本站所有资源仅用于学习及研究使用,您必须在下载后的24小时内删除所下载资源,切勿用于商业用途,否则由此引发的法律纠纷及连带责任本站和发布者概不承担!
4、本站站内提供的所有可下载资源,本站保证未做任何负面改动(不包含修复bug和完善功能等正面优化或二次开发),但本站不保证资源的准确性、安全性和完整性,用户下载后自行斟酌,我们以交流学习为目的,并不是所有的源码都100%无错或无bug!如有链接无法下载、失效或广告,请联系客服处理!
5、本站资源除标明原创外均来自网络整理,版权归原作者或本站特约原创作者所有,如侵犯到您的合法权益,请立即告知本站,本站将及时予与删除并致以最深的歉意!
6、如果您也有好的资源或教程,您可以投稿发布,成功分享后有站币奖励和额外收入!
7、如果您喜欢该资源,请支持官方正版资源,以得到更好的正版服务!
8、请您认真阅读上述内容,注册本站用户或下载本站资源即您同意上述内容!
原文链接:https://www.dandroid.cn/archives/19349,转载请注明出处。
评论0