이 페이지는 Cloud Translation API를 통해 번역되었습니다.

입력하는 동안 목록 필터링
컬렉션을 사용해 정리하기 내 환경설정을 기준으로 콘텐츠를 저장하고 분류하세요.

이 가이드에서는 Jetpack Compose의 텍스트 입력을 기반으로 문자열 목록을 필터링하는 방법을 설명합니다. 이 접근 방식을 사용하면 사용자 검색어를 기반으로 목록을 동적으로 업데이트할 수 있습니다.

버전 호환성

이 구현은 Compose 버전 1.2.0 이상에서 작동합니다.

종속 항목

build.gradle에 다음 종속 항목을 포함합니다.

다음 스니펫을 함께 사용하면 사용자가 입력할 때 실시간으로 업데이트되는 목록이 생성됩니다. 이 예에서는 ViewModel를 사용하여 목록 데이터와 필터링 로직을 보관하고 FilterTextView() 함수는 필터 텍스트가 변경될 때마다 자동으로 업데이트되는 UI를 만듭니다.

class FilterTextViewModel : ViewModel() {
    private val items = listOf(
        "Cupcake",
        "Donut",
        "Eclair",
        "Froyo",
        "Gingerbread",
        "Honeycomb",
        "Ice Cream Sandwich"
    )

    private val _filteredItems = MutableStateFlow(items)
    var filteredItems: StateFlow<List<String>> = _filteredItems

    fun filterText(input: String) {
        // This filter returns the full items list when input is an empty string.
        _filteredItems.value = items.filter { it.contains(input, ignoreCase = true) }
    }
}FilterText.kt

코드 관련 핵심 사항

ViewModel 코드는 필터링 작업을 컴포저블에서 추상화합니다.
ViewModel에는 원본 목록과 필터링된 목록이 모두 포함됩니다. 항목 목록과 필터링된 항목을 보유할 MutableStateFlow를 정의합니다.
filterText 함수는 제공된 입력 문자열을 기반으로 목록을 필터링하고 filteredItems 상태를 업데이트하며, 이 상태는 UI로 다시 전달됩니다.

@Composable
fun FilterTextView(modifier: Modifier = Modifier, viewModel: FilterTextViewModel = viewModel()) {
    val filteredItems by viewModel.filteredItems.collectAsStateWithLifecycle()
    var text by rememberSaveable { mutableStateOf("") }

    Column(
        modifier = Modifier
            .fillMaxSize()
            .padding(all = 10.dp)
    ) {
        OutlinedTextField(
            value = text,
            onValueChange = {
                text = it
                viewModel.filterText(text)
            },
            label = { Text("Filter Text") },
            modifier = Modifier.fillMaxWidth()
        )

        LazyColumn {
            items(
                count = filteredItems.size,
                key = { index -> filteredItems[index] }
            ) {
                ListItem(
                    headlineContent = { Text(filteredItems[it]) },
                    modifier = Modifier
                        .fillParentMaxWidth()
                        .padding(10.dp)
                )
            }
        }
    }
}FilterText.kt

코드 관련 핵심 사항

사용자 입력에 OutlinedTextField를 표시하고 필터링된 목록 항목을 표시하기 위해 LazyColumn를 표시합니다.
ViewModel에서 filteredItems 상태 흐름을 수집하고 수명 주기를 인식하는 State 객체로 변환합니다.
- collectAsStateWithLifecycle는 StateFlow에서 최신 값을 수집하고 값이 변경되면 UI를 다시 작성합니다.
text by rememberSaveable { mutableStateOf("") }는 필터 텍스트 필드에 입력된 현재 텍스트를 보유할 상태 변수 text를 만듭니다.
- rememberSaveable은 구성 변경 간에 텍스트 값을 유지합니다.
- by 키워드는 텍스트의 값을 MutableState 객체의 값 속성에 위임합니다.
OutlinedTextField는 텍스트 변경사항이 onValueChange 콜백을 트리거할 때 뷰 모델에서 filterText 함수를 호출합니다.