在最近的一个项目中，我需要添加一个二维码扫描器。让使用者快速连接到 Wi‑Fi 网络。虽然理论上这很简单——扫描二维码、提取 SSID 和密码，接下来建立连接——但实际操作却充满了挫败感。

痛点一的观点是。Compose 里相机功能总是要回退到 AndroidView

即使整个 UI 都是声明式的，摄像头预览几乎总是被迫放进 AndroidView。这让代码显得像拼凑而非整体，手势处理、权限检查、生命周期管理都变得混乱。每次更新 CameraX 或 Compose 都需要重新编写粘合代码，导致维护成本飙升。

痛点二的观点是，权限与生命周期的多重交叉点

相机功能依赖摄像头权限和生命周期。老实说，如果没有权限就无法启动；老实说，如果应用切到后台再返回，也需要重新检查状态。将这些逻辑嵌入 Compose 的可组合层会让代码变得臃肿且易错。

再看痛点三，二维码扫描后的重复触发与连接失败的烦恼

一旦检测到 QR 码。UI 会不断收到一样的结果，导致多次尝试连接 Wi‑Fi，甚至出现失败弹窗。缺乏控制扫描频率会让使用者体验变差。

为什么 Compose 中的 Wi‑Fi 二维码扫描曾经令人烦恼？

长期以来在 Jetpack Compose 中建立基于相机的功能都有隐性的妥协。Compose 鼓励状态驱动 UI 和生命周期感知，但相机预览往往被放在命令式的 AndroidView 中。老实说，这导致的观点是，

• 思维模式混乱：声明式与命令式交织，让代码像拼装玩具一样。
• 手势处理麻烦：点击聚焦、叠加层或动画都需要在 View 与 Compose 之间精细协调。
• 容易过时：每一次 CameraX 或 Compose 更新，都可能需要重写互操作模块。

💡 主要痛点： 无法在纯 Compose 中实现平滑、可维护的相机预览与扫码流程。

CameraX Compose 替代 AndroidView 的关键转折

因为 CameraX Compose artifacts 的推出，CameraXViewfinder` 让我们不再需要嵌入 `PreviewView`。相机预览现在可以直接作为可组合组件渲染。支持裁剪、分层、动画和指针输入，无需跨越视图层级边界。

• `SurfaceRequest` 被收集为 StateFlow 并传递给 `CameraXViewfinder`：
• `CameraPreviewViewModel` 管理摄像头绑定和分析，用 StateFlow 暴露 SurfaceRequest 给 UI 层：
• `LaunchedEffect` 自动绑定/解绑摄像头，并保证线程安全和资源清理：

✅ 好处： - 全部逻辑保持在 Compose 内 - 生命周期自动管理 - 比较容易做到点击聚焦与坐标转换 - 避免繁琐的视图互操作代码 - 更易维护和复用

二维码扫描器屏幕的高级架构

The screen is split into three clear responsibilities:

1. 导航入口
2. Wi‑Fi 状态 & 业务逻辑
3. 摄像头预览 & 二维码分析

This separation ensures that changes in one layer don’t ripple through unrelated logic.

权限与生命周期处理

@OptIn
@Composable
fun QrScannerScreen(
从onBack来看。-> Unit,onGoToSettings: -> Unit,) {
val viewModel: WiFiViewModel = viewModel
val permissionState = rememberPermissionState
var ssid by remember { mutableStateOf }
var password by remember { mutableStateOf }
var security by remember { mutableStateOf }
// ... UI state handling ...
// Lifecycle observer inside ON_RESUME
DisposableEffect {
val observer = LifecycleEventObserver { _,event ->
if {
if {
permissionState.launchPermissionRequest
}
viewModel.isConnected
}
}
lifecycleOwner.lifecycle.addObserver
onDispose { lifecycleOwner.lifecycle.removeObserver }
}
// Forward scan results to business logic
QrScannerScreen(
connecting = uiState.connectionState == ConnectionState.CONNECTING,onBack = onBack,onAnalyze = { wifi ->
ssid = wifi.ssid?按理说，: ""
password = wifi.password?
: ""
security = when {
Barcode.WiFi.TYPE_OPEN -> SecurityType.OPEN
Barcode.WiFi.TYPE_WEP -> SecurityType.WEP
Barcode.WiFi.TYPE_WPA -> SecurityType.WPA
else -> SecurityType.UNKNOWN
}
viewModel.suggestWiFi
},)
}

为什么这种方法有效？不过，

• 权限检查时机精准：You request permissions inside `ON_RESUME`,so it handles re‑entering from Settings.
• 显式生命周期观察：You bind observers via `DisposableEffect`。preventing memory leaks.
• UI 状态驱动响应：The UI reacts solely to `uiState.connectionState`,eliminating guesswork.
• 扫码结果即时翻译为业务动作：Your scanner only emits `Barcode.WiFi`;business logic interprets it.

使用 CameraXViewfinder 的摄像头预览层

@Composable
fun QrScannerScreen(
connecting: Boolean,onBack: -> Unit,onAnalyze: -> Unit,) {
Scaffold(
topBar = {
IconButton {
Icon(Icons.AutoMirrored.Outlined.ArrowBack,contentDescription = stringResource)
}
},) { padding ->
Column) {
Spacer)
Text,modifier = Modifier.fillMaxWidth,textAlign = TextAlign.Center)
ElevatedCard(
modifier = Modifier
.fillMaxWidth
.height。) {
Box) {
if CircularProgressIndicator)
else{
val vm = remember{ CameraPreviewViewModel }
CameraPreviewContent
}
}
}
Spacer)
}
}
}

• Bare‑bones layout—just a card wrapping preview.
• The preview itself lives entirely inside normal Compose layout.
• No “magic” interop tricks—everything stays declarative.
• User feedback is driven purely by state.

CameraPreviewContent：SurfaceRequest 渲染实现细节

@Composable
fun CameraPreviewContent(
viewModel: CameraPreviewViewModel,onAnalyze: ->Unit,lifecycleOwner: LifecycleOwner=LocalLifecycleOwner.current,){
val surfaceRequest by viewModel.surfaceRequest.collectAsStateWithLifecycle
LaunchedEffect{
viewModel.bindToCamera
}
var autofocusReq by remember{ mutableStateOf to Offset.Unspecified)}
val currentTapFocus by rememberUpdatedState
surfaceRequest?.let{ req ->
val transformer=remember{ MutableCoordinateTransformer }
CameraXViewfinder(
surfaceRequest=req,coordinateTransformer=transformer,modifier=Modifier.pointerInput{
detectTapGestures{ tapCoords ->
with{currentTapFocus)}
autofocusReq=UUID.randomUUID to tapCoords
}}})
}

• broadcaster pattern：.collectAsStateWithLifecycle automatically cancels when composition leaves scope.
• binder launched via @Composable LaunchedEffect。ensuring camera binding runs only when active.
• => No manual start/stop APIs needed—cleanup happens automatically via cancellation and finally block in ViewModel.

绑定 CameraX 用例并发布 SurfaceRequest

@ExperimentalCamera2Interop
class CameraPreviewViewModel : ViewModel{
private val _surfaceRequest=MutableStateFlow
val surfaceRequest=_surfaceRequest
private var meterFactory:SurfaceOrientedMeteringPointFactory?=null
private var cameraCtrl:CameraControl?=null
private val previewUseCase=CameraPreview.Builder.build.apply{
setSurfaceProvider{newReq->
_surfaceRequest.update{newReq}
meterFactory=SurfaceOrientedMeteringPointFactory。newReq.resolution.height.toFloat)
}}
suspend fun bindToCamera->Unit){
val provider=ProcessCameraProvider.awaitInstance
val exec=Executors.newSingleThreadExecutor
// ImageAnalysis pipeline for QR codes:
val analysis=ImageAnalysis.Builder
.setBackpressureStrategy.build
.apply{
setAnalyzer(exec,QrCodeAnalyzer{qr->
qr.wifi?.let{onAnalyze}
})
provider.bindToLifecycle
cameraCtrl=camera.cameraControl
try{
awaitCancellation
}finally{
provider.unbindAll;cameraCtrl=null;说起来，exec.shutdown
}
}
fun tapToFocus{
meterFactory?.createPoint?.let{point->
cameraCtrl?.startFocusAndMetering.build)
}}} 

• Binds both Preview & ImageAnalysis into one lifecycle owner – no separate “preview” thread.
• The analyzer uses STRATEGY_KEEP_ONLY_LATEST – keeps frame queue small & prevents stale scans.
• A clean cancellation/cleanup pattern guarantees no leaked executors or dangling cameras after navigation away from screen.

ML Kit + QrCodeAnalyzer 简要说明

• ML Kit's BarcodeScanning API produces multiple barcode types but Wi‑Fi QR is exposed as . • Your analyzer simply forwards that object to composable layer – no or data leaks out. • The scanner runs asynchronously using a single-threaded executor – fits perfectly inside ImageAnalysis’s pipeline. • Because you filter only for wifi payloads you keep downstream logic lean and predictable.

点击聚焦与坐标转换细节

• You attach pointerInput directly onto CameraXViewfinder** →** detectTapGestures** →** transform coords using **MutableCoordinateTransformer** which converts from screen space to camera surface space. • Then you create a MeteringPoint via factory built from Surface resolution – this is exactly what underlying camera expects for focus points. • Finally you call cameraControl.startFocusAndMetering – all done within your ViewModel so that composable stays pure.

连接状态、使用者体验及生产环境考量

• 在检测到 QR 后立即停止进一步扫描——防止重复尝试；• 当“连接中”时隐藏预览并取消分析；• 设置跳转后通过 ON_RESUME 重新检查权限并继续流程；• 防止因多次回调导致重复连接尝试，可在业务层做简单节流或首发保护；• 保持 ImageAnalysis 使用 KEEP_ONLY_LATEST 确保实时响应；• 清理完全由 awaitCancellation + finally 控制——不再出现执行器泄漏或后台摄像头。

⚠️ 注意：实际项目中请根据设备测试并微调坐标转换精度，以获得更好的聚焦体验。​

结论——从“必须使用 AndroidView”到“全声明式无缝扫码”

I hope this feature implementation was simple enough—scan a Wi‑Fi QR code n connect automatically—and that was never about ML Kit or even CameraX itself but about how modern Jetpack Compose still forces us back into old imperative patterns for something as fundamental as an image preview.

The good news is that today’s CameraX Compose artifacts + CameraXViewfinder’ s “surface request” workflow allow us to render a full‑featured camera experience entirely within compose—no more interop scaffolding or fragile lifecycle juggling!.

• Toger we get:
:
• - A single composable layer handling navigation and permissions;
:
• - A dedicated Viewmodel taking care of camera binding & surface requests;说起来，
:
• - A pure composable preview rendering via CameraXViewfinder;
:
• - Clean separation makes future updates painless;
:
• - No hidden callbacks or manual resource cleanup required;
.

​

欢迎搜索并关注 "稀有猿诉" 保护原创，请勿转载！
​

---