每次在 lazy column jetpack compose 上重新組合

Question

當它們在屏幕內或屏幕外時，我需要幫助在我的惰性列的每一行中進行完全重組。 性能一點都不好。 它是一個簡單的惰性列表，在惰性行上分頁首先是我的視圖模型上的尋呼機

val result = Pager(
        PagingConfig(pageSize = PAGE_SIZE, enablePlaceholders = ENABLE_PLACEHOLDERS)
    ) {
        repository.getRooms()
    }.flow
        .cachedIn(viewModelScope)

現在我的片段 onCreatedView 方法：

    return ComposeView(requireContext()).apply {
                setContent {
                    CurrentTheme(provideCurrentTheme()) {
                        RoomsCFragmentScreen(
                            ...
                            pager = viewModel.result
                            ...
                        )
                    }
    
                }
            }

現在在我的屏幕視圖上：

Scaffold()
 { paddingValues ->
        RoomsList(
            modifier = Modifier
                .fillMaxSize()
                .padding(bottom = paddingValues.calculateBottomPadding()),
            pager = pager,
            ...
        )
    }

現在是房間列表：

val roomListItems: LazyPagingItems<RoomItemView> = pager.collectAsLazyPagingItems()

    LazyColumn(
        modifier = modifier,
        state = listState,
    ) {
        items(items = roomListItems, key = { it.room!!.id }) { item ->
            item?.let {
                Surface() {
                    RoomItem(
                        roomItemView = it,
                        ...
                    )
                }
            }
        }
    }

現在我的 RoomItem 上的所有組件：

@Composable
fun RoomItem(
    dateFormatter: DateFormatter.Formatter,
    userId: String,
    roomItemView: RoomItemView,
    loadDraft: (roomId: String) -> String
) {
    Column {
        Row(
            modifier = Modifier
                .fillMaxWidth(),
            verticalAlignment = Alignment.CenterVertically,
            horizontalArrangement = Arrangement.SpaceEvenly,
        ) {
            Avatar(roomItemView = roomItemView)

            CenterContent(
                roomItemView = roomItemView,
                dateFormatter = dateFormatter,
                userId = userId,
                loadDraft = loadDraft
            )
        }

        Divider(
            modifier = Modifier
                .padding(top = 8.dp, end = 12.dp, start = 85.dp),
            color = MaterialTheme.colors.secondary
        )
    }
}

@Composable
fun CenterContent(
    roomItemView: RoomItemView,
    dateFormatter: DateFormatter.Formatter,
    userId: String,
    loadDraft: (roomId: String) -> String
) {
    Column(
        modifier = Modifier
            .fillMaxWidth(),
    ) {
        CenterContentTop(roomItemView, dateFormatter)

        CenterContentBottom(roomItemView, userId, loadDraft = loadDraft)
    }
}

@Composable
fun CenterContentTop(roomItemView: RoomItemView, dateFormatter: DateFormatter.Formatter) {
    Box(modifier = Modifier.padding(end = 12.dp, bottom = 5.dp)) {
        RoomItemTitle(
            roomItemView = roomItemView,
            dateFormatter = dateFormatter
        )
    }
}

@Composable
fun CenterContentBottom(
    roomItemView: RoomItemView,
    userId: String,
    loadDraft: (roomId: String) -> String
) {
    Box(modifier = Modifier.padding(end = 12.dp)) {
        LastMessage(roomItemView = roomItemView, userId = userId, loadDraft = loadDraft)
    }
}

Answer 1

創建一個可觀察且可以快照的 MutableList 實例。

var yourMutableList = mutableStateListOf<YourList>()

LazyColumn {
    items(yourMutableList) {
    }
}