如何实现垂直最多3项的自适应宽度新闻网格组件

要实现这个动态调整宽度的新闻网格，核心是根据显示的元素数量动态设置网格的列数，结合Flutter的GridView.builder就能轻松匹配需求：

实现代码 #

import 'package:flutter/material.dart';

class NewsGridView extends StatelessWidget {
  // 传入新闻元素列表
  final List<Widget> newsItems;
  // 可选：元素之间的间距
  final double spacing;
  // 可选：元素的宽高比
  final double aspectRatio;

  const NewsGridView({
    super.key,
    required this.newsItems,
    this.spacing = 8.0,
    this.aspectRatio = 1.5,
  });

  @override
  Widget build(BuildContext context) {
    // 最多显示3个元素，截取前3个
    final displayItems = newsItems.take(3).toList();
    final itemCount = displayItems.length;

    return GridView.builder(
      // 让网格高度自适应内容
      shrinkWrap: true,
      // 禁用滚动（最多3个元素无需滚动）
      physics: const NeverScrollableScrollPhysics(),
      // 动态设置列数：1个元素1列，2个元素2列，3个元素3列
      gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
        crossAxisCount: itemCount == 1 ? 1 : itemCount == 2 ? 2 : 3,
        childAspectRatio: aspectRatio,
        crossAxisSpacing: spacing,
        mainAxisSpacing: spacing,
      ),
      itemCount: displayItems.length,
      itemBuilder: (context, index) => displayItems[index],
    );
  }
}

使用示例 #

// 在页面中调用
NewsGridView(
  newsItems: [
    Container(
      color: Colors.orange.shade100,
      child: const Center(child: Text('头条新闻')),
    ),
    Container(
      color: Colors.blue.shade100,
      child: const Center(child: Text('热点资讯')),
    ),
    // 可注释第3个元素，测试1/2个元素的布局效果
    Container(
      color: Colors.green.shade100,
      child: const Center(child: Text('科技动态')),
    ),
  ],
)

问题原因说明 #

常规GridView.builder默认固定了crossAxisCount，比如设为3时，1个元素只会占据1/3宽度并居中；而Wrap默认按元素自身宽度排列，无法自动均分剩余空间。通过动态修改crossAxisCount，就能让网格根据元素数量自动调整每列宽度，完美匹配你的需求。

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