Flutter 在 gridview 中显示额外空间我该如何删除它

Question

我有一个简单的小部件，在小部件中，我有一个棕色和一个网格视图。问题是由于高度的原因，它在末端显示了额外的空间。如果我删除高度，则小部件不会显示。

代码

class PodcastSection extends StatelessWidget {
  final String title;
  final DiscoverExtended arg;
  final List<Item> listOfPodcasts;
  PodcastSection({@required this.title, this.arg, this.listOfPodcasts});
  @override
  Widget build(BuildContext context) {
    return Container(
      margin: EdgeInsets.only(top: 18),
      padding: EdgeInsets.only(left: 1, right: 1),
      height: MediaQuery.of(context).size.height * 0.66,
      decoration: BoxDecoration(
        border: Border(
          bottom: BorderSide(color: Color(0xFF707070).withOpacity(0.35)),
        ),
      ),
      child: Column(
        crossAxisAlignment: CrossAxisAlignment.center,
        children: [
          SizedBox(
            height: MediaQuery.of(context).size.height * 0.005,
          ),
          //TOP Row
          Row(
            crossAxisAlignment: CrossAxisAlignment.end,
            children: [
              Text(
                title.toUpperCase(),
                style: TextStyle(
                  fontFamily: "Segoe UI",
                  fontSize: 20,
                  color: Colors.white,
                ),
              ),
              Spacer(),
              GestureDetector(
                onTap: () {
                  Navigator.pushNamed(context, 'discover-extended',
                      arguments: arg);
                },
                child: Text(
                  "View all",
                  style: TextStyle(
                    fontFamily: "Product Sans",
                    fontSize: 15,
                    color: Color(0xFF969696),
                  ),
                ),
              )
            ],
          ),
          //Podcast Item

          //Podcast Item
          Expanded(
            child: GridView.count(
              // shrinkWrap: true,
              // primary: true,
              physics: new NeverScrollableScrollPhysics(),
              crossAxisCount: 2,
              childAspectRatio: 1.1,
              children: listOfPodcasts
                  .map<Widget>(
                    (e) => GestureDetector(
                      child: PodcastItem(podcastInfo: e),
                      onTap: () {
                        Navigator.pushNamed(context, "episode", arguments: e);
                      },
                    ),
                  )
                  .toList(),
            ),
          ),
        ],
      ),
    );
  }
}

您可以在图像中看到它在末尾显示空间

我需要删除多余的空间，最后我尝试删除高度并将容器包装在扩展中，但它没有显示整个小部件行和网格。

Answer 1

在GridView.count()小部件中，有一个用于分配填充的选项。

尝试一下： padding: EdgeInsets.zero

Answer 2

你试过这个吗？删除Expanded小部件并仅将shrinkWrap设置为true 也许这对您有用

          GridView.count(
          shrinkWrap: true,
          physics: new NeverScrollableScrollPhysics(),
          crossAxisCount: 2,
          childAspectRatio: 1.1,
          children: listOfPodcasts
              .map<Widget>(
                (e) => GestureDetector(
                  child: PodcastItem(podcastInfo: e),
                  onTap: () {
                    Navigator.pushNamed(context, "episode", arguments: e);
                  },
                ),
              )
              .toList(),
        ),

Answer 3

Gridview.count 中有一个属性，即padding属性。像这样设置=>填充：EdgeInsets.zero。

这将消除网格视图周围所有不需要的空间。