如何让Flutter的GridView在内容未超屏时禁止回弹与滚动

要实现iPhone端GridView内容超出屏幕时允许滚动回弹，未超出时禁止滚动和回弹，可通过动态判断内容高度并切换滚动物理特性来实现，修改后的代码如下：

import 'package:flutter/material.dart';

void main() {
  runApp(const DemoPage());
}

class DemoPage extends StatefulWidget {
  const DemoPage({super.key});

  @override
  State<DemoPage> createState() => _DemoPageState();
}

class _DemoPageState extends State<DemoPage> {
  final _gridKey = GlobalKey();
  bool _isScrollable = false;

  @override
  void initState() {
    super.initState();
    // 渲染完成后计算内容高度
    WidgetsBinding.instance.addPostFrameCallback((_) {
      _checkScrollable();
    });
  }

  void _checkScrollable() {
    final renderBox = _gridKey.currentContext?.findRenderObject() as RenderBox?;
    final viewport = renderBox?.parent as RenderAbstractViewport?;
    if (viewport != null && renderBox != null) {
      final contentHeight = renderBox.size.height;
      final viewportHeight = viewport.size.height;
      setState(() {
        // 内容高度超过视口高度时允许滚动
        _isScrollable = contentHeight > viewportHeight;
      });
    }
  }

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: const Text('Demo'),
        ),
        body: GridView.count(
          key: _gridKey,
          crossAxisCount: 2,
          mainAxisSpacing: 8,
          crossAxisSpacing: 8,
          // 根据内容高度动态设置滚动物理特性
          physics: _isScrollable
              ? const BouncingScrollPhysics() // 内容超出时保留iOS回弹效果
              : const NeverScrollableScrollPhysics(), // 内容不足时禁止滚动和回弹
          children: const [
            Text("A"),
            Text("B"),
            // 可添加更多元素测试：Text("C"), Text("D"), Text("E"), Text("F")
          ],
        ),
      ),
    );
  }
}

关键修改说明 #

1. 转为StatefulWidget：需要动态更新滚动状态，因此将原StatelessWidget改为StatefulWidget。
2. 计算内容高度：使用GlobalKey获取GridView的渲染对象，在addPostFrameCallback中（确保UI渲染完成）计算内容总高度与视口高度的差值，判断是否需要允许滚动。
3. 动态切换滚动物理特性：
   • 当内容高度超过视口时，使用BouncingScrollPhysics，保留iOS原生的回弹滚动效果。
   • 当内容未超出时，使用NeverScrollableScrollPhysics，完全禁止滚动和回弹行为。

补充说明 #

iOS端默认使用BouncingScrollPhysics，即便内容不足也允许回弹，这是与Chrome端（默认ClampingScrollPhysics）的差异所在。通过上述动态判断逻辑，即可让iPhone端实现与Chrome一致的内容不足时无回弹的行为，同时保留内容超出时的滚动回弹。

内容的提问来源于stack exchange，提问作者shingo.nakanishi