对话框中的 Gridview 项目在每个项目后显示额外的底部填充

Question

我正在尝试创建一个对话框来显示有关单击事件的评论列表。然而，下面的代码总是在每个 gridview 项目之后生成一个额外的底部填充，并且我无法找出哪个小部件导致了这个额外的填充。

希望有人能帮助我指出正确的方向。非常感谢！

showDialog(
                                    context: context,
                                    builder: (_) {
                                      return Dialog(
                                          backgroundColor: Colors.orange[200],
                                          shape: RoundedRectangleBorder(
                                            borderRadius: BorderRadius.circular(40),
                                          ),
                                          elevation: 16,
                                          child: Container(
                                            padding: EdgeInsets.only(bottom: 50),
                                            child: StreamBuilder<QuerySnapshot>(
                                              // stream: firestoreInstance.collection("requests").snapshots(),

                                              stream: streamForReviews,
                                              builder: (context, snapshot) {
                                                switch (snapshot.connectionState) {
                                                  case ConnectionState.none:
                                                    return new Text('');

                                                  case ConnectionState.waiting:
                                                    return new Text('');

                                                  default:
                                                    if (snapshot.hasError) {
                                                      return new Text('error');
                                                    }

                                                    if (snapshot.data != null) {
                                                      WidgetsBinding.instance!.addPostFrameCallback((_) {
                                                        if (snapshot.data!.docs.length > 1) {
                                                        } else if (snapshot.data!.docs.length == 1) {
                                                        } else {}
                                                      });

                                                      return GridView.builder(
                                                        gridDelegate:
                                                        const SliverGridDelegateWithFixedCrossAxisCount(
                                                          crossAxisCount: 1,
                                                        ),
                                                        scrollDirection: Axis.vertical,
                                                        shrinkWrap: true,
                                                        padding: EdgeInsets.zero,
                                                        // itemCount: snapshot.data.documents.length,
                                                        itemCount: snapshot.data!.docs.length,
                                                        itemBuilder: (context, index) {
                                                          // List rev = snapshot.data.documents.reversed.toList();

                                                          String comments =
                                                          snapshot.data!.docs[index].get("comments");
                                                          String reviewerName =
                                                          snapshot.data!.docs[index].get("name");
                                                          num rating = snapshot.data!.docs[index].get("rating");
                                                          String downloadURL =
                                                          snapshot.data!.docs[index].get("imageURL");

                                                          Timestamp reviewTimeStamp =
                                                          snapshot.data!.docs[index].get("createdDTG");
                                                          DateTime reviewDateTime =
                                                          DateTime.parse(reviewTimeStamp.toDate().toString());
                                                          DateFormat reviewDateTimeFormat =
                                                          new DateFormat('dd MMM yyyy');
                                                          String reviewDateTimeString =
                                                          reviewDateTimeFormat.format(reviewDateTime);
                                                          return Container(
                                                            padding: EdgeInsets.symmetric(
                                                                vertical: 20, horizontal: 20),
                                                            child: Column(
                                                              children: [
                                                                SizedBox(height: 10),
                                                                ClipRRect(
                                                                  borderRadius: BorderRadius.circular(16.0),
                                                                  child: Image.network(
                                                                    downloadURL,
                                                                    fit: BoxFit.fitHeight,
                                                                    height: 100,
                                                                  ),
                                                                ),
                                                                SizedBox(width: 10),
                                                                Column(
                                                                  // mainAxisSize: MainAxisSize.min,
                                                                  // crossAxisAlignment:
                                                                  //     CrossAxisAlignment.stretch,
                                                                  children: [
                                                                    Text(reviewDateTimeString,
                                                                        style: TextStyle(
                                                                          color: Colors.orange[800],
                                                                          fontSize: 18,
                                                                          // fontStyle: FontStyle.italic,
                                                                        )),
                                                                    SizedBox(height: 2),
                                                                    Text(reviewerName,
                                                                        style: TextStyle(
                                                                          color: Colors.orange[800],
                                                                          fontSize: 18,
                                                                        )),
                                                                    SizedBox(height: 2),
                                                                    RichText(
                                                                      text: TextSpan(
                                                                        // style: Theme.of(context).textTheme.body1,
                                                                        children: [
                                                                          WidgetSpan(
                                                                            child: Padding(
                                                                              padding: const EdgeInsets.symmetric(
                                                                                  horizontal: 2.0),
                                                                              child: Icon(
                                                                                Icons.star,
                                                                                color: Colors.orange,
                                                                                size: 18,
                                                                              ),
                                                                            ),
                                                                          ),
                                                                          TextSpan(
                                                                            text: rating.toString(),
                                                                            style: new TextStyle(
                                                                              fontSize: 16.0,
                                                                              color: Colors.orange[800],
                                                                            ),
                                                                          ),
                                                                        ],
                                                                      ),
                                                                    ),
                                                                    SizedBox(height: 2),
                                                                  ],
                                                                ),
                                                                Align(
                                                                  alignment: Alignment.centerLeft,
                                                                  child: Text(comments,
                                                                      style: TextStyle(
                                                                        color: Colors.orange[800],
                                                                        fontSize: 16,
                                                                        // fontStyle: FontStyle.italic,
                                                                      )),
                                                                ),
                                                                Divider(color: Colors.orange, thickness: 1),
                                                              ],
                                                            ),
                                                          );
                                                        },
                                                      );
                                                    } else {
                                                      return new Text('data null');
                                                    }
                                                }
                                              },
                                            ),
                                          ));
                                    });

Answer 1

您需要更改 SliverGridDelegateWithFixedCrossAxisCount 小部件中 childAspectRatio 的值。默认值为 1，这意味着网格项的宽度等于其高度。在您的情况下，宽度大约是高度的 2 倍。你的代码应该是这样的：

return GridView.builder(
  gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
     crossAxisCount: 1,
     childAspectRatio: 2, //try to change this number to see how it changes the dimensions of the grid item

Answer 2

更改

childAspectRation

对我来说不起作用，但有效的是将

padding

的

GridView

属性更改为

EdgeInsets.zero

。

GridView(
  shrinkWrap: true,
  padding: EdgeInsets.zero, //use this
  children: [],
)