如何在Flutter应用中定义可全局访问的deviceHeight与isLandscape变量

由于你需要的deviceHeight和isLandscape都依赖BuildContext（关联MediaQuery和AppBar状态），无法直接定义为静态全局常量（初始化时无上下文，且屏幕旋转后无法自动更新），以下是两种实用实现方式：

方案一：全局工具类（简单直接） #

创建一个工具类封装计算逻辑，需要时传入上下文和AppBar实例即可实时获取最新值。

1. 新建工具类文件（比如app_utils.dart） #

import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';
import 'package:flutter/foundation.dart';

class AppUtils {
  // 计算页面可用高度（减去AppBar和状态栏高度）
  static double calculateDeviceHeight(BuildContext context, PreferredSizeWidget appBar) {
    final mediaQuery = MediaQuery.of(context);
    return mediaQuery.size.height - appBar.preferredSize.height - mediaQuery.padding.top;
  }

  // 判断是否处于横屏模式
  static bool isLandscape(BuildContext context) {
    return MediaQuery.of(context).orientation == Orientation.landscape;
  }

  // 封装你需要的跨平台默认AppBar
  static PreferredSizeWidget buildDefaultAppBar(BuildContext context, VoidCallback onAddPressed) {
    return defaultTargetPlatform == TargetPlatform.iOS
        ? CupertinoNavigationBar(
            middle: const Text('Personal Expenses'),
            trailing: Row(
              mainAxisSize: MainAxisSize.min,
              children: [
                GestureDetector(
                  child: const Icon(CupertinoIcons.add),
                  onTap: onAddPressed,
                ),
              ],
            ),
          )
        : AppBar(
            title: const Text('Personal Expenses'),
            actions: [
              IconButton(
                icon: const Icon(Icons.add),
                onPressed: onAddPressed,
              ),
            ],
          );
  }
}

2. 在任意Widget中使用 #

import 'app_utils.dart';

// 在Widget的build方法内
@override
Widget build(BuildContext context) {
  // 生成默认AppBar
  final appBar = AppUtils.buildDefaultAppBar(context, () => _startAddNewTransaction(context));
  // 获取可用高度
  final deviceHeight = AppUtils.calculateDeviceHeight(context, appBar);
  // 判断横屏状态
  final isLandscape = AppUtils.isLandscape(context);

  return Scaffold(
    appBar: appBar,
    body: Container(
      height: deviceHeight,
      child: isLandscape ? const Text('横屏布局') : const Text('竖屏布局'),
    ),
  );
}

方案二：InheritedWidget（无需重复传参） #

如果需要在多层子Widget中频繁使用这些变量，可以用InheritedWidget封装，子Widget直接通过上下文获取，且状态更新时自动刷新。

1. 新建InheritedWidget文件（比如app_info_provider.dart） #

import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';
import 'package:flutter/foundation.dart';

class AppInfoProvider extends InheritedWidget {
  final double deviceHeight;
  final bool isLandscape;
  final PreferredSizeWidget appBar;

  const AppInfoProvider({
    super.key,
    required this.deviceHeight,
    required this.isLandscape,
    required this.appBar,
    required super.child,
  });

  // 全局获取方法
  static AppInfoProvider of(BuildContext context) {
    final provider = context.dependOnInheritedWidgetOfExactType<AppInfoProvider>();
    assert(provider != null, '未找到AppInfoProvider');
    return provider!;
  }

  // 判断是否需要更新子Widget
  @override
  bool updateShouldNotify(AppInfoProvider oldWidget) {
    return deviceHeight != oldWidget.deviceHeight ||
        isLandscape != oldWidget.isLandscape ||
        appBar != oldWidget.appBar;
  }

  // 封装初始化逻辑，一键包裹页面
  static Widget wrap(BuildContext context, VoidCallback onAddPressed, Widget child) {
    final mediaQuery = MediaQuery.of(context);
    final appBar = defaultTargetPlatform == TargetPlatform.iOS
        ? CupertinoNavigationBar(
            middle: const Text('Personal Expenses'),
            trailing: Row(
              mainAxisSize: MainAxisSize.min,
              children: [
                GestureDetector(
                  child: const Icon(CupertinoIcons.add),
                  onTap: onAddPressed,
                ),
              ],
            ),
          )
        : AppBar(
            title: const Text('Personal Expenses'),
            actions: [
              IconButton(
                icon: const Icon(Icons.add),
                onPressed: onAddPressed,
              ),
            ],
          );
    final deviceHeight = mediaQuery.size.height - appBar.preferredSize.height - mediaQuery.padding.top;
    final isLandscape = mediaQuery.orientation == Orientation.landscape;

    return AppInfoProvider(
      deviceHeight: deviceHeight,
      isLandscape: isLandscape,
      appBar: appBar,
      child: child,
    );
  }
}

2. 在页面中使用 #

import 'app_info_provider.dart';

@override
Widget build(BuildContext context) {
  return AppInfoProvider.wrap(
    context,
    () => _startAddNewTransaction(context),
    Scaffold(
      appBar: AppInfoProvider.of(context).appBar,
      body: Column(
        children: [
          // 子Widget直接获取变量
          Text('可用高度：${AppInfoProvider.of(context).deviceHeight}'),
          if (AppInfoProvider.of(context).isLandscape)
            const Text('当前为横屏模式'),
          // 嵌套子Widget也能直接获取
          const _NestedWidget(),
        ],
      ),
    ),
  );
}

// 嵌套子Widget示例
class _NestedWidget extends StatelessWidget {
  const _NestedWidget();

  @override
  Widget build(BuildContext context) {
    return Text('横屏状态：${AppInfoProvider.of(context).isLandscape}');
  }
}

注意事项 #

• 两种方案均会实时响应屏幕旋转、设备尺寸变化，保证变量始终准确。
• 如果不同页面使用不同样式的AppBar，方案一的灵活性更高，可传入自定义AppBar实例计算高度；方案二则需要针对不同页面单独封装wrap方法。

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