Flutter 不含App Bar标题栏的主屏幕尺寸是多少？

不存在全设备通用的固定主屏幕尺寸，不同设备的屏幕分辨率、状态栏高度、自定义App Bar高度都会影响可用区域大小，必须在应用运行时动态计算对应数值，再匹配对应分辨率的背景图。

Android（Kotlin） #

• 计算逻辑：总屏幕高度 - 状态栏高度 - App Bar高度 = 主区域可用高度，主区域宽度等于屏幕总宽度
• 代码示例：

// 取屏幕总尺寸
val displayMetrics = resources.displayMetrics
val totalHeight = displayMetrics.heightPixels
val totalWidth = displayMetrics.widthPixels

// 取状态栏高度
val statusBarResId = resources.getIdentifier("status_bar_height", "dimen", "android")
val statusBarHeight = if (statusBarResId > 0) resources.getDimensionPixelSize(statusBarResId) else 0

// 取App Bar高度（自定义控件直接取控件高度即可）
val typedValue = TypedValue()
val actionBarHeight = if (theme.resolveAttribute(android.R.attr.actionBarSize, typedValue, true)) {
    TypedValue.complexToDimensionPixelSize(typedValue.data, resources.displayMetrics)
} else 0

// 最终可用区域尺寸
val mainAreaHeight = totalHeight - statusBarHeight - actionBarHeight
val mainAreaWidth = totalWidth

iOS（Swift） #

• 计算逻辑：总屏幕高度 - 顶部安全区高度 - 导航栏高度 = 主区域可用高度
• 代码示例：

let totalHeight = UIScreen.main.bounds.height
let totalWidth = UIScreen.main.bounds.width

let topSafeInset = UIApplication.shared.windows.first?.safeAreaInsets.top ?? 0
let navBarHeight = navigationController?.navigationBar.frame.height ?? 0

let mainAreaHeight = totalHeight - topSafeInset - navBarHeight
let mainAreaWidth = totalWidth

Flutter #

final mediaQuery = MediaQuery.of(context);
final totalHeight = mediaQuery.size.height;
final totalWidth = mediaQuery.size.width;

final statusBarHeight = mediaQuery.padding.top;
final appBarHeight = kToolbarHeight; // 自定义AppBar替换为对应高度即可

final mainAreaHeight = totalHeight - statusBarHeight - appBarHeight;
final mainAreaWidth = totalWidth;

• 如果应用开启了沉浸式状态栏/隐藏了状态栏，计算时不需要减去状态栏高度
• 背景图建议按主流设备dpi做多份切图，同时设置centerCrop（Android）/aspectFill（iOS）的缩放模式，避免低分辨率设备上图片拉伸变形
• 如果背景图有核心展示元素，建议把核心元素放在安全区范围内，避免被异形屏的刘海/挖孔遮挡

内容的提问来源于stack exchange，提问作者UrDistraction