我有一个带顶杆的脚手架。
topBar应该显示一个项目列表（设备列表）。因此我为它创建了一个视图模型。
我也有一个组合，让您添加一个项目到该列表（添加一个新的设备到列表）。我希望topBar显示更新的列表。
我使用相同的视图模型获取列表并向列表中添加一个项。

问题是调用了addDevice方法，但每次都好像在重新创建列表，所以Device并没有真正保存在列表中。

这是视图模型：

class ConnectableTopAppBarViewModel : ViewModel() {
    private val _uiState = MutableStateFlow(ConnectableTopAppBarUiState())
    val uiState: StateFlow<ConnectableTopAppBarUiState> = _uiState.asStateFlow()

    fun addDevice() {
        _uiState.update { currentState ->
            val updatedDevices = ArrayList<Device>()
            for (device in currentState.devices) {
                device.isSelected = false
                updatedDevices.add(device)
            }
            updatedDevices.add(Device("Device ${updatedDevices.size}", "123.158.14.92", true))
            Log.d("TAG", "total: ${updatedDevices.size}")
            currentState.copy(
                selectedDeviceIndex = updatedDevices.size - 1,
                devices = updatedDevices
            )
        }
    }

    fun selectDevice(deviceIndex: Int) {
        _uiState.update { currentState ->
            var i = 0
            val updatedDevices = ArrayList<Device>()
            for (device in currentState.devices) {
                device.isSelected = i == deviceIndex
                updatedDevices.add(device)
                i += 1
            }
            currentState.copy(
                selectedDeviceIndex = deviceIndex,
                devices = updatedDevices
            )
        }
        Log.d("TAG", uiState.value.devices.joinToString(" "))
    }
}

ConnectableTopAppBarUiState：

data class ConnectableTopAppBarUiState(
    val selectedDeviceIndex: Int = 0,
    val devices: List<Device> = mutableListOf()
)

这是显示设备并导航到屏幕的顶部栏，我们可以在其中添加设备：

@Composable
fun ConnectableTopAppBar(
    appState: CustomAppState,
    modifier: Modifier = Modifier,
    connectableTopAppBarViewModel: ConnectableTopAppBarViewModel = ConnectableTopAppBarViewModel()
) {
    val deviceUiState by connectableTopAppBarViewModel.uiState.collectAsState()
    Row(
        modifier = modifier
            .fillMaxWidth()
    ) {
        LazyRow(
            modifier = modifier.weight(1f),
            contentPadding = PaddingValues(horizontal = 16.dp),
            horizontalArrangement = Arrangement.spacedBy(8.dp)
        ) {
            
            // Here I display the devices
            itemsIndexed(deviceUiState.devices) { index, device ->
                    CustomButton(
                        onClick = { connectableTopAppBarViewModel.selectDevice(index) },
                        text = {
                            Text(
                                text = device.name,
                                style = MaterialTheme.typography.labelLarge
                            )
                        },
                        leadingIcon = {
                            Icon(
                                painter = painterResource(id = R.drawable.ic_wifi),
                                contentDescription = null
                            )
                        },
                    )
            }

            // Here I navigate to the screen where we can add more devices
            item {
                CustomOutlinedButton(
                    onClick = {
                        appState.navController.navigate(SubLevelDestination.CONNECT.route)
                    },
                    text = {
                        Text(
                            text = "Add Device",
                            style = MaterialTheme.typography.labelLarge
                        )
                    },
                    leadingIcon = {
                        Icon(imageVector = AppIcons.Add, contentDescription = null)
                    },
                )
            }
        }
    }
}

这是我添加Device的compose：

@Composable
fun ConnectScreen(
    upPress: () -> Unit,
    modifier: Modifier = Modifier,
    connectableTopAppBarViewModel: ConnectableTopAppBarViewModel = ConnectableTopAppBarViewModel(),
) {
    Column(
        modifier = modifier
    ) {
        ChooseRemoteSectionTitle("Select Device To Add")
        LazyColumn(
            modifier = modifier,
            contentPadding = PaddingValues(horizontal = 16.dp),
            verticalArrangement = Arrangement.spacedBy(8.dp)
        ) {
            item {
                ConnectableDeviceItem(
                    addDevice = connectableTopAppBarViewModel::addDevice,
                    modifier = modifier,
                    upPress = upPress,
                    name = "Device Example 1"
                )
            }

            item {
                ConnectableDeviceItem(
                    addDevice = connectableTopAppBarViewModel::addDevice,
                    modifier = modifier,
                    upPress = upPress,
                    name = "Device Example 2"
                )
            }
        }
    }
}

@Composable
@OptIn(ExperimentalMaterial3Api::class)
private fun ConnectableDeviceItem(
    addDevice: () -> Unit,
    modifier: Modifier,
    upPress: () -> Unit,
    name: String
) {
    Card(
        modifier = modifier.fillMaxWidth(),
        onClick = {
            addDevice()
            upPress()
        }
    ) {
        Box(
            modifier = modifier
                .fillMaxWidth()
                .background(MaterialTheme.colorScheme.surface)
                .padding(5.dp),
            contentAlignment = Alignment.Center
        ) {
            Text(text = name)
        }
    }
}

编辑：

我现在创建了视图模型，并将其传递给相关的可组合对象，因此它们都使用视图模型的相同示例：

@Composable
fun RemoteControlApp() {
    val connectableTopAppBarViewModel = ConnectableTopAppBarViewModel()
    ....
ConnectableTopAppBar(
                    viewModel = connectableTopAppBarViewModel,
                    appState = appState
                )
....
remoteControlNavGraph(
                connectableTopAppBarViewModel = connectableTopAppBarViewModel,
                upPress = appState::upPress,
                paddingValues = paddingValues
            )
}

这是一个好方法吗？