当前位置：首页 > news >正文

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

news 2026/8/3 9:55:45

一、修饰符顺序的影响

红色背景区域：200 - 50 * 2 = 100 * 100 dp，点击区域：200 - 50 * 2 = 100 * 100 dp

valcontext=LocalContext.currentBox(Modifier.size(200.dp).padding(50.dp).background(Color.Red).clickable{Toast.makeText(context,"触发了点击事件",Toast.LENGTH_SHORT).show()}){}

红色背景区域：200 * 200 dp，点击区域：200 * 200 dp

valcontext=LocalContext.currentBox(Modifier.size(200.dp).background(Color.Red).clickable{Toast.makeText(context,"触发了点击事件",Toast.LENGTH_SHORT).show()}.padding(50.dp)){}

二、Divider（分隔线）

1、HorizontalDivider

Column(modifier=Modifier.fillMaxSize(),horizontalAlignment=Alignment.CenterHorizontally,verticalArrangement=Arrangement.spacedBy(8.dp)){Text("test content 1")HorizontalDivider(thickness=2.dp)Text("test content 2")}

2、VerticalDivider

Row(modifier=Modifier.fillMaxSize(),verticalAlignment=Alignment.CenterVertically,horizontalArrangement=Arrangement.spacedBy(8.dp)){Text("test content 1")VerticalDivider(thickness=2.dp)Text("test content 2")}

三、DropdownMenu（下拉菜单）

使用 DropdownMenu、DropdownMenuItem、IconButton 组件实现自定义下拉菜单
DropdownMenu 和 DropdownMenuItem 组件用于显示菜单项
IconButton 是显示或隐藏下拉菜单的触发器

varexpandedbyremember{mutableStateOf(false)}Box(modifier=Modifier.padding(16.dp)){IconButton(onClick={expanded=!expanded}){Icon(Icons.Default.MoreVert,contentDescription="MoreVert")}DropdownMenu(expanded=expanded,onDismissRequest={expanded=false}){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,contentDescription=null)},label={Text("Home")},selected=true,onClick={})NavigationBarItem(icon={Icon(Icons.Filled.Call,contentDescription=null)},label={Text("Call")},selected=false,onClick={})NavigationBarItem(icon={Icon(Icons.Filled.Email,contentDescription=null)},label={Text("Email")},selected=false,onClick={})NavigationBarItem(icon={Icon(Icons.Filled.Person,contentDescription=null)},label={Text("Person")},selected=false,onClick={})}

varselectedItemIndexbyremember{mutableStateOf(0)}Column(modifier=Modifier.fillMaxSize()){Column(modifier=Modifier.fillMaxWidth().weight(1f),verticalArrangement=Arrangement.Center,horizontalAlignment=Alignment.CenterHorizontally){Text("test content")}NavigationBar{NavigationBarItem(icon={Icon(Icons.Filled.Home,contentDescription=null)},label={Text("Home")},selected=selectedItemIndex==0,onClick={selectedItemIndex=0})NavigationBarItem(icon={Icon(Icons.Filled.Call,contentDescription=null)},label={Text("Call")},selected=selectedItemIndex==1,onClick={selectedItemIndex=1})NavigationBarItem(icon={Icon(Icons.Filled.Email,contentDescription=null)},label={Text("Email")},selected=selectedItemIndex==2,onClick={selectedItemIndex=2})NavigationBarItem(icon={Icon(Icons.Filled.Person,contentDescription=null)},label={Text("Person")},selected=selectedItemIndex==3,onClick={selectedItemIndex=3})}}

varselectedItemIndexbyremember{mutableStateOf(0)}Scaffold(topBar={TopAppBar(colors=topAppBarColors(containerColor=MaterialTheme.colorScheme.primaryContainer,titleContentColor=MaterialTheme.colorScheme.primary,),title={Text("顶部应用栏")})},bottomBar={NavigationBar{NavigationBarItem(icon={Icon(Icons.Filled.Home,contentDescription=null)},label={Text("Home")},selected=selectedItemIndex==0,onClick={selectedItemIndex=0})NavigationBarItem(icon={Icon(Icons.Filled.Call,contentDescription=null)},label={Text("Call")},selected=selectedItemIndex==1,onClick={selectedItemIndex=1})NavigationBarItem(icon={Icon(Icons.Filled.Email,contentDescription=null)},label={Text("Email")},selected=selectedItemIndex==2,onClick={selectedItemIndex=2})NavigationBarItem(icon={Icon(Icons.Filled.Person,contentDescription=null)},label={Text("Person")},selected=selectedItemIndex==3,onClick={selectedItemIndex=3})}}){innerPadding->Column(modifier=Modifier.fillMaxSize().padding(innerPadding),verticalArrangement=Arrangement.Center,horizontalAlignment=Alignment.CenterHorizontally){Text("内容区域")}}