Android Jetpack Compose - SearchBar（搜索栏）、Tab（标签页）、时间选择器、TooltipBox（工具提示）

一、SearchBar（搜索栏）

kotlin 复制代码

// 输入的内容
var query by remember { mutableStateOf("") }

// 搜索栏是否展开
var expanded by remember { mutableStateOf(false) }

// 输入的内容
val suggestions = listOf("建议 1", "建议 2", "建议 3")

Box(
    modifier = Modifier.fillMaxSize()
) {
    SearchBar(
        modifier = Modifier.align(Alignment.TopCenter),
        expanded = expanded,

        // 点击搜索栏时，系统会调用这个回调，传入新的展开状态（it），这里把它赋值给 expanded
        onExpandedChange = { expanded = it },

        // 定义输入框
        inputField = {
            SearchBarDefaults.InputField(
                query = query,

                // 输入新内容时，系统会调用这个回调，传入新内容（it），这里把它赋值给 query
                onQueryChange = { query = it },

                // 点击键盘上的"搜索"按钮时触发
                onSearch = { expanded = false },
                expanded = expanded,
                onExpandedChange = { expanded = it },
                placeholder = { Text("请输入搜索内容") },

                // leadingIcon：组件左侧 / 前导位置的图标，例如，输入框前面放一个搜索图标
                leadingIcon = { Icon(Icons.Default.Search, contentDescription = null) },

                // trailingIcon：组件右侧 / 尾部位置的图标，例如，输入框后面放一个清空图标，或者密码切换图标
                trailingIcon = {
                    if (expanded && query.isNotEmpty()) {
                        IconButton(
                            onClick = {
                                query = ""
                            }
                        ) {
                            Icon(Icons.Default.Close, contentDescription = null)
                        }
                    }
                })
        }
    ) {
        LazyColumn {
            items(
                count = suggestions.size,
            ) { index ->
                Text(
                    text = suggestions[index],
                    modifier = Modifier
                        .fillMaxWidth()
                        .clickable {
                            query = suggestions[index]
                            expanded = false
                        }
                        .padding(16.dp)
                )
            }
        }
    }
}

二、Tab（标签页）

1、基本介绍

Tab 体系用于实现可切换的页面导航，主要有三个组件：Tab（单个标签页）、PrimaryTabRow（主要标签栏）、SecondaryTabRow（次要标签栏）
Tab 是单个标签页的 UI 定义，不能单独使用，需要放在 PrimaryTabRow 或 SecondaryTabRow 中

2、演示

kotlin 复制代码

var selectedTab by remember { mutableStateOf(0) }
val tabs = listOf("首页", "发现", "我的")

PrimaryTabRow(
    selectedTabIndex = selectedTab,
) {
    tabs.forEachIndexed { index, title ->
        Tab(
            selected = selectedTab == index,
            onClick = { selectedTab = index },
            text = { Text(title) }
        )
    }
}

三、时间选择器

kotlin 复制代码

val context = LocalContext.current

val currentTime = Calendar.getInstance()
val timePickerState = rememberTimePickerState(
    initialHour = currentTime.get(Calendar.HOUR_OF_DAY),
    initialMinute = currentTime.get(Calendar.MINUTE),
    is24Hour = true,
)

Box(
    modifier = Modifier.fillMaxSize()
) {
    TimePicker(
        modifier = Modifier.align(Alignment.TopCenter),
        state = timePickerState,
    )

    Button(
        modifier = Modifier.align(Alignment.BottomCenter),
        onClick = {
            Toast.makeText(
                context,
                "选择的时间为 ${timePickerState.hour}:${timePickerState.minute}",
                Toast.LENGTH_SHORT
            ).show()
        }
    ) {
        Text("确认")
    }
}

kotlin 复制代码

val context = LocalContext.current

val currentTime = Calendar.getInstance()
val timePickerState = rememberTimePickerState(
    initialHour = currentTime.get(Calendar.HOUR_OF_DAY),
    initialMinute = currentTime.get(Calendar.MINUTE),
    is24Hour = true,
)

Box(
    modifier = Modifier.fillMaxSize()
) {
    TimeInput(
        modifier = Modifier.align(Alignment.TopCenter),
        state = timePickerState,
    )

    Button(
        modifier = Modifier.align(Alignment.BottomCenter),
        onClick = {
            Toast.makeText(
                context,
                "选择的时间为 ${timePickerState.hour}:${timePickerState.minute}",
                Toast.LENGTH_SHORT
            ).show()
        }
    ) {
        Text("确认")
    }
}

四、TooltipBox（工具提示）

基本使用

kotlin 复制代码

Box(
    modifier = Modifier.fillMaxSize(),
    contentAlignment = Alignment.Center
) {
    TooltipBox(
        state = rememberTooltipState(),
        positionProvider = TooltipDefaults.rememberPlainTooltipPositionProvider(),
        tooltip = {
            PlainTooltip { Text("收藏此文章") }
        },
    ) {
        IconButton(
            onClick = {}
        ) {
            Icon(
                imageVector = Icons.Filled.Favorite,
                contentDescription = "收藏"
            )
        }
    }
}

更复杂的富文本提示

kotlin 复制代码

Box(
    modifier = Modifier.fillMaxSize(),
    contentAlignment = Alignment.Center
) {
    TooltipBox(
        state = rememberTooltipState(),
        positionProvider = TooltipDefaults.rememberPlainTooltipPositionProvider(),
        tooltip = {
            RichTooltip(
                title = { Text("添加到收藏夹") },
                action = {
                    TextButton(
                        onClick = {}
                    ) {
                        Text("知道了")
                    }
                }
            ) {
                Text("收藏后可在个人中心快速找到")
            }
        },
    ) {
        IconButton(
            onClick = {}
        ) {
            Icon(
                imageVector = Icons.Filled.Favorite,
                contentDescription = "收藏"
            )
        }
    }
}