Flutter中实现任意屏幕尺寸下Container固定在目标位置的方法

你现在的适配失效核心是把绿色装饰背景的尺寸和全局屏幕高度做了硬绑定，但这个背景的实际定位参考是页面内的网格首行组件，不是整个屏幕。当平板、横屏、Web端屏幕宽高比发生变化时，基于全局屏幕高度30%的计算规则自然会错位，和你预期的位置脱节。

不要依赖MediaQuery获取的全局屏幕尺寸计算背景高度，改为基于当前页面的实际布局约束、结合网格组件的渲染规则计算背景尺寸，保证不管屏幕大小、宽高比怎么变，绿色背景永远刚好半遮在首行网格容器后方。

具体实现步骤 #

• 移除原有代码里基于size.height * 0.3设置绿色容器高度的逻辑，这部分是适配问题的根源
• 用LayoutBuilder获取当前页面的可用布局约束，替代全局屏幕尺寸
• 结合ResponsiveGridList的配置规则（最小item宽度100、每行最多4个最少2个、横向间距20、网格外层左右各10的padding），自动计算首行网格item的实际尺寸，反过来推绿色背景需要的高度

改后可直接用的代码 #

class ActivityPage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    final lightModeOn = Theme.of(context).brightness == Brightness.light;
    return Scaffold(
      backgroundColor: Theme.of(context).scaffoldBackgroundColor,
      body: LayoutBuilder(
        builder: (context, constraints) {
          // 拿到当前页面的可用宽度，不是全局屏幕宽度，自动适配所有端约束
          final availableWidth = constraints.maxWidth;
          // 固定配置项，和你网格的配置保持一致
          const horizontalPadding = 20.0; // 页面左右padding
          const gridOuterPadding = 10.0; // 网格外层padding
          const crossSpacing = 20.0; // 网格横向间距
          const minItemWidth = 100.0;
          const maxItemsPerRow = 4;
          const minItemsPerRow = 2;

          // 自动计算当前宽度下每行显示的item数量
          int crossAxisCount = ((availableWidth - horizontalPadding - gridOuterPadding * 2) / (minItemWidth + crossSpacing)).floor();
          crossAxisCount = crossAxisCount.clamp(minItemsPerRow, maxItemsPerRow);
          // 计算单个网格item的实际宽度（正方形item高度和宽度一致）
          final itemWidth = (availableWidth - horizontalPadding - gridOuterPadding * 2 - crossSpacing * (crossAxisCount - 1)) / crossAxisCount;
          // 计算绿色背景需要的高度：顶部安全区+标题区高度+网格外层padding+半个item高度，刚好半遮首行
          final bgHeight = MediaQuery.of(context).padding.top + 50 + 10 + gridOuterPadding + itemWidth / 2;

          return Stack(
            children: <Widget>[
              Container(
                height: bgHeight,
                width: double.infinity,
                decoration: BoxDecoration(
                  color: Theme.of(context).canvasColor,
                ),
              ),
              SafeArea(
                child: Padding(
                  padding: const EdgeInsets.symmetric(horizontal: horizontalPadding),
                  child: Column(
                    children: <Widget>[
                      Padding(
                        padding: const EdgeInsets.fromLTRB(0, 50, 0, 10),
                        child: Center(
                          child: TitleText(
                            text: "activity",
                          ),
                        ),
                      ),
                      Expanded(
                        child: Padding(
                          padding: const EdgeInsets.all(gridOuterPadding),
                          child: ResponsiveGridList(
                            horizontalGridSpacing: crossSpacing,
                            verticalGridSpacing: 20,
                            minItemWidth: minItemWidth,
                            minItemsPerRow: minItemsPerRow,
                            maxItemsPerRow: maxItemsPerRow,
                            children: <Widget>[
                              ActivityContainer(
                                title: 'rate app',
                                image: 'assets/images/rateapp.png',
                                press: () {
                                  showModalBottomSheet(
                                    shape: const RoundedRectangleBorder(
                                      borderRadius: BorderRadius.only(
                                          topLeft: Radius.circular(10),
                                          topRight: Radius.circular(10)),
                                    ),
                                    isDismissible: false,
                                    isScrollControlled: true,
                                    context: context,
                                    builder: (context) => RateUsModal(),
                                  );
                                },
                              ),
                              ActivityContainer(
                                title: 'share app',
                                image: 'assets/images/shareapp.png',
                                press: () {
                                  showModalBottomSheet(
                                    shape: const RoundedRectangleBorder(
                                      borderRadius: BorderRadius.only(
                                          topLeft: Radius.circular(10),
                                          topRight: Radius.circular(10)),
                                    ),
                                    isDismissible: false,
                                    isScrollControlled: true,
                                    context: context,
                                    builder: (context) => ShareAppModal(),
                                  );
                                },
                              ),
                              ActivityContainer(
                                title: 'contact us',
                                image: 'assets/images/contactus.png',
                                press: () {
                                  showModalBottomSheet(
                                    shape: const RoundedRectangleBorder(
                                      borderRadius: BorderRadius.only(
                                          topLeft: Radius.circular(10),
                                          topRight: Radius.circular(10)),
                                    ),
                                    isDismissible: false,
                                    isScrollControlled: true,
                                    backgroundColor: lightModeOn
                                        ? const Color(0xFFFFFFFF)
                                        : const Color(0xFF282828),
                                    context: context,
                                    builder: (context) => ContactUsModal(),
                                  );
                                },
                              ),
                              ActivityContainer(
                                title: lightModeOn
                                    ? 'light !!!'
                                    : 'dark !!!',
                                image: lightModeOn
                                    ? 'assets/images/lighttheme.png'
                                    : 'assets/images/darktheme.png',
                                press: () {
                                  showModalBottomSheet(
                                    shape: const RoundedRectangleBorder(
                                      borderRadius: BorderRadius.only(
                                          topLeft: Radius.circular(10),
                                          topRight: Radius.circular(10)),
                                    ),
                                    isDismissible: false,
                                    isScrollControlled: true,
                                    backgroundColor: lightModeOn
                                        ? const Color(0xFFFFFFFF)
                                        : const Color(0xFF282828),
                                    context: context,
                                    builder: (context) => SwitchThemeModal(),
                                  );
                                },
                              ),
                            ],
                          ),
                        ),
                      ),
                    ],
                  ),
                ),
              ),
            ],
          );
        },
      ),
    );
  }
}

适配说明 #

• 所有尺寸计算基于当前页面的实际可用约束，不依赖全局屏幕尺寸，Web端窗口缩放、平板不同分辨率、横屏测试场景下都会触发自动重算，不会出现偏移
• 网格相关配置抽成了统一常量，后续调整网格间距、每行显示item数量时，背景高度计算会自动同步，不用反复调整比例参数
• 如果你的ActivityContainer不是1:1正方形，只需要调整背景高度计算逻辑里的itemWidth / 2部分，替换成对应比例的item高度半值就行

额外提示：如果后续要在页面里加复杂滚动、动态布局，也可以用GlobalKey绑定网格首行item，动态获取item的实际渲染位置来设置背景高度，灵活性更高，当前场景下用约束计算已经可以覆盖所有全尺寸设备的适配需求。

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