如何将值发送给子组件，即视图模型值？

Question

这是我的代码。

DrawerCompose

@Composable
fun DrawerCompose(
    modifier: Modifier = Modifier,
    onDestinationClicked: (route: String) -> Unit
) {
    val versionName = BuildConfig.VERSION_NAME

    val empno by remember {
        mutableStateOf("")
    }
    val password by remember {
        mutableStateOf("")
    }

    Column(
        modifier = Modifier
            .background(MaterialTheme.colors.primarySurface)
            .fillMaxSize()
    ) {
        Box(
            modifier = Modifier
                .fillMaxWidth()
        ) {
            Column(
                modifier = Modifier
                    .padding(20.dp)
            ) {
                Text(
                    text = "Title",
                    fontSize = 25.sp,
                    textAlign = TextAlign.Center,
                    fontWeight = FontWeight.Bold,
                    color = Color.White
                )
                Spacer(modifier = Modifier.height(16.dp))
                Text(
                    text = "ID",
                    fontSize = 25.sp,
                    textAlign = TextAlign.Center,
                    fontWeight = FontWeight.Bold,
                    color = Color.White
                )
                OutlinedTextField(
                    value = empno,
                    onValueChange = {

                    },
                    modifier = Modifier
                        .fillMaxWidth(),
                    label = { Text(text = "ID") },
                    singleLine = true,
                    keyboardOptions = KeyboardOptions(
                        keyboardType = KeyboardType.Number,
                        imeAction = ImeAction.Next
                    ),
                    keyboardActions = KeyboardActions(
                        onNext = {

                        }
                    )
                )
                Text(
                    text = "Password",
                    fontSize = 25.sp,
                    textAlign = TextAlign.Center,
                    fontWeight = FontWeight.Bold,
                    color = Color.White
                )
                OutlinedTextField(
                    value = password,
                    onValueChange = {

                    },
                    modifier = Modifier
                        .fillMaxWidth(),
                    label = { Text(text = "Password") },
                    singleLine = true,
                    keyboardOptions = KeyboardOptions(
                        keyboardType = KeyboardType.Number,
                        imeAction = ImeAction.Done
                    ),
                    keyboardActions = KeyboardActions(
                        onDone = {

                        }
                    )
                )
                Text(
                    text = "v $versionName",
                    fontSize = 25.sp,
                    textAlign = TextAlign.Center,
                    fontWeight = FontWeight.Bold,
                    color = Color.White
                )
            }
        }
    }
}

菜单列表屏幕

@OptIn(ExperimentalFoundationApi::class)
@Composable
fun HomeScreen(
    navController: NavController,
    onNavigateToMenuDetailScreen: (String) -> Unit,
    viewModel: MenuListViewModel,
) {
    val context = LocalContext.current

    val menuList = viewModel.menuList.value

    val scope = rememberCoroutineScope()
    val scaffoldState = rememberScaffoldState(
        rememberDrawerState(initialValue = DrawerValue.Closed)
    )

    val loading = viewModel.loading.value
    val dialogQueue = viewModel.dialogQueue

    Scaffold(
        modifier = Modifier.fillMaxSize(),
        topBar = {
            TopAppBarCompose(
                title = "Title",
                navigationIcon = {
                    IconButton(onClick = {
                        scope.launch {
                            scaffoldState.drawerState.open()
                        }
                    }) {
                        Icon(imageVector = Icons.Filled.Menu, contentDescription = "")
                    }
                }
            )
        },
        scaffoldState = scaffoldState,
        drawerContent = {
            DrawerCompose(
                onDestinationClicked = { route ->
                    scope.launch {
                        scaffoldState.drawerState.close()
                    }
                }
            )
        },
        drawerGesturesEnabled = true
    ) {
        MenuList(
            loading = loading,
            menus = menuList,
            onNavigateToSubmenuScreen = onNavigateToMenuDetailScreen
        )
    }
}

MenuListViewModel

@HiltViewModel
class MenuListViewModel @Inject constructor(
    private val restoreMenus: RestoreMenus,
    private val assetsManager: AssetsManager,
    private val savedStateHandle: SavedStateHandle
) : ViewModel() {
    val id: MutableState<String> = mutableStateOf("")
    val password: MutableState<String> = mutableStateOf("")

    fun onChangeEmpNo(id: String) {
        this.id.value = id
    }
    fun onChangePassword(password: String) {
        this.password.value = password
    }
}

如果抽屉中 ID TextField 中的值发生变化，则 viewModel 中的 empno 中的值也会发生变化，如果 ID 中的值发生变化 viewModel改变，抽屉里ID TextField的值改变。

我想知道如何与 Viewmodel 和 Child Compose 沟通。

编辑我解决了将 viewmodel 变量传递给抽屉和 viewmodel 函数

Answer 1

你必须传递回调函数

 @Composable
    fun DrawerCompose(
        modifier: Modifier = Modifier,
        onDestinationClicked: (route: String) -> Unit,
        onIdChange: (value: String) -> Unit,
        onPasswordChange: (value: String) -> Unit,
    ) {
        val versionName = BuildConfig.VERSION_NAME
    
        val empno by remember {
            mutableStateOf("")
        }
        val password by remember {
            mutableStateOf("")
        }
    
        Column(
            modifier = Modifier
                .background(MaterialTheme.colors.primarySurface)
                .fillMaxSize()
        ) {
            Box(
                modifier = Modifier
                    .fillMaxWidth()
            ) {
                Column(
                    modifier = Modifier
                        .padding(20.dp)
                ) {
                    Text(
                        text = "Title",
                        fontSize = 25.sp,
                        textAlign = TextAlign.Center,
                        fontWeight = FontWeight.Bold,
                        color = Color.White
                    )
                    Spacer(modifier = Modifier.height(16.dp))
                    Text(
                        text = "ID",
                        fontSize = 25.sp,
                        textAlign = TextAlign.Center,
                        fontWeight = FontWeight.Bold,
                        color = Color.White
                    )
                    OutlinedTextField(
                        value = empno,
                        onValueChange = onIdChange,
                        modifier = Modifier
                            .fillMaxWidth(),
                        label = { Text(text = "ID") },
                        singleLine = true,
                        keyboardOptions = KeyboardOptions(
                            keyboardType = KeyboardType.Number,
                            imeAction = ImeAction.Next
                        ),
                        keyboardActions = KeyboardActions(
                            onNext = {
    
                            }
                        )
                    )
                    Text(
                        text = "Password",
                        fontSize = 25.sp,
                        textAlign = TextAlign.Center,
                        fontWeight = FontWeight.Bold,
                        color = Color.White
                    )
                    OutlinedTextField(
                        value = password,
                        onValueChange = onPasswordChange,
                        modifier = Modifier
                            .fillMaxWidth(),
                        label = { Text(text = "Password") },
                        singleLine = true,
                        keyboardOptions = KeyboardOptions(
                            keyboardType = KeyboardType.Number,
                            imeAction = ImeAction.Done
                        ),
                        keyboardActions = KeyboardActions(
                            onDone = {
    
                            }
                        )
                    )
                    Text(
                        text = "v $versionName",
                        fontSize = 25.sp,
                        textAlign = TextAlign.Center,
                        fontWeight = FontWeight.Bold,
                        color = Color.White
                    )
                }
            }
        }
    }

然后从主屏幕传递这些功能

@OptIn(ExperimentalFoundationApi::class)
@Composable
fun HomeScreen(
    navController: NavController,
    onNavigateToMenuDetailScreen: (String) -> Unit,
    viewModel: MenuListViewModel,
) {
    val context = LocalContext.current

    val menuList = viewModel.menuList.value

    val scope = rememberCoroutineScope()
    val scaffoldState = rememberScaffoldState(
        rememberDrawerState(initialValue = DrawerValue.Closed)
    )

    val loading = viewModel.loading.value
    val dialogQueue = viewModel.dialogQueue

    Scaffold(
        modifier = Modifier.fillMaxSize(),
        topBar = {
            TopAppBarCompose(
                title = "Title",
                navigationIcon = {
                    IconButton(onClick = {
                        scope.launch {
                            scaffoldState.drawerState.open()
                        }
                    }) {
                        Icon(imageVector = Icons.Filled.Menu, contentDescription = "")
                    }
                }
            )
        },
        scaffoldState = scaffoldState,
        drawerContent = {
            DrawerCompose(
                onDestinationClicked = { route ->
                    scope.launch {
                        scaffoldState.drawerState.close()
                    }
                },
               viewModel.onChangeEmpNo,
               viewModel.onChangePassword
            )
        },
        drawerGesturesEnabled = true
    ) {
        MenuList(
            loading = loading,
            menus = menuList,
            onNavigateToSubmenuScreen = onNavigateToMenuDetailScreen
        )
    }
}

如何将值发送给子组件，即视图模型值？

How send the value to child compose which is viewmodel value?

viewmodel

kotlin

android-jetpack-compose