一、SearchBar（搜索栏）
// 输入的内容varquerybyremember{mutableStateOf("")}// 搜索栏是否展开varexpandedbyremember{mutableStateOf(false)}// 输入的内容valsuggestions=listOf("建议 1","建议 2","建议 3")Box(modifier=Modifier.fillMaxSize()){SearchBar(modifier=Modifier.align(Alignment.TopCenter),expanded=expanded,// 点击搜索栏时，系统会调用这个回调，传入新的展开状态（it），这里把它赋值给 expandedonExpandedChange={expanded=it},// 定义输入框inputField={SearchBarDefaults.InputField(query=query,// 输入新内容时，系统会调用这个回调，传入新内容（it），这里把它赋值给 queryonQueryChange={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、演示
varselectedTabbyremember{mutableStateOf(0)}valtabs=listOf("首页","发现","我的")PrimaryTabRow(selectedTabIndex=selectedTab,){tabs.forEachIndexed{index,title->Tab(selected=selectedTab==index,onClick={selectedTab=index},text={Text(title)})}}三、时间选择器
valcontext=LocalContext.currentvalcurrentTime=Calendar.getInstance()valtimePickerState=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("确认")}}valcontext=LocalContext.currentvalcurrentTime=Calendar.getInstance()valtimePickerState=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（工具提示）
- 基本使用
Box(modifier=Modifier.fillMaxSize(),contentAlignment=Alignment.Center){TooltipBox(state=rememberTooltipState(),positionProvider=TooltipDefaults.rememberPlainTooltipPositionProvider(),tooltip={PlainTooltip{Text("收藏此文章")}},){IconButton(onClick={}){Icon(imageVector=Icons.Filled.Favorite,contentDescription="收藏")}}}- 更复杂的富文本提示
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="收藏")}}}
