android - 模型中列表的值已更新，但未反映可组合函数(value of list in model is updated but it does not reflect on composable function)

Question

I am creating demo project for using jetpack compose with mvvm , i have created model class that holds the list of users.. those users are displayed in list and there is a button at top which adds new user to the list when clicked... when user clicks on the button an the lambda updates activity about it and activity calls viewmodel which adds data to list and updates back to activity using livedata, now after the model receives the new data it does not update composable function about it and hence ui of list is not updated.. here is the code

(我正在创建将jetpack与mvvm结合使用的演示项目，我创建了包含用户列表的模型类。这些用户显示在列表中，并且顶部有一个按钮，单击该按钮会将新用户添加到列表中。当用户单击按钮时，lambda会更新有关它的活动，然后活动会调用viewmodel，它会使用livedata将数据添加到列表中并更新回活动，现在，在模型接收到新数据之后，它不会更新有关它的可组合函数，因此不会更新ui列表未更新..这是代码)

@Model
data class UsersState(var users: ArrayList<UserModel> = ArrayList())

Activity

(活动)

class MainActivity : AppCompatActivity() {
    private val usersState: UsersState = UsersState()
    private val usersListViewModel: UsersListViewModel = UsersListViewModel()

    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)

        usersListViewModel.getUsers().observe(this, Observer {
            usersState.users.addAll(it)
        })
        usersListViewModel.addUsers()
        setContent {
            UsersListUi.addList(
                usersState,
                onAddClick = { usersListViewModel.addNewUser() },
                onRemoveClick = { usersListViewModel.removeFirstUser() })
        }
    }

}

ViewModel

(视图模型)

class UsersListViewModel {

    private val usersList: MutableLiveData<ArrayList<UserModel>> by lazy {
        MutableLiveData<ArrayList<UserModel>>()
    }
    private val users: ArrayList<UserModel> = ArrayList()
    fun addUsers() {
        users.add(UserModel("jon", "doe", "android developer"))
        users.add(UserModel("john", "doe", "flutter developer"))
        users.add(UserModel("jonn", "dove", "ios developer"))
        usersList.value = users
    }

    fun getUsers(): MutableLiveData<ArrayList<UserModel>> {
        return usersList
    }

    fun addNewUser() {
        users.add(UserModel("jony", "dove", "ruby developer"))
        usersList.value = users
    }

    fun removeFirstUser() {
        if (!users.isNullOrEmpty()) {
            users.removeAt(0)
            usersList.value = users
        }
    }
}

composable function

(可组合功能)

@Composable
    fun addList(state: UsersState, onAddClick: () -> Unit, onRemoveClick: () -> Unit) {
        MaterialTheme {
            FlexColumn {
                inflexible {
                    // Item height will be equal content height
                    TopAppBar( // App Bar with title
                        title = { Text("Users") }
                    )
                    FlexRow() {
                        expanded(flex = 1f) {
                            Button(
                                text = "add",
                                onClick = { onAddClick.invoke() },
                                style = OutlinedButtonStyle()
                            )

                        }
                        expanded(flex = 1f) {
                            Button(
                                text = "sub",
                                onClick = { onRemoveClick.invoke() },
                                style = OutlinedButtonStyle()
                            )
                        }
                    }
                    VerticalScroller {
                        Column {
                            state.users.forEach {
                                Column {
                                    Row {
                                        Text(text = it.userName)
                                        WidthSpacer(width = 2.dp)
                                        Text(text = it.userSurName)
                                    }
                                    Text(text = it.userJob)

                                }
                                Divider(color = Color.Black, height = 1.dp)

                            }
                        }
                    }
                }

            }

        }
    }

the whole source code is available here

(完整的源代码在这里)

I am not sure if i am doing something wrong or is it because jetpack compose is still in developers preview , so would appreciate any help.. thank you

(我不确定我是在做错什么，还是因为jetpack compose仍在开发人员预览中，所以将不胜感激..谢谢)

  ask by Kushal Dave translate from so

Answer 1

Your model is not observed so changes won't be reflected.

(未观察到您的模型，因此更改不会得到反映。)

In this article under the section 'Putting it all together' the List is added.

(在本文 “全部放在一起”部分下，添加了列表。)

val list = +memo{ calculation: () -> T}

Example for your list:

(列表示例：)

@Composable
fun test(supplier: UserState) {
   val list = +memo{supplier.users}
   ListConsumer(list){
       /* Do other stuff for your usecase */
   }
}