Gridview Flutter 中的 BoxDecoration 溢出

Question

在这个 gridview 中，我将图像和文本放在包围 buy boxdirecction 的列中，但有时如果图像尺寸更大或文本更大并到达第二行，则会发生底部溢出

这是我的代码，请提出一些解决方法

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

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,
                        ),
                      ),
                    ],
                  ),
                ),
              );
            },
          ),
        ),
      ),
    );
  }
}

Answer 2

您可以沿着图像和文本小部件添加环绕展开小部件。适合大文本 FittedBox 小部件很有帮助。

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 3

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

Gridview Flutter 中的 BoxDecoration 溢出

Overflow in BoxDecoration in Gridview Flutter

android

gridview

ios

flutter