Compose笔记(六十七)--LookaheadScope

这一节主要了解一下Compose中的LookaheadScope，在Jetpack Compose开发中，LookaheadScope是一个高级动画与布局预测工具，用于在布局尚未真正发生变更前，提前"预测"未来布局状态，从而实现更流畅、响应更快的动画效果。简单总结如下:

场景:

1 列表项删除时的平滑收缩动画

2 共享元素过渡

栗子:

Kotlin 复制代码

import androidx.compose.foundation.background
import androidx.compose.foundation.layout.Box
import androidx.compose.foundation.layout.Column
import androidx.compose.foundation.layout.Spacer
import androidx.compose.foundation.layout.fillMaxWidth
import androidx.compose.foundation.layout.height
import androidx.compose.foundation.layout.padding
import androidx.compose.material3.Button
import androidx.compose.material3.ExperimentalMaterial3Api
import androidx.compose.material3.Text
import androidx.compose.runtime.Composable
import androidx.compose.runtime.getValue
import androidx.compose.runtime.mutableStateOf
import androidx.compose.runtime.remember
import androidx.compose.runtime.setValue
import androidx.compose.ui.Modifier
import androidx.compose.ui.graphics.Color
import androidx.compose.ui.layout.LookaheadScope
import androidx.compose.ui.unit.dp

@OptIn(ExperimentalMaterial3Api::class)
@Composable
fun LookaheadDemo() {
    var expanded by remember { mutableStateOf(false) }

    LookaheadScope {
        Column(
            modifier = Modifier
                .fillMaxWidth()
                .padding(16.dp)
        ) {
            Button(
                onClick = { expanded = !expanded },
                modifier = Modifier.fillMaxWidth()
            ) {
                Text(if (expanded) "Collapse" else "Expand")
            }

            Spacer(modifier = Modifier.height(16.dp))

            Box(
                modifier = Modifier
                    .fillMaxWidth()
                    .height(if (expanded) 200.dp else 100.dp)
                    .background(Color.Blue)
            )
        }
    }
}

Kotlin 复制代码

mport androidx.compose.animation.core.animateDpAsState
import androidx.compose.animation.core.tween
import androidx.compose.foundation.background
import androidx.compose.foundation.layout.Box
import androidx.compose.foundation.layout.fillMaxSize
import androidx.compose.foundation.layout.padding
import androidx.compose.foundation.layout.size
import androidx.compose.material3.Button
import androidx.compose.material3.MaterialTheme
import androidx.compose.material3.Text
import androidx.compose.runtime.Composable
import androidx.compose.runtime.getValue
import androidx.compose.runtime.mutableStateOf
import androidx.compose.runtime.remember
import androidx.compose.runtime.setValue
import androidx.compose.ui.Alignment
import androidx.compose.ui.Modifier
import androidx.compose.ui.layout.LookaheadScope
import androidx.compose.ui.unit.dp

@Composable
fun LookaheadScopeDemo() {
 
    var isLargeSize by remember { mutableStateOf(false) }
  
    val targetSize by animateDpAsState(
        targetValue = if (isLargeSize) 200.dp else 100.dp,
        animationSpec = tween(durationMillis = 500),
        label = "size animation"
    )

    Box(
        modifier = Modifier.fillMaxSize(),
        contentAlignment = Alignment.Center
    ) {
        LookaheadScope {
            Box(
                modifier = Modifier
                    .size(targetSize)
                    .background(MaterialTheme.colorScheme.primary, MaterialTheme.shapes.medium),
                contentAlignment = Alignment.Center
            ) {
                Text(
                    text = if (isLargeSize) "大尺寸" else "小尺寸",
                    color = MaterialTheme.colorScheme.onPrimary
                )
            }
           
            Button(
                onClick = { isLargeSize = !isLargeSize },
                modifier = Modifier.padding(top = 300.dp)
            ) {
                Text(text = "切换组件尺寸")
            }
        }
    }
}

注意:

1 实验性API：需添加 @OptIn(ExperimentalMaterial3Api::class)。

2 适用场景：主要用于Material 3组件或自定义动态布局。