Flutter中RawScrollbar相关“No MediaQuery widget ancestor found”报错求解

Flutter中RawScrollbar组件的滚动逻辑、尺寸计算依赖MediaQuery提供的设备屏幕参数、全局边距等数据。而MediaQuery实例默认由MaterialApp/CupertinoApp/WidgetsApp这类根应用组件自动创建并注入到组件树中，当RawScrollbar所在的组件树上层没有这类根组件时，就会抛出该错误。

• 直接将包含RawScrollbar的组件作为runApp的入参，外层未包裹根应用组件
• 弹窗、独立路由页面的上下文脱离了原有携带MediaQuery的主组件树

方案1：外层包裹根应用组件（推荐） #

在项目根节点外层套MaterialApp（安卓风格）或CupertinoApp（iOS风格）即可，示例代码：

void main() {
  runApp(
    MaterialApp(
      home: Scaffold(
        // 此处放置你包含RawScrollbar的业务组件
        body: MyScrollWidget(),
      ),
    )
  );
}

该方案同时会自动注入路由、主题等全局配置，适配绝大多数开发场景

方案2：手动注入MediaQuery（特殊场景适用） #

如果是自定义弹窗、临时悬浮层等不需要根应用组件的场景，可以手动给RawScrollbar上层补充MediaQuery：

MediaQuery(
  // 从窗口实例获取默认 MediaQuery 配置
  data: MediaQueryData.fromWindow(WidgetsBinding.instance.window),
  child: RawScrollbar(
    // 你原有RawScrollbar的配置代码
    thumbVisibility: true,
    child: SingleChildScrollView(
      // 滚动内容
    ),
  ),
)

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