如何在Compose UI中嵌入Snapkit登录按钮

你可以通过Jetpack Compose提供的AndroidView桥接组件直接对接这个基于ViewGroup实现的预设登录按钮，具体实现步骤如下：

• 基础实现逻辑：在AndroidView的factory回调中初始化Snapkit登录按钮，配置登录参数、结果回调，通过modifier适配Compose布局规则，示例代码如下：

@Composable
fun SnapLoginButtonCompose(
    modifier: Modifier = Modifier,
    isButtonEnabled: Boolean = true,
    onLoginSuccess: (AuthToken) -> Unit,
    onLoginError: (LoginError) -> Unit
) {
    // 记住最新的回调实例，避免回调持有旧的状态引用
    val latestOnSuccess = rememberUpdatedState(onLoginSuccess)
    val latestOnError = rememberUpdatedState(onLoginError)

    AndroidView(
        modifier = modifier,
        factory = { context ->
            SnapLoginButton(context).apply {
                // 配置登录请求的权限范围
                setLoginPermissions(listOf("user.display_name", "user.bitmoji.avatar"))
                // 绑定登录结果回调
                addLoginCallback(object : LoginCallback {
                    override fun onSuccess(authToken: AuthToken) {
                        latestOnSuccess.value.invoke(authToken)
                    }

                    override fun onError(error: LoginError) {
                        latestOnError.value.invoke(error)
                    }
                })
            }
        },
        update = { snapLoginButton ->
            // 随Compose状态动态更新按钮属性
            snapLoginButton.isEnabled = isButtonEnabled
        }
    )

    // 可选：页面销毁时移除回调，避免内存泄漏
    DisposableEffect(Unit) {
        onDispose {
            // 若有全局回调注册，在此处做注销操作
        }
    }
}

// 业务页面调用示例
@Composable
fun LoginPage() {
    SnapLoginButtonCompose(
        modifier = Modifier
            .fillMaxWidth()
            .padding(horizontal = 20.dp, vertical = 12.dp),
        onLoginSuccess = { authToken ->
            // 处理登录成功逻辑，比如保存token、跳转首页
        },
        onLoginError = { error ->
            // 处理登录失败逻辑，比如弹出错误提示
        }
    )
}

• 注意事项：
  • 可变状态的引用不要放在factory回调中，所有需要动态更新的View属性都写在update回调里，确保状态变更时可以同步到View
  • 登录回调中如果需要操作Compose的状态，建议使用rememberUpdatedState包裹回调，避免回调持有旧的Compose状态快照导致逻辑异常
  • 如果按钮有全局的回调注册逻辑，记得在DisposableEffect的onDispose中做注销操作，避免内存泄漏

内容的提问来源于stack exchange，提问作者Yuri Schimke