dart 如何在GridView中解决底部溢出8.5像素的RenderFlex

5jvtdoz2  于 2023-03-10  发布在  其他
关注(0)|答案(2)|浏览(173)

我需要你帮我解决一个快把我逼疯的问题。
基本上,我想做一个GridView.count来显示我的不同对象。到目前为止,除了一个问题,它都工作得很好。
事实上,我的GridView.count中有A RenderFlex overflowed by 8.5 pixels on the bottom.错误。我尝试添加childAspectRatio,但它根据屏幕大小显示不同。我希望GridView.count的大小在每个屏幕上保持不变。
有没有人能解开这个谜题?

Padding(
      padding: const EdgeInsets.symmetric(horizontal: 16.0),
      child: PreferredSize(
        preferredSize: Size.fromHeight(120.0),
        child: GridView.count(
          shrinkWrap: true,
          physics: NeverScrollableScrollPhysics(),
          crossAxisCount: 2,
          crossAxisSpacing: 10.0,
          mainAxisSpacing: 10.0,
          children: List.generate(
            nearbySpaces.length,
            (index) {
              return Column(
                children: [
                  Container(
                    padding: EdgeInsets.all(10),
                    height: 110,
                    decoration: BoxDecoration(
                      image: DecorationImage(
                        image: AssetImage(nearbySpaces[index]['coverImage']),
                        fit: BoxFit.cover,
                      ),
                      borderRadius: BorderRadius.all(
                        Radius.circular(10.0),
                      ),
                    ),
                    child: Stack(
                      children: [
                        Row(
                          mainAxisAlignment: MainAxisAlignment.end,
                          children: [
                            Icon(
                              CupertinoIcons.heart_fill,
                              color: HexColor('#FF2D55'),
                            )
                          ],
                        ),
                        Column(
                          mainAxisAlignment: MainAxisAlignment.end,
                          children: [
                            Row(
                              mainAxisAlignment: MainAxisAlignment.end,
                              children: [
                                Container(
                                  padding: EdgeInsets.only(
                                      left: 10, right: 10, top: 7, bottom: 7),
                                  decoration: BoxDecoration(
                                      color: Colors.black.withOpacity(0.7),
                                      borderRadius: BorderRadius.circular(5)),
                                  child: Text(
                                    '€ ' +
                                        nearbySpaces[index]['price'] +
                                        '/hr',
                                    style: TextStyle(
                                      fontWeight: FontWeight.w500,
                                      color: Colors.white,
                                      fontSize: 13,
                                    ),
                                  ),
                                ),
                              ],
                            )
                          ],
                        )
                      ],
                    ),
                  ),
                  SizedBox(
                    height: 5,
                  ),
                  Column(
                    crossAxisAlignment: CrossAxisAlignment.start,
                    children: [
                      Text(
                        nearbySpaces[index]['name'],
                        style: TextStyle(
                            fontSize: 15, fontWeight: FontWeight.w600),
                      ),
                      SizedBox(
                        height: 5,
                      ),
                      Row(
                        children: [
                          SvgPicture.asset(
                            'assets/images/icons/map_marker.svg',
                            width: 12,
                          ),
                          SizedBox(
                            width: 5,
                          ),
                          Text(
                            nearbySpaces[index]['distance'] + ' km away',
                            style:
                                TextStyle(color: Colors.grey, fontSize: 13),
                          )
                        ],
                      ),
                      SizedBox(
                        height: 5,
                      ),
                      Row(
                        children: [
                          SmoothStarRating(
                            rating:
                                double.parse(nearbySpaces[index]['average']),
                            isReadOnly: true,
                            size: 15,
                            filledIconData: Icons.star,
                            color: Colors.amber,
                            borderColor: Colors.grey,
                            halfFilledIconData: Icons.star_half,
                            defaultIconData: Icons.star_border,
                            starCount: 5,
                            allowHalfRating: false,
                            spacing: 1.0,
                            onRated: (value) {
                              print("rating value -> $value");
                              // print("rating value dd -> ${value.truncate()}");
                            },
                          ),
                          SizedBox(
                            width: 5,
                          ),
                          Text(
                            nearbySpaces[index]['average'].toString(),
                            style:
                                TextStyle(color: Colors.grey, fontSize: 13),
                          )
                        ],
                      )
                    ],
                  ),
                ],
              );
            },
          ),
        ),
      ),
    ),
px9o7tmv

px9o7tmv1#

使用Flexible小工具扭曲儿童,检查:https://www.youtube.com/watch?v=CI7x0mAZiY0 .

brtdzjyr

brtdzjyr2#

您需要在GridView中添加mainAxisExtent,示例如下:

GridView(
  gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
    crossAxisCount: 2,
    mainAxisExtent: 300, // ** add this **
  ),
  shrinkWrap: true,
  physics: const ClampingScrollPhysics(),
  children: [
    ...productList
        .map((element) => CartItemWidget(product: element))
        .toList(),
  ],
);

相关问题