<
Compose学习笔记 遇到的问题
>
上一篇

Compose学习笔记 Remember 下一篇

微信支付 小坑

学习笔记-遇到的问题

使用 coil 时 值为空时 可能整个屏显示都有问题 所以要记得判空

if (res.isNullOrEmpty().not()) {
    AsyncImage(model = res?.get(0)?.path, contentDescription = null)
}

Compose 设置 Views selector 的 state_pressed 效果

// 定义按压相关和颜色
val interactionSource = remember { MutableInteractionSource() }
val isPressed by interactionSource.collectIsPressedAsState()
val color = if (isPressed) Color.Blue else Color.Green

// 需要使用 Button
Button(
    interactionSource = interactionSource,
    colors = ButtonDefaults.buttonColors(containerColor = color),
    onClick = { },
    ) {
    Text(text = "Button")
}

注意按压效果与 Ripple 效果不完全一致，Ripple 是有透明度的

// 可以设置给任意UI可组合件
modifier = Modifier
    .background(colorResource(id = R.color.wx_foreground))
    .clickable(
        // 点击事件的水波纹效果
        indication = rememberRipple(color = colorResource(id = R.color.wx_foreground_pressed)), // 透明度的颜色
//        indication = null, // 去除 ripple 效果
        interactionSource = remember { MutableInteractionSource() },
    ) {
        ToastUtils.showShort("点击")
    }

HorizontalPager 的 item 数据错乱 重复执行 问题

页码 page 错乱，而 pagerState.currentPage 执行多次 最后是正确的 index。使用 if (page != pagerState.currentPage) 来判断 可避免数据错乱问题

HorizontalPager(
    state = pagerState,
    modifier = Modifier
        .fillMaxSize()
        .weight(1f),
) { page ->

    // 由于异步更新和页面预渲染等原因，HorizontalPager 的 page 和 pagerState.currentPage 可能会不同步
    if (page != pagerState.currentPage) {
        return@HorizontalPager
    }

    val item = projectTree[pagerState.currentPage]

    LaunchedEffect(item) { // 当 参数 item 变化时 会重新执行
        println("request id=${item?.id} name=${item?.nameDecoded}")
		// 请求网络
		// viewModel.fetchList(item?.id)
    }
    val list by viewModel.list.collectAsState()
	LazyColumn {
	    items(list) {
		    Text(text = it.title)
		}
	}
}

页面返回时 页面渲染的不确定性问题

问题：一般情况下，

处理办法：重写返回事件并带上返回参数，同时强制返回页面时一定重新渲染（起码状态发生变化会重组）。返回后可以读取返回参数再做进一步处理

将要返回的页面

    val navController = LocalNavController.current

    BackHandler {
        if(param != null) { // param 是传过来的参数，根据实际情况确定是否需要使用它来判断页面来源
            navController.previousBackStackEntry?.savedStateHandle?.set("refresh", true)
        }
        navController.popBackStack()
    }

返回到的页面

    val refresh = navController.currentBackStackEntry
        ?.savedStateHandle
        ?.getLiveData<Boolean>("refresh")
        ?.observeAsState()

    // 监听 refresh?.value 的变化，并在 refresh 为 true 时触发逻辑
    LaunchedEffect(refresh?.value) {
        if (refresh?.value == true) {
            // 强制触发页面重新渲染的逻辑
            // 比如重新加载数据

            // 当渲染完成后，可以将值重置
            navController.currentBackStackEntry?.savedStateHandle?.set("refresh", false)
        }
    }
Top
Foot