Android Compose Material3的下拉菜单在横屏模式下有问题吗?

移动开发 2026-07-11

这是在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的额外内边距等于相机开孔的大小。

一个简单的检查方法是:

  1. 打开 设置 > 系统 > 开发者选项
  2. 找到 “Display cutout”(有时称为 “Simulate a display with a cutout”)。
  3. 选择 “瀑布式开孔”。这将强制系统在竖屏下也移除内边距,尤其是在横屏时。

这会得到类似如下的效果:

未在开孔时的问题已修复

使用设备默认开孔后,你会回到原先的问题:

设备默认开孔时的问题

在这种情况下调整内边距似乎并不起作用,因此最好的办法是将此问题提交给Google。

站内所有文章版权归属LeftHeroAI导航站,无授权禁止任何主体转载、抄袭、复制内容,亦不得私自架设镜像站点。一经侵权,本站将通过法律途径追责。

相关文章