Android Compose Material3的下拉菜单在横屏模式下有问题吗?
这是在Android 16上使用实验性Material 3功能时的一个bug吗?
竖屏模式下,Android 15和 16上一切正常。
横屏模式下,Android 15能正常工作,但Android 16不能。
例如,在Android 15横屏下的DropMenu与按钮对齐

Android 16横屏下的DropMenu与按钮未对齐

Compose代码
import android.os.Bundle
import androidx.activity.ComponentActivity
import androidx.activity.compose.setContent
import androidx.activity.enableEdgeToEdge
import androidx.compose.foundation.layout.padding
import androidx.compose.foundation.layout.safeDrawingPadding
import androidx.compose.material.icons.Icons
import androidx.compose.material.icons.filled.MoreVert
import androidx.compose.material3.DropdownMenu
import androidx.compose.material3.DropdownMenuItem
import androidx.compose.material3.ExperimentalMaterial3Api
import androidx.compose.material3.ExposedDropdownMenuBox
import androidx.compose.material3.Icon
import androidx.compose.material3.IconButton
import androidx.compose.material3.MaterialTheme
import androidx.compose.material3.Scaffold
import androidx.compose.material3.Text
import androidx.compose.material3.TopAppBar
import androidx.compose.material3.TopAppBarDefaults.topAppBarColors
import androidx.compose.runtime.Composable
import androidx.compose.runtime.getValue
import androidx.compose.runtime.mutableStateOf
import androidx.compose.runtime.remember
import androidx.compose.runtime.setValue
import androidx.compose.ui.Modifier
import androidx.compose.ui.graphics.Color
import androidx.compose.ui.tooling.preview.Preview
import com.github.zardozz.material3scafold.ui.theme.Material3ScafoldTheme
class MainActivity : ComponentActivity() {
@OptIn(ExperimentalMaterial3Api::class)
override fun onCreate(savedInstanceState: Bundle?) {
super.onCreate(savedInstanceState)
enableEdgeToEdge()
setContent {
Material3ScafoldTheme {
Scaffold(modifier = Modifier.safeDrawingPadding(),
topBar = {
TopAppBar(
colors = topAppBarColors(
containerColor = MaterialTheme.colorScheme.primary,
titleContentColor = MaterialTheme.colorScheme.onSecondary,
),
title = {
Text("Top app bar")
},
actions = {
ActionDropdownMenu()
},
)
},
) { innerPadding ->
Greeting(
name = "Android",
modifier = Modifier.padding(innerPadding)
)
}
}
}
}
}
@Composable
fun ActionDropdownMenu() {
var expanded by remember { mutableStateOf(false) }
IconButton(onClick = { expanded = !expanded }) {
Icon(Icons.Filled.MoreVert,
contentDescription = "More options",
tint = Color.White)
}
DropdownMenu(
expanded = expanded,
onDismissRequest = { expanded = false }
) {
DropdownMenuItem(
text = { Text("Option 1") },
onClick = { /* Do something... */ }
)
DropdownMenuItem(
text = { Text("Option 2") },
onClick = { /* Do something... */ }
)
}
}
@Composable
fun Greeting(name: String, modifier: Modifier = Modifier) {
Text(
text = "Hello $name!",
modifier = modifier
)
}
@Preview(showBackground = true)
@Composable
fun GreetingPreview() {
Material3ScafoldTheme {
Greeting("Android")
}
}
或者我是不是做错了什么?
解决方案
所以我在不同设备和模拟器上尝试了该场景,发现DropDownMenu的额外内边距等于相机开孔的大小。
一个简单的检查方法是:
- 打开 设置 > 系统 > 开发者选项。
- 找到 “Display cutout”(有时称为 “Simulate a display with a cutout”)。
- 选择 “瀑布式开孔”。这将强制系统在竖屏下也移除内边距,尤其是在横屏时。
这会得到类似如下的效果:
使用设备默认开孔后,你会回到原先的问题:
在这种情况下调整内边距似乎并不起作用,因此最好的办法是将此问题提交给Google。
站内所有文章版权归属LeftHeroAI导航站,无授权禁止任何主体转载、抄袭、复制内容,亦不得私自架设镜像站点。一经侵权,本站将通过法律途径追责。

