如何制作类似的gridview.builder

Question

我想创建一个网格形式的新闻小部件，垂直方向最多有 3 个元素。您需要做到这一点，以便如果有两个元素，它们会均匀拉伸（类似于展开），如果有一个元素，则它完全填充剩余空间（仅在宽度上）。 如果你能帮忙我会很高兴）

我尝试使用常规的 gridview.builder，但意识到这是没有希望的。我也尝试想出一些带有 list.builder 的包装，但也没有成功

Answer 1

你可以尝试使用awesome包flutter_staggered_grid_view

或者通常情况下， 使用

Wrap

小部件以及

Expanded

和

Align

小部件

的组合

Wrap(
  spacing: 8.0, // Adjust the spacing between items
  runSpacing: 8.0, // Adjust the run spacing between rows
  children: [
    // Assuming you have a list of news items called 'newsList'
    for (var newsItem in newsList)
      NewsItemWidget(newsItem), // Replace this with your NewsItemWidget
  ],
)

NewsItemWidget

的示例

class NewsItemWidget extends StatelessWidget {
  final NewsItem newsItem; // Replace NewsItem with your actual data model

  NewsItemWidget(this.newsItem);

  @override
  Widget build(BuildContext context) {
    int itemCount = 1; // You need to determine the number of items in each row
    if (itemCount == 1) {
      return Container(
        width: double.infinity,
        child: YourSingleItemWidget(
            newsItem), // Replace with your single item widget
      );
    } else {
      return Expanded(
        child: Container(
          child: Column(
            children: [
              for (int i = 0; i < itemCount; i++)
                YourMultiItemWidget(
                    newsItem), // Replace with your multi item widget
            ],
          ),
        ),
      );
    }
  }
}

YourSingleItemWidget

和

YourMultiItemWidget

分别表示单个新闻项和多个新闻项的小部件。