Android Jetpack Compose - 修饰符顺序的影响、Divider（分隔线）、DropdownMenu（下拉菜单）、NavigationBar（导航栏）

一、修饰符顺序的影响红色背景区域200 - 50 * 2 100 * 100 dp点击区域200 - 50 * 2 100 * 100 dpvalcontextLocalContext.currentBox(Modifier.size(200.dp).padding(50.dp).background(Color.Red).clickable{Toast.makeText(context,触发了点击事件,Toast.LENGTH_SHORT).show()}){}红色背景区域200 * 200 dp点击区域200 * 200 dpvalcontextLocalContext.currentBox(Modifier.size(200.dp).background(Color.Red).clickable{Toast.makeText(context,触发了点击事件,Toast.LENGTH_SHORT).show()}.padding(50.dp)){}二、Divider分隔线1、HorizontalDividerColumn(modifierModifier.fillMaxSize(),horizontalAlignmentAlignment.CenterHorizontally,verticalArrangementArrangement.spacedBy(8.dp)){Text(test content 1)HorizontalDivider(thickness2.dp)Text(test content 2)}2、VerticalDividerRow(modifierModifier.fillMaxSize(),verticalAlignmentAlignment.CenterVertically,horizontalArrangementArrangement.spacedBy(8.dp)){Text(test content 1)VerticalDivider(thickness2.dp)Text(test content 2)}三、DropdownMenu下拉菜单使用 DropdownMenu、DropdownMenuItem、IconButton 组件实现自定义下拉菜单DropdownMenu 和 DropdownMenuItem 组件用于显示菜单项IconButton 是显示或隐藏下拉菜单的触发器varexpandedbyremember{mutableStateOf(false)}Box(modifierModifier.padding(16.dp)){IconButton(onClick{expanded!expanded}){Icon(Icons.Default.MoreVert,contentDescriptionMoreVert)}DropdownMenu(expandedexpanded,onDismissRequest{expandedfalse}){DropdownMenuItem(text{Text(选项 1)},onClick{})DropdownMenuItem(text{Text(选项 2)},onClick{})}}DropdownMenu 默认可滚动var expanded by remember { mutableStateOf(false) } val menuItemData List(100) { 选项 ${it 1} } Box( modifier Modifier.padding(16.dp) ) { IconButton( onClick { expanded !expanded } ) { Icon(Icons.Default.MoreVert, contentDescription MoreVert) } DropdownMenu( expanded expanded, onDismissRequest { expanded false } ) { menuItemData.forEach { DropdownMenuItem( text { Text(it) }, onClick { } ) } } }四、NavigationBar导航栏NavigationBar{NavigationBarItem(icon{Icon(Icons.Filled.Home,contentDescriptionnull)},label{Text(Home)},selectedtrue,onClick{})NavigationBarItem(icon{Icon(Icons.Filled.Call,contentDescriptionnull)},label{Text(Call)},selectedfalse,onClick{})NavigationBarItem(icon{Icon(Icons.Filled.Email,contentDescriptionnull)},label{Text(Email)},selectedfalse,onClick{})NavigationBarItem(icon{Icon(Icons.Filled.Person,contentDescriptionnull)},label{Text(Person)},selectedfalse,onClick{})}varselectedItemIndexbyremember{mutableStateOf(0)}Column(modifierModifier.fillMaxSize()){Column(modifierModifier.fillMaxWidth().weight(1f),verticalArrangementArrangement.Center,horizontalAlignmentAlignment.CenterHorizontally){Text(test content)}NavigationBar{NavigationBarItem(icon{Icon(Icons.Filled.Home,contentDescriptionnull)},label{Text(Home)},selectedselectedItemIndex0,onClick{selectedItemIndex0})NavigationBarItem(icon{Icon(Icons.Filled.Call,contentDescriptionnull)},label{Text(Call)},selectedselectedItemIndex1,onClick{selectedItemIndex1})NavigationBarItem(icon{Icon(Icons.Filled.Email,contentDescriptionnull)},label{Text(Email)},selectedselectedItemIndex2,onClick{selectedItemIndex2})NavigationBarItem(icon{Icon(Icons.Filled.Person,contentDescriptionnull)},label{Text(Person)},selectedselectedItemIndex3,onClick{selectedItemIndex3})}}varselectedItemIndexbyremember{mutableStateOf(0)}Scaffold(topBar{TopAppBar(colorstopAppBarColors(containerColorMaterialTheme.colorScheme.primaryContainer,titleContentColorMaterialTheme.colorScheme.primary,),title{Text(顶部应用栏)})},bottomBar{NavigationBar{NavigationBarItem(icon{Icon(Icons.Filled.Home,contentDescriptionnull)},label{Text(Home)},selectedselectedItemIndex0,onClick{selectedItemIndex0})NavigationBarItem(icon{Icon(Icons.Filled.Call,contentDescriptionnull)},label{Text(Call)},selectedselectedItemIndex1,onClick{selectedItemIndex1})NavigationBarItem(icon{Icon(Icons.Filled.Email,contentDescriptionnull)},label{Text(Email)},selectedselectedItemIndex2,onClick{selectedItemIndex2})NavigationBarItem(icon{Icon(Icons.Filled.Person,contentDescriptionnull)},label{Text(Person)},selectedselectedItemIndex3,onClick{selectedItemIndex3})}}){innerPadding-Column(modifierModifier.fillMaxSize().padding(innerPadding),verticalArrangementArrangement.Center,horizontalAlignmentAlignment.CenterHorizontally){Text(内容区域)}}