Jetpack Compose+MVVM架构下如何仅拉取一次数据避免页面切换UI闪烁

问题根因 #

闪烁的核心原因有两个：

1. Tab切换时你用when分支直接移除/添加列表组件，每次切换都会重新创建整个列表UI，触发全量重绘
2. 重新打开优惠页时如果Fragment重建，ViewModel跟着销毁重建，会重复拉取数据触发状态更新
3. 列表重组未做优化，没有稳定类型标记和唯一key，导致不必要的重组

优化步骤 #

1. 限制数据仅拉取一次 #

修改ViewModel逻辑，增加拉取标记位，同时如果不需要实时监听数据库变更，改成一次性拉取数据：

class DiscountViewModel(
    private val couponService: FirebaseCouponService,
    private val discountMapper: DiscountMapper
) : ViewModel() {
    // 增加数据拉取标记，避免重复拉取
    private var isDataLoaded = false
    // Channel设置BUFFERED容量，避免丢事件
    val actions = Channel<DiscountAction>(Channel.BUFFERED)
    val state = DiscountViewState()

    init {
        viewModelScope.launch {
            if (!isDataLoaded) {
                // 一次性获取数据，不需要持续监听用first()替代collect
                couponService.getCoupons().first { result ->
                    if (result is SuccessCollection) {
                        actions.trySend(SuccessCouponDownloaded(result.snapshot))
                        isDataLoaded = true
                        return@first true
                    }
                    false
                }
            }
        }
        viewModelScope.launch {
            actions.receiveAsFlow().collect { action ->
                when (action) {
                    is SuccessCouponDownloaded -> {
                        state.couponList.value = discountMapper.toCouponList(action.couponList)
                    }
                    is UpdateTab -> {
                        state.currentTab.value = if (action.index == 0) PROMOTIONS else COUPONS
                    }
                }
            }
        }
    }
}

// 给数据类加@Immutable注解，告诉Compose数据是稳定不可变的，优化重组效率
@Immutable
data class CouponOffer(/* 你的原有字段，确保是不可变val类型 */)
@Immutable
data class DiscountOffer(/* 你的原有字段，确保是不可变val类型 */)

2. 优化Tab切换逻辑，保留组件状态 #

不要用when分支直接移除组件，改用可见性控制，切换Tab时组件不会被销毁，只会控制显示隐藏，避免重绘：

@Composable
fun DiscountScreen(viewModel: DiscountViewModel) {
    val couponList = viewModel.state.couponList.value
    val discountList = viewModel.state.discountList.value
    val currentTab = viewModel.state.currentTab.value

    Column {
        TextTabs(viewModel.actions)
        Box(modifier = Modifier.fillMaxSize()) {
            // 两个Tab内容同时存在，仅控制可见性，保留组件状态
            discountsSection(
                discountList,
                viewModel.actions,
                modifier = Modifier.alpha(if (currentTab == PROMOTIONS) 1f else 0f)
                    .zIndex(if (currentTab == PROMOTIONS) 1f else 0f)
            )
            couponSection(
                couponList,
                viewModel.actions,
                modifier = Modifier.alpha(if (currentTab == COUPONS) 1f else 0f)
                    .zIndex(if (currentTab == COUPONS) 1f else 0f)
            )
        }
    }
}

3. 优化列表重组，减少不必要的重绘 #

给列表每个元素加唯一key，避免全量重组：

@Composable
fun couponSection(
    list: List<CouponOffer>?,
    action: Channel<DiscountAction>,
    modifier: Modifier = Modifier
) {
    Column(
        modifier = modifier
            .fillMaxWidth()
            .verticalScroll(rememberScrollState()),
        horizontalAlignment = Alignment.CenterHorizontally,
    ) {
        list?.forEach { offer ->
            // 用offer的唯一id作为key，仅当item数据变化时才重组对应项
            key(offer.id) {
                CouponItem(
                    offer = offer,
                    likeButtonClick = { action.trySend(DiscountAction.LikeCouponOffer(offer)) }
                )
            }
        }
    }
}

4. 避免Fragment重建导致ViewModel销毁 #

如果需要整个App生命周期内仅拉取一次数据，把ViewModel绑定到Activity生命周期，避免Fragment重建时ViewModel被销毁：

class DiscountFragment : Fragment() {
    // 替换成activityViewModels，生命周期和宿主Activity绑定
    private val discountViewModel by activityViewModels<DiscountViewModel>()

    override fun onCreateView(
        inflater: LayoutInflater, container: ViewGroup?,
        savedInstanceState: Bundle?
    ): View {
        return ComposeView(requireContext()).apply {
            // 给ComposeView设置固定id，避免重建时状态丢失
            id = R.id.discount_compose_view
            setContent {
                // 套用你的App主题
                AppTheme {
                    DiscountScreen(viewModel = discountViewModel)
                }
            }
        }
    }
}

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