JetPack Compose-搜索栏将允许我搜索，并且光标将不会出现

Question

我有一个自定义搜索栏将不允许我放置光标并在其中键入文本。在添加ViewModel和State之前，我能够进行TextField的工作，并允许在其中键入文本。

我已经尝试在合并中使用状态变量，而不是将逻辑分开为视图模型，不幸地收到相同的结果。我觉得我缺少但找不到它很简单。

自定义搜索栏：

@Composable
fun SearchBar(
    modifier: Modifier,
    viewModel: ToolSetListViewModel = hiltViewModel()
){

    Surface (
        modifier = modifier
            .fillMaxWidth()
            .height(74.dp)
            .padding(20.dp, 15.dp, 20.dp, 0.dp),
        elevation = 10.dp,
        color = MaterialTheme.colors.primary,
        shape = RoundedCornerShape(25)
            ){

        TextField(
            modifier = modifier
                .fillMaxWidth(),
            value = viewModel.searchText,
            onValueChange = {
                viewModel.onEvent(ToolSetListEvent.OnSearchToolSet(it))
            },
            placeholder = {
                Text(
                    modifier = modifier
                        .alpha(ContentAlpha.medium),
                    text = "Search...",
                    color = White
                )
            },
            textStyle = TextStyle(
                fontSize = MaterialTheme.typography.subtitle1.fontSize,
            ),
            singleLine = true,
            colors = TextFieldDefaults.textFieldColors(
                backgroundColor = Color.Transparent,
                cursorColor = White
            )
        )

    }

屏幕：

@Composable
fun ToolSetListScreen(
    onNavigate: (UiEvent.Navigate) -> Unit,
    viewModel: ToolSetListViewModel = hiltViewModel()
) {
    val toolSets = viewModel.toolSets.collectAsState(initial = emptyList())
    LaunchedEffect(key1 = true) {
        viewModel.uiEvent.collect { event ->
            when(event) {
                is UiEvent.Navigate -> onNavigate(event)
            }
        }
    }
    Scaffold (
        floatingActionButton = {
            FloatingActionButton(onClick = {
                viewModel.onEvent(ToolSetListEvent.OnAddToolSetClick)
            }) {
                Icon(
                    imageVector = Icons.Default.Add,
                    contentDescription = "Add")
            }
        }
            ) {
        SearchBar(
            modifier = Modifier,
            )
        LazyColumn(
            modifier = Modifier.fillMaxSize()
                .padding(0.dp, 20.dp)
        ) {
            items(toolSets.value) { toolset ->
                ToolSetItem(
                    toolSet = toolset,
                    onEvent = viewModel::onEvent,
                    modifier = Modifier
                        .fillMaxWidth()
                        .padding(16.dp)
                        .clickable {
                            viewModel.onEvent(ToolSetListEvent.OnToolSetClick(toolset))
                        }
                )
            }
        }
    }
}

ViewModel：

@HiltViewModel
class ToolSetListViewModel @Inject constructor(
    private val repository: ToolSetRepository
): ViewModel() {

    val toolSets = repository.getAllToolSets()
    private val _uiEvent =  Channel<UiEvent>()
    val uiEvent = _uiEvent.receiveAsFlow()

    var searchText by mutableStateOf("")
        private set

    fun onEvent(event: ToolSetListEvent) {
        when(event) {
            is ToolSetListEvent.OnToolSetClick -> {
                sendUiEvent(UiEvent.Navigate(Routes.ADD_EDIT_TOOL_SET + "?PONumber=${event.toolSet.PONumber}"))
            }
            is ToolSetListEvent.OnDeleteToolSetClick -> {
                viewModelScope.launch {
                    repository.deleteToolSet(event.toolset)
                }
            }
            is ToolSetListEvent.OnAddToolSetClick -> {
                sendUiEvent(UiEvent.Navigate(Routes.ADD_EDIT_TOOL_SET))
            }
            is ToolSetListEvent.OnSearchToolSet -> {
                viewModelScope.launch {
                    if (event.searchText.isNotBlank()) {
                        searchText = event.searchText
                        repository.getToolSetByPO(event.searchText)
                    }
                }
            }

        }
    }

    private fun sendUiEvent(event: UiEvent) {
        viewModelScope.launch {
            _uiEvent.send(event)
        }
    }

MainActivity：

@AndroidEntryPoint
class MainActivity : ComponentActivity() {

    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContent {
            PunchesManagerTheme {
                val navController = rememberNavController()
                Scaffold (
                    content = {
                        Navigation(navController)
                              },
                    bottomBar = { BottomNavigationBar(navController = navController) },
                )
            }
        }
    }
}

@Composable
fun BottomNavigationBar(navController: NavHostController) {
    BottomNavigation {
      val backStackEntry by navController.currentBackStackEntryAsState()
      val currentRoute = backStackEntry?.destination?.route


        NavBarItems.bottomNavItem.forEach { navItem ->
            BottomNavigationItem(selected = currentRoute == navItem.route, onClick = {
                navController.navigate(navItem.route) {
                    popUpTo(navController.graph.findStartDestination().id) {
                        saveState = false
                    }
                    launchSingleTop = true
                    restoreState = true
                }
            },
                icon = {
                    Icon(imageVector = navItem.icon,
                    contentDescription = navItem.name)
                },
                label = {
                    Text(text = navItem.name)
                },
            )
        }
    }
}

关于问题的任何建议？

Answer 1

我想我找到了修复程序！

我调整了我的ToolSetListsCreen中粘合的布局：

 Scaffold (
        content = {
            SearchBar(
                modifier = Modifier,
            )
            LazyColumn(
                modifier = Modifier.fillMaxSize()
                    .padding(0.dp, 75.dp)
            ) {
                items(toolSets.value) { toolset ->
                    ToolSetItem(
                        toolSet = toolset,
                        onEvent = viewModel::onEvent,
                        modifier = Modifier
                            .fillMaxWidth()
                            .padding(16.dp)
                            .clickable {
                                viewModel.onEvent(ToolSetListEvent.OnToolSetClick(toolset))
                            }
                    )
                }
            }
        },
        floatingActionButton = {
            FloatingActionButton(onClick = {
                viewModel.onEvent(ToolSetListEvent.OnAddToolSetClick)
            }) {
                Icon(
                    imageVector = Icons.Default.Add,
                    contentDescription = "Add")
            }
        }
            )
}

这似乎很有用。