如何为带SharedTransitionScope与AnimatedVisibilityScope的Compose组件编写预览？

你没法跳过模拟这两个参数直接预览，因为它们都是带核心功能的作用域接口，组件依赖它们才能正常编译渲染。不过不用自己手动写复杂的模拟实现，用Compose自带的工具就能轻松搞定：

• 获取SharedTransitionScope实例：用rememberSharedTransitionScope函数，它会返回一个具备基础功能的实例，足够支撑预览需求，不需要在lambda里写实际过渡逻辑。
• 获取AnimatedVisibilityScope实例：把组件包裹在AnimatedVisibility（设置visible = true）的lambda内部，直接用this就能拿到该作用域，因为lambda的上下文就是AnimatedVisibilityScope。

示例代码：

@Preview
@Composable
fun NoteContentPreview() {
    val sharedTransitionScope = rememberSharedTransitionScope {
        // 预览不需要实际过渡逻辑，留空即可
    }

    AnimatedVisibility(visible = true) {
        NoteContent(
            sharedTransitionScope = sharedTransitionScope,
            animatedVisibilityScope = this
        )
    }
}

额外建议：

• 如果组件里的过渡逻辑在预览中不需要生效，可以给组件加个预览专用的参数，或者用条件判断跳过过渡相关代码，只渲染静态UI。
• 要是只想看静态UI，建议把组件拆分为「纯UI展示部分」和「过渡逻辑部分」，单独预览纯UI组件，就不用依赖这两个作用域参数了。

内容的提问来源于stack exchange，提问作者agung Dwi