Gridview Flutter 中的 BoxDecoration 溢出答案

【问题标题】：Overflow in BoxDecoration in Gridview FlutterGridview Flutter 中的 BoxDecoration 溢出
【发布时间】：2020-08-19 12:47:36
【问题描述】：

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

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

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

这是屏幕

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

【问题讨论】：

您是否尝试过调整 childAspectRatio 的 GridView ？为了获得所需的纵横比，您必须将其设置为卡片的（宽度/高度）。
不，我不知道 childAspectRation 如果您对此有任何了解，请指导我如何操作
如果我的回答对您原帖中指定的问题有帮助，请采纳。如果没有，请提供更多详细信息，说明为什么没有。 @mayur.p

标签： android ios flutter gridview

【解决方案1】：

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

【讨论】：

【解决方案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,
                          ),
                        ),
                      ),
                    ),
                  ],

【讨论】：

我放了，但是如果文字太长，文字会变小

【解决方案3】：

childAspectRatio 确定 height 小部件中的 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,
                        ),
                      ),
                    ],
                  ),
                ),
              );
            },
          ),
        ),
      ),
    );
  }
}

【讨论】：

尝试使用扩展小部件包装文本