LayoutBuilder适配异常：ResponsiveWidget无法随窗口宽度更新UI

核心问题原因 #

你遇到的UI不更新问题，大概率是父组件MyScaffold没有给ResponsiveWidget传递正确的窗口约束：如果MyScaffold的bodyWidget被包裹在固定宽度容器、未使用Expanded占据剩余空间，LayoutBuilder拿到的constraints.maxWidth会始终固定，无法响应窗口尺寸变化。另外，原代码未显式监听窗口尺寸全局变化，也可能导致重建不及时。

修复后的ResponsiveWidget实现 #

优化后加入MediaQueryListener（Flutter 3.7+支持）监听全局窗口变化，同时统一管理断点常量，确保约束变化时组件自动重建：

import 'package:flutter/material.dart';

class ResponsiveWidget extends StatelessWidget {
  final Widget largeScreen;
  final Widget? mediumScreen;
  final Widget? smallScreen;

  // 统一管理断点常量，避免魔法数字
  static const double _largeBreakpoint = 1000;
  static const double _mediumBreakpoint = 650;

  const ResponsiveWidget({
    Key? key,
    required this.largeScreen,
    this.mediumScreen,
    this.smallScreen,
  }) : super(key: key);

  static bool isLargeScreen(BuildContext context) =>
      MediaQuery.sizeOf(context).width > _largeBreakpoint;

  static bool isMediumScreen(BuildContext context) {
    final width = MediaQuery.sizeOf(context).width;
    return width >= _mediumBreakpoint && width <= _largeBreakpoint;
  }

  static bool isSmallScreen(BuildContext context) =>
      MediaQuery.sizeOf(context).width < _mediumBreakpoint;

  @override
  Widget build(BuildContext context) {
    // 监听全局MediaQuery变化，确保窗口尺寸改变时触发重建
    return MediaQueryListener(
      onMediaQueryChanged: (oldQuery, newQuery) {},
      child: LayoutBuilder(
        builder: (context, constraints) {
          final currentWidth = constraints.maxWidth;
          if (currentWidth > _largeBreakpoint) {
            return largeScreen;
          } else if (currentWidth >= _mediumBreakpoint) {
            return mediumScreen ?? largeScreen;
          } else {
            return smallScreen ?? largeScreen;
          }
        },
      ),
    );
  }
}

检查并修复MyScaffold #

确保MyScaffold的bodyWidget能获取到父组件的最大可用宽度，示例实现如下：

class MyScaffold extends StatelessWidget {
  final Widget bodyWidget;

  const MyScaffold({Key? key, required this.bodyWidget}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      // 直接传递bodyWidget，确保它占据整个屏幕宽度
      body: bodyWidget,
      // 如果有侧边栏等布局，必须用Expanded让bodyWidget占据剩余空间：
      // body: Row(
      //   children: [
      //     const Sidebar(),
      //     Expanded(child: bodyWidget),
      //   ],
      // ),
    );
  }
}

更优雅的响应式实现方案 #

可以通过上下文扩展方法简化调用，让代码更简洁：

extension ResponsiveContext on BuildContext {
  bool get isLargeScreen => MediaQuery.sizeOf(this).width > 1000;
  bool get isMediumScreen => 
      MediaQuery.sizeOf(this).width >= 650 && 
      MediaQuery.sizeOf(this).width <= 1000;
  bool get isSmallScreen => MediaQuery.sizeOf(this).width < 650;

  Widget responsive({
    required Widget large,
    Widget? medium,
    Widget? small,
  }) {
    return MediaQueryListener(
      child: LayoutBuilder(
        builder: (context, constraints) {
          if (constraints.maxWidth > 1000) return large;
          else if (constraints.maxWidth >= 650) return medium ?? large;
          else return small ?? large;
        },
      ),
    );
  }
}

在页面中直接调用：

class NotificationsPage extends StatelessWidget {
  const NotificationsPage({super.key});

  @override
  Widget build(BuildContext context) {
    return MyScaffold(
      bodyWidget: context.responsive(
        large: const Text('Large'),
        medium: const Text('Medium'),
        small: const Text('Small'),
      ),
    );
  }
}

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