在GridView中使用ExpansionTile时不移动其他项的实现方法

直接用ExpansionTile做不到你要的效果——因为ExpansionTile的展开逻辑是修改自身尺寸，会触发GridView重新计算布局，必然导致其他网格项位移。

要实现展开内容覆盖其他项、不改变原有网格布局、背景暗化的需求，推荐用以下两种方案：

方案1：OverlayEntry（最灵活） #

利用Flutter的Overlay机制，在屏幕最上层插入覆盖内容，完全不影响GridView的布局。核心步骤：

• 给需要展开的网格项绑定GlobalKey，用来获取它在屏幕上的位置和尺寸
• 点击时创建OverlayEntry，包含背景暗化遮罩和展开的详情内容
• 定位详情内容到原网格项的位置，点击遮罩或关闭按钮移除Overlay

示例代码 #

import 'package:flutter/material.dart';

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

  @override
  State<GridOverlayDemo> createState() => _GridOverlayDemoState();
}

class _GridOverlayDemoState extends State<GridOverlayDemo> {
  OverlayEntry? _activeOverlay;
  final Map<int, GlobalKey> _itemKeys = {};

  @override
  void initState() {
    super.initState();
    // 给需要支持展开的项生成key，这里假设前8项可展开
    for (int i = 0; i < 8; i++) {
      _itemKeys[i] = GlobalKey();
    }
  }

  void _showItemDetail(int index) {
    final itemKey = _itemKeys[index];
    final renderBox = itemKey?.currentContext?.findRenderObject() as RenderBox?;
    if (renderBox == null) return;

    final screenPos = renderBox.localToGlobal(Offset.zero);
    final itemSize = renderBox.size;

    _activeOverlay = OverlayEntry(
      builder: (context) => Stack(
        children: [
          // 暗化背景，点击关闭
          GestureDetector(
            onTap: _hideDetail,
            child: Container(
              width: MediaQuery.of(context).size.width,
              height: MediaQuery.of(context).size.height,
              color: Colors.black.withOpacity(0.6),
            ),
          ),
          // 展开的详情内容，定位到原网格项位置
          Positioned(
            left: screenPos.dx,
            top: screenPos.dy,
            width: itemSize.width,
            // 自定义展开高度
            child: Material(
              borderRadius: BorderRadius.circular(8),
              child: Container(
                padding: const EdgeInsets.all(12),
                child: Column(
                  mainAxisSize: MainAxisSize.min,
                  crossAxisAlignment: CrossAxisAlignment.start,
                  children: [
                    Text("Item $index 详情", style: const TextStyle(fontWeight: FontWeight.bold)),
                    const SizedBox(height: 8),
                    const Text("这里是更多详细信息，支持多行内容"),
                    const SizedBox(height: 12),
                    ElevatedButton(
                      onPressed: _hideDetail,
                      child: const Text("关闭"),
                    )
                  ],
                ),
              ),
            ),
          )
        ],
      ),
    );

    Overlay.of(context)?.insert(_activeOverlay!);
  }

  void _hideDetail() {
    _activeOverlay?.remove();
    _activeOverlay = null;
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: const Text("网格展开示例")),
      body: GridView.count(
        crossAxisCount: 4,
        padding: const EdgeInsets.all(8),
        mainAxisSpacing: 8,
        crossAxisSpacing: 8,
        children: List.generate(20, (index) {
          return InkWell(
            key: _itemKeys[index],
            onTap: _itemKeys.containsKey(index) ? () => _showItemDetail(index) : null,
            borderRadius: BorderRadius.circular(8),
            child: Container(
              decoration: BoxDecoration(
                color: _itemKeys.containsKey(index) ? Colors.lightBlue[100] : Colors.grey[100],
                borderRadius: BorderRadius.circular(8),
              ),
              child: Center(child: Text("Item $index")),
            ),
          );
        }),
      ),
    );
  }
}

方案2：Stack + Positioned #

如果不需要跨页面层级的覆盖，也可以用Stack包裹GridView和覆盖层：

• 把GridView放在Stack的底层
• 当需要展开时，在Stack上层添加背景遮罩和定位好的详情内容
• 这种方式适合覆盖范围局限在当前页面内的场景

核心逻辑 #

Stack(
  children: [
    // 原GridView
    GridView.count(...),
    // 展开状态下显示的遮罩和详情
    if (_isExpanded)
      Stack(
        children: [
          GestureDetector(onTap: () => setState(() => _isExpanded = false), child: Container(color: Colors.black.withOpacity(0.5))),
          Positioned(left: itemPos.dx, top: itemPos.dy, child: DetailContent()),
        ],
      )
  ],
)

两种方案都能实现你要的效果：展开内容覆盖其他网格项，原有布局完全不动，同时支持背景暗化。

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