Searchable-Dropdown-Menu-Jetpack-Compose 使用教程

Searchable-Dropdown-Menu-Jetpack-Compose 使用教程

Searchable-Dropdown-Menu-Jetpack-Compose🎨A Jetpack Compose searchable drop down menu library 项目地址:https://gitcode.com/gh_mirrors/se/Searchable-Dropdown-Menu-Jetpack-Compose

项目介绍

Searchable-Dropdown-Menu-Jetpack-Compose 是一个用于在 Jetpack Compose 中创建可搜索下拉菜单的 Android 库。该库由 Breens Mbaka 开发，旨在为 Jetpack Compose 提供一个开箱即用的可搜索下拉菜单解决方案。

项目快速启动

步骤 1：添加仓库

在你的根 build.gradle 文件中添加 JitPack 仓库：

allprojects {
    repositories {
        maven { url 'https://jitpack.io' }
    }
}

步骤 2：添加依赖

在你的模块级 build.gradle 文件中添加依赖：

dependencies {
    implementation 'com.github.Breens-Mbaka:Searchable-Dropdown-Menu-Jetpack-Compose:0.2.8'
}

示例代码

以下是一个简单的示例，展示如何在 Jetpack Compose 中使用该库：

import android.os.Bundle
import androidx.activity.ComponentActivity
import androidx.activity.compose.setContent
import androidx.compose.material3.*
import androidx.compose.runtime.*
import androidx.compose.ui.tooling.preview.Preview

class MainActivity : ComponentActivity() {
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContent {
            SearchableDropdownMenuExample()
        }
    }
}

@Composable
fun SearchableDropdownMenuExample() {
    var expanded by remember { mutableStateOf(false) }
    var textInput by remember { mutableStateOf("") }
    var selectedItem by remember { mutableStateOf<String?>(null) }

    val items = listOf("Basketball", "Rugby", "Football", "MMA", "Motorsport", "Snooker", "Tennis")

    Column {
        TextField(
            value = textInput,
            onValueChange = { textInput = it },
            label = { Text("Search") },
            trailingIcon = {
                IconButton(onClick = { expanded = true }) {
                    Icon(Icons.Default.ArrowDropDown, contentDescription = null)
                }
            }
        )

        DropdownMenu(
            expanded = expanded,
            onDismissRequest = { expanded = false }
        ) {
            items.forEach { label ->
                DropdownMenuItem(
                    onClick = {
                        selectedItem = label
                        textInput = label
                        expanded = false
                    }
                ) {
                    Text(text = label)
                }
            }
        }

        selectedItem?.let {
            Text("Selected: $it")
        }
    }
}

@Preview(showBackground = true)
@Composable
fun DefaultPreview() {
    SearchableDropdownMenuExample()
}

应用案例和最佳实践

案例 1：选择部门

假设你有一个部门列表，用户可以通过搜索来选择一个部门：

@Composable
fun DepartmentSelector() {
    var expanded by remember { mutableStateOf(false) }
    var textInput by remember { mutableStateOf("") }
    var selectedDepartment by remember { mutableStateOf<String?>(null) }

    val departments = listOf("Sales", "Marketing", "Engineering", "HR", "Finance")

    Column {
        TextField(
            value = textInput,
            onValueChange = { textInput = it },
            label = { Text("Search Department") },
            trailingIcon = {
                IconButton(onClick = { expanded = true }) {
                    Icon(Icons.Default.ArrowDropDown, contentDescription = null)
                }
            }
        )

        DropdownMenu(
            expanded = expanded,
            onDismissRequest = { expanded = false }
        ) {
            departments.filter { it.contains(textInput, ignoreCase = true) }.forEach { label ->
                DropdownMenuItem(
                    onClick = {
                        selectedDepartment = label
                        textInput = label
                        expanded = false
                    }
                ) {
                    Text(text = label)
                }
            }
        }

        selectedDepartment?.let {
            Text("Selected Department: $it")

Searchable-Dropdown-Menu-Jetpack-Compose🎨A Jetpack Compose searchable drop down menu library 项目地址:https://gitcode.com/gh_mirrors/se/Searchable-Dropdown-Menu-Jetpack-Compose