Gridview Flutter 中的 BoxDecoration 溢出

Question

在此 gridview 中，我将图像和文本放在围绕购买框方向的列中，但有时如果图像尺寸较大或文本较大并来到第二行，则会发生底部溢出

这是我的代码请建议一些方法来解决这个问题

Expanded(
                  child: Padding(
                    padding: EdgeInsets.only(bottom: 10,left: 15,right: 10),
                    child: GridView.count(
                      crossAxisCount: 3,
                      crossAxisSpacing: 5.0,
                      mainAxisSpacing: 5.0,
                      shrinkWrap: true,
                      children: List.generate(25, (index) {
                        return Padding(
                          padding: EdgeInsets.all(3.0),
                          child: Container(
                            margin: const EdgeInsets.all(3.0),
                            padding: const EdgeInsets.all(3.0),
                            decoration: BoxDecoration(
                              border: Border.all(
                                width: 1.0,
                                color: Color(0xFFF9AD16),
                              ),
                            ),
                            child: Column(
                              mainAxisAlignment: MainAxisAlignment.center,
                              crossAxisAlignment: CrossAxisAlignment.center,
                              children: <Widget>[
                                  Image.asset(
                                    "images/register_top_logo.png",
                                    height: 50,
                                    width: 50,
                                  ),
                                SizedBox(
                                  height: 10,
                                ),
                                Text(
                                  "Categoryjkjkj",
                                  style: TextStyle(
                                    color: Color(0xFF0066CB),
                                    fontSize: 20.0,
                                  ),
                                ),
                              ],
                            ),
                          ),
                        );
                      },
                      ),
                    ),
                  ),
                ),

这是屏幕

请提出一些解决这个问题的好方法

Answer 1

您可以沿着 Image 和 Text 小部件添加 wrap Expanded小部件。 为了适应大文本，FittedBox Widget 很有帮助。

children: <Widget>[
                    Image.asset(
                      "images/img.jpeg",
                      height: 50,
                      width: 50,
                      fit: BoxFit.contain,
                    ),
                    SizedBox(
                      height: 10,
                    ),
                    Expanded(
                      child: FittedBox(
                        fit: BoxFit.contain,
                        child: Text(
                          "Categoryjkjkj",
                          style: TextStyle(
                            color: Color(0xFF0066CB),
                            fontSize: 20.0,
                          ),
                        ),
                      ),
                    ),
                  ],

Answer 2

Expanded(
 child:  Text(
         "Categoryjkjkj",
         style: TextStyle(
         color: Color(0xFF0066CB),
         fontSize: 20.0,
             ),
           ),

Answer 3

childAspectRatio确定GridView小部件中项目的height 。 childAspectRatio是使用Gridview的子部件的(width / height)计算的。

我以您的代码为例添加了一个演示：

class StackOver extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Expanded(
      child: Padding(
        padding: EdgeInsets.only(bottom: 10, left: 15, right: 10),
        child: GridView.count(
          // give the gridview a childAspectRation
          childAspectRatio: 80 / 120, // (ITEM_WIDTH / ITEM_HEIGHT)
          crossAxisCount: 3,
          crossAxisSpacing: 5.0,
          mainAxisSpacing: 5.0,
          shrinkWrap: true,
          children: List.generate(
            25,
            (index) {
              return Padding(
                padding: EdgeInsets.all(3.0),
                child: Container(
                  margin: const EdgeInsets.all(3.0),
                  padding: const EdgeInsets.all(3.0),
                  decoration: BoxDecoration(
                    border: Border.all(
                      width: 1.0,
                      color: Color(0xFFF9AD16),
                    ),
                  ),
                  child: Column(
                    mainAxisAlignment: MainAxisAlignment.center,
                    crossAxisAlignment: CrossAxisAlignment.center,
                    children: <Widget>[
                      Image.asset(
                        "images/register_top_logo.png",
                        height: 50,
                        width: 50,
                      ),
                      SizedBox(
                        height: 10,
                      ),
                      Text(
                        "Categoryjkjkj",
                        style: TextStyle(
                          color: Color(0xFF0066CB),
                          fontSize: 20.0,
                        ),
                      ),
                    ],
                  ),
                ),
              );
            },
          ),
        ),
      ),
    );
  }
}