如何重构简单的 LazyColumn 列表示例

Question

我是 Jetpack Compose 的新手，我正在尝试了解如何在用户单击 FloatingActionButton 时重组 LazyColumn 列表。

如图所示，我有一个基本的 Scaffold 布局，其中包含用于内容的 LazyColumn。底部是一个 FloatingActionButton。我希望能够单击该 FloatingActionButton，将“Molly”添加到我的姓名列表中，让该应用重组我的列表，并显示包括 Molly 在内的完整列表。代码如下图。

这是我的代码：

package com.learning.lazylistexample

import android.os.Bundle
import androidx.activity.ComponentActivity
import androidx.activity.compose.setContent
import androidx.compose.foundation.layout.*
import androidx.compose.foundation.lazy.LazyColumn
import androidx.compose.foundation.lazy.items
import androidx.compose.material.*
import androidx.compose.runtime.Composable
import androidx.compose.runtime.rememberCoroutineScope
import androidx.compose.ui.Modifier
import androidx.compose.ui.graphics.Color
import com.learning.lazylistexample.ui.theme.LazyListExampleTheme
import kotlinx.coroutines.launch

data class ListItem(val name: String)

private var listItems: MutableList<ListItem> = mutableListOf(
    ListItem("Al"),
    ListItem("Barb"),
    ListItem("Cheryl"),
    ListItem("Dave"),
    ListItem("Ed"),
    ListItem("Frank"),
    ListItem("Gloria"),
    ListItem("Henry"),
    ListItem("Ingrid"),
    ListItem("Jack"),
    ListItem("Kayla"),
    ListItem("Larry")
)

class MainActivity : ComponentActivity() {
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContent {
            LazyListExampleTheme {
                // A surface container using the 'background' color from the theme
                Surface(
                    modifier = Modifier.fillMaxSize(),
                    color = MaterialTheme.colors.background
                ) {
                    myApp()
                }
            }
        }
    }
}

@Composable
fun myApp() {

    val scaffoldState = rememberScaffoldState(rememberDrawerState(DrawerValue.Closed))

    val coroutineScope = rememberCoroutineScope()

    Scaffold(
        scaffoldState = scaffoldState,
        topBar = { TopBar() },
        bottomBar = { BottomBar() },
        content = { DisplayList(itemsList = listItems) },
        floatingActionButton = {
            FloatingActionButton(

                onClick = {
                    // When clicked open Snackbar
                    coroutineScope.launch {
                        when (scaffoldState.snackbarHostState.showSnackbar(
                            // Message In the snack bar
                            message = "Snack Bar",
                            actionLabel = "Dismiss"
                        )) {
                            SnackbarResult.Dismissed -> {
                                // do something when snack bar is dismissed
                            }

                            SnackbarResult.ActionPerformed -> {
                                // do something when snack bar is activated
                                // ****** UPDATE LIST *******
                                val newListItem = ListItem(name = "Molly")
                                listItems.add(newListItem)
                                // ****** HOW TO RECOMPOSE LAZYCOLUMN? ******
                            }
                        }
                    }
                }) {
                // Text inside FloatingActionButton
                Text(text = "Add Molly")
            }
        }

    )

}

@Composable
fun TopBar() {
    TopAppBar(
        title = { Text(text = "Lazy List Example", color = Color.White) }
    )
}

@Composable
fun BottomBar() {
    BottomAppBar() {
        Text(text = "", color = Color.White)
    }
}

@Composable
fun DisplayList(itemsList: List<ListItem>) {
    LazyColumn(modifier = Modifier.fillMaxHeight()) {
        items(items = itemsList, itemContent = { item ->
            Text(text = item.name)
        } )
    }
}

我知道这与状态有关，但我不知道从哪里开始。谁能帮我解决这个问题？

谢谢！

Answer 1

改变

private var listItems: MutableList<ListItem> = mutableListOf(
    ListItem("Al"),
    ListItem("Barb"),
    ListItem("Cheryl"),
    ListItem("Dave"),
    ListItem("Ed"),
    ListItem("Frank"),
    ListItem("Gloria"),
    ListItem("Henry"),
    ListItem("Ingrid"),
    ListItem("Jack"),
    ListItem("Kayla"),
    ListItem("Larry")
)

到

val listItems = remember { mutableStateListOf(
     ListItem("Al"),
        ListItem("Barb"),
        ListItem("Cheryl"),
        ListItem("Dave"),
        ListItem("Ed"),
        ListItem("Frank"),
        ListItem("Gloria"),
        ListItem("Henry"),
        ListItem("Ingrid"),
        ListItem("Jack"),
        ListItem("Kayla"),
        ListItem("Larry")
) }

并且您将拥有一个 SnapshotStateList，一个 MutableList 的实例，它是可观察的并且可以是快照，当您添加或删除任何项目时它会触发重组。

如何重构简单的 LazyColumn 列表示例

How to Recompose Simple LazyColumn List Example

android-jetpack-compose

lazycolumn

这是我的代码：