android - Gridview Flutter 中的 BoxDecoration 溢出

Question

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

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

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

这里是屏幕

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

标签： androidiosfluttergridview

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