为什么GridView.builder返回高度扩展的元素,而ListView.Separated返回高度正常的元素?

为什么GridView.builder返回高度扩展的元素,而ListView.Separated返回高度正常的元素?,listview,gridview,flutter,Listview,Gridview,Flutter,我想在横向模式中使用栅格视图。所以我使用了GridView,但是所有的网格元素都是垂直展开的 Widget buildTopNews(BuildContext context) { return Container( padding: EdgeInsets.only(bottom: 20), child: MediaQuery.of(context).orientation == Orientation.portrait ? ListView.separate

我想在横向模式中使用栅格视图。所以我使用了GridView,但是所有的网格元素都是垂直展开的

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],
              );
            },
          ),
  );
}
我甚至尝试使用GridView.builder将crossAxisCount设置为1,以使ListView.builder具有与ListView.builder相同的效果,但所有项目都垂直展开

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],
              );
            },
          ),
  );
}

Gridview的子项具有纵横比。因此,这就是为什么您的项目具有与其宽度相同的高度(首先列出宽度)。更改gridview中的纵横比值以获得所需的高度