GetX中context宽度变化时如何触发指定widget更新？

首先明确responsiveValue不生效的核心原因：它只是一次性的静态计算函数，本身没有绑定宽度变化的监听逻辑，调用时仅会基于传入的当前宽度计算结果，无法感知后续宽度变更。

下面提供两种不同场景的可行实现方案： #

方案1：局部Widget实现（单页面/单个组件场景，代码侵入性最低） #

仅针对需要响应宽度变化的组件改造即可：

• 提前在当前页面/对应Controller中定义响应式宽度变量：final widgetWidth = 0.0.obs;
• 在目标组件外层嵌套LayoutBuilder，实时拿到当前上下文的宽度赋值给响应式变量，配合Obx监听变量变化触发刷新：

LayoutBuilder(
  builder: (context, constraints) {
    // 每次布局变化时更新响应式宽度
    widgetWidth.value = constraints.maxWidth;
    return Obx(
      () => Container(
        // 直接传入响应式变量的值给responsiveValue即可自动适配
        padding: EdgeInsets.all(responsiveValue(widgetWidth.value, desktop: 24, mobile: 12)),
        child: const Text("自适应内容"),
      ),
    );
  },
)

方案2：全局宽度监听（全应用多页面需要响应式的场景） #

一次配置全应用生效，不需要每个组件单独加LayoutBuilder：

• 新建全局Controller或者在根Controller中定义全局响应式宽度变量：final globalScreenWidth = Get.width.obs;
• 在GetMaterialApp的builder回调中全局监听屏幕宽度变化，实时更新变量：

GetMaterialApp(
  builder: (context, child) {
    globalScreenWidth.value = MediaQuery.of(context).size.width;
    return child!;
  },
  // 其他应用配置...
);

• 任意页面需要做宽度适配时，直接用全局变量传入responsiveValue，外层套Obx即可自动刷新：

Obx(
  () => Text(
    responsiveValue(globalScreenWidth.value, desktop: "桌面端展示文案", mobile: "移动端展示文案"),
  ),
)

核心注意点：GetX只会监听Rx类型变量的变更，直接在Obx中调用Get.width或者MediaQuery.of(context).size.width不会触发更新，必须将宽度值赋值给Rx变量后再使用。

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