为什么GridView.builder返回高度扩展的元素，而ListView.Seperated返回高度正常的元素？

Question

I wanted to use the grid view for the landscape mode. So i used GridView but all the Grid elements are expanded vertically.

I even tried for the ListView.builder using GridView.builder setting the crossAxisCount to 1 to make the same effect as the ListView.builder but there also all the items are expanded vertically.

Widget buildTopNews(BuildContext context) {
  return Container(
    padding: EdgeInsets.only(bottom: 20),
    child: MediaQuery.of(context).orientation == Orientation.portrait
        ? ListView.separated(
            shrinkWrap: true,
            physics: const NeverScrollableScrollPhysics(),
            itemBuilder: (BuildContext context, int index) {
              return NewsCard(
                news: topNews[index],
              );
            },
            itemCount: topNews.length,
            separatorBuilder: (BuildContext context, int index) {
              return SizedBox(
                height: 20,
              );
            },
          )
        : GridView.builder(
            physics: NeverScrollableScrollPhysics(),
            shrinkWrap: true,
            itemCount: topNews.length,
            gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
              crossAxisCount: 2,
              mainAxisSpacing: 20,
            ),
            itemBuilder: (BuildContext context, int index) {
              return NewsCard(
                news: topNews[index],
              );
            },
          ),
  );
}

Answer 1

Gridview has an aspect ratio for its children. So that's why your items are having the same height as its width(width is set out first). Change the aspect ratio value in your gridview to get the desired height.