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

你试过吗？删除 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 2

你给父容器一个特定高度的问题 删除这一行： height: MediaQuery.of(context).size.height * 0.66,

Answer 3

你可以试试下面的代码：

import 'package:flutter/material.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  // This widget is the root of your application.
  final Color darkBlue = Color.fromARGB(255, 18, 32, 47);
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData.dark().copyWith(scaffoldBackgroundColor: darkBlue),
      home: MyHomePage(title: 'Flutter Demo Home Page'),
    );
  }
}

class MyHomePage extends StatefulWidget {
  MyHomePage({Key key, this.title}) : super(key: key);

  final String title;

  @override
  _MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  List<String> podcasts = [
    'Tech me',
    'Grounded',
    'Breakdonw',
    'Today in Focus',
    'Feel better',
    'No such thing',
    'Agile',
    'Driven Test Dev'
  ];

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: ListView(
        children: [
          //TOP Row
          SafeArea(
            child: ListTile(
                title: Text(
                  'Top Rated',
                  style: TextStyle(
                    fontFamily: "Segoe UI",
                    fontSize: 20,
                    color: Colors.white,
                  ),
                ),
                trailing: GestureDetector(
                  onTap: () {},
                  child: Text(
                    "View all",
                    style: TextStyle(
                      fontFamily: "Product Sans",
                      fontSize: 15,
                      color: Color(0xFF969696),
                    ),
                  ),
                )),
          ),
          //Podcast Item
            GridView.count(
              shrinkWrap: true,
              // primary: true,
              physics: new NeverScrollableScrollPhysics(),
              crossAxisCount: 2,
              childAspectRatio: 1.1,
              children: podcasts
                  .map((podcast) => Container(
                        width: 200,
                        child: Card(
                          child: Center(child: Text(podcast)),
                        ),
                      ))
                  .toList(),
            ),
        ],
      ),
    );
  }
}

这解决了你的问题，但是，我真的建议你避免使用 Container 作为父级，这会给你带来很多问题，当你使用 height:MediaQuery.of(context).size.height * 0.66 时，你对 Flutter 说，这个小部件会有固定大小，不适合网格。

另外，请注意扩展小部件，我删除了扩展小部件，因为您不能将 Listview 和 Expanded 作为子级使用。

注意：如果您希望“Top-Rated”和“View all”不动，则需要使用 CustomScrollView 和 SliverPersistenHeader，但需要更多代码和知识。

Answer 4

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

试试看： padding: EdgeInsets.all(0)

Answer 5

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: MediaQuery.removePadding(
              context: context,
              removeTop: true,
              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(),
              ),
            ),
          ),
        ],
      ),
    );
  }
}

只需在网格视图之前添加此行

MediaQuery.removePadding(
  context: context,
  removeTop: true,
  child: Container(),
)

Answer 6

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

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