Flutter中如何实现与屏幕等高的无滚动GridView

Got it, let's sort this out! The problem with your current code is that shrinkWrap: true tells the GridView to expand vertically to fit all its children—so when you have 230 items, it's way taller than the screen, causing scrolling. To make it stay exactly the screen's height (no scroll) and adjust cell sizes automatically, here's what you need to do:

Key Changes: #

• Remove shrinkWrap: true: We want the grid to respect fixed height constraints, not wrap its content.
• Constrain the grid to screen height: Use MediaQuery to get the screen's usable height (accounting for status bars/notches if needed).
• Prevent scrolling: Set physics: NeverScrollableScrollPhysics() so the grid doesn't scroll even if content would otherwise overflow.
• Calculate cell sizes dynamically: Use a custom grid delegate to adjust cell heights so all rows fit perfectly into the screen height.

Modified Code: #

@override
Widget build(BuildContext context) {
  // Get screen dimensions and usable height (subtract system padding)
  final screenSize = MediaQuery.of(context).size;
  final usableHeight = screenSize.height - MediaQuery.of(context).padding.top - MediaQuery.of(context).padding.bottom;
  
  const crossAxisCount = 15;
  const totalItems = 230;
  const mainAxisSpacing = 10.0; // Spacing between rows
  const crossAxisSpacing = 10.0; // Spacing between columns
  
  // Calculate number of rows needed
  final numberOfRows = (totalItems / crossAxisCount).ceil();
  
  // Calculate height per row (adjust for spacing between rows)
  final rowHeight = (usableHeight - (numberOfRows - 1) * mainAxisSpacing) / numberOfRows;
  
  // Calculate child aspect ratio (width/height)
  final childWidth = (screenSize.width - (crossAxisCount - 1) * crossAxisSpacing) / crossAxisCount;
  final childAspectRatio = childWidth / rowHeight;

  return SizedBox(
    height: usableHeight,
    child: GridView.count(
      crossAxisCount: crossAxisCount,
      mainAxisSpacing: mainAxisSpacing,
      crossAxisSpacing: crossAxisSpacing,
      physics: const NeverScrollableScrollPhysics(), // Disable scrolling
      childAspectRatio: childAspectRatio, // Dynamically adjust cell size
      children: List.generate(
        totalItems,
        (index) => Container(
          color: Colors.blueGrey,
        ),
      ),
    ),
  );
}

Notes: #

• Spacing: I replaced the Padding on each child with mainAxisSpacing and crossAxisSpacing in the GridView—this is more efficient and consistent for grid layouts. Adjust these values to match your desired spacing.
• Usable Height: Subtracting MediaQuery.padding ensures the grid fits within the visible screen area, not including the status bar or bottom navigation bar.
• Dynamic Adjustments: If you change the number of items (totalItems) or columns (crossAxisCount), the cell sizes will automatically recalculate to fit the screen height perfectly.

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