溢出框 RenderBox 未布局：RenderRepaintBoundary#7796e 需要-布局需要-油漆

Question

我使用的是 OverflowBox，但我遇到了这个问题。

发生异常时正在处理以下 RenderObject 解雇：RenderConstrainedOverflowBox#8530c NEEDS-LAYOUT NEEDS-PAINT 需要合成位更新：需要合成创建者： 溢出框 ← _BodyBuilder ← MediaQuery ← LayoutId-[<_scaffoldslot.body>] ← CustomMultiChildLayout ← AnimatedBuilder ← DefaultTextStyle ← AnimatedDefaultTextStyle ← _InkFeatures-[GlobalKey#f1374 墨迹渲染器] ← NotificationListener ← PhysicalModel ← AnimatedPhysicalModel ← ⋯ parentData: offset=Offset(0.0, 0.0); id=_ScaffoldSlot.body（可以使用大小）
约束：BoxConstraints(0.0 minHeight: 200.0 maxHeight: 200.0 这个 RenderObject 有 以下后代（显示深度为 5）： 孩子：RenderRepaintBoundary#7796e 需要 - 布局需要 - 绘制需要 - 合成 - 位更新 孩子：RenderCustomPaint#57723 需要-布局需要-绘制需要-合成-位更新 孩子：RenderRepaintBoundary#6b624 需要-布局需要-绘制需要-合成-位更新 孩子：_RenderScrollSemantics#80ff2 需要-布局需要-绘制需要-合成-位-更新 孩子：RenderPointerListener#c1da5 需要-布局需要-油漆需要-合成-位更新 ══════════════════════════════════════════════════ ══════════════════════════════════════════════════

抛出了另一个异常：RenderBox 未布局： RenderRepaintBoundary#7796e 需要-布局需要-油漆

代码是：

 Scaffold(
      body: OverflowBox(
        minWidth: double.infinity,
        child: GridView.count(
          crossAxisCount: 5,
          padding: EdgeInsetsDirectional.only(top: 2.h),
          childAspectRatio: 2,
          crossAxisSpacing: 3.w,
          mainAxisSpacing: 3.w,
          clipBehavior: Clip.none,
          children: List.generate(
            5,
            (index) => Material(
              shape: RoundedRectangleBorder(
                // side: ,
                borderRadius: BorderRadius.circular(10.0),
              ),
              color: whiteColor,
              elevation: 5,
              clipBehavior: Clip.antiAliasWithSaveLayer,
              shadowColor: shadowColor.withOpacity(0.5),
              child: Text(
                "Skill${index + 1}",
                textAlign: TextAlign.center,
                // textDirection: TextDirection.,

                // textDirection: TextD,

                style: Get.textTheme.headline3!.copyWith(
                  color: faddenGreyColor,
                ),
              ),
            ),
          ),
        ),
      ),

Answer 1

请参考以下代码：

Scaffold(
        body: OverflowBox(
     // minWidth: double.infinity,
      child:  GridView.count(
        crossAxisCount: 5,
          padding: EdgeInsetsDirectional.only(top: 2.h),
          childAspectRatio: 2,
          crossAxisSpacing: 3.w,
          mainAxisSpacing: 3.w,
        clipBehavior: Clip.none,
        children: List.generate(
          5,
          (index) => Material(
            shape: RoundedRectangleBorder(
              // side: ,
              borderRadius: BorderRadius.circular(10.0),
            ),
            color:whiteColor,
            elevation: 5,
            clipBehavior: Clip.antiAliasWithSaveLayer,
          shadowColor: shadowColor.withOpacity(0.5),
            child: Text(
              "Skill${index + 1}",
              textAlign: TextAlign.center,
              // textDirection: TextDirection.,

              // textDirection: TextD,

              style: Get.textTheme.headline3!.copyWith(
                color: faddenGreyColor,
              ),
            ),
          )
        ),
      )
    ))

Answer 2

试试下面的代码希望它对你有帮助。我认为这个问题是minWidth: double.infinity, 去掉这个并在里面添加shrinkWrap: true, GridView

参考 GridView here

创建网格列表here

参考 shrinkWrap 属性here

 OverflowBox(
      child: GridView.count(
      shrinkWrap: true,
      // physics: NeverScrollableScrollPhysics(),// if you add extra index(like 10,50,etc) then used physics
      crossAxisCount: 2,
      padding: EdgeInsetsDirectional.only(top: 2),
      childAspectRatio: 2,
      crossAxisSpacing: 3,
      mainAxisSpacing: 3,
      clipBehavior: Clip.none,
      children: List.generate(
        5,
        (index) => Material(
          shape: RoundedRectangleBorder(
            // side: ,
            borderRadius: BorderRadius.circular(10.0),
          ),
          elevation: 5,
          clipBehavior: Clip.antiAliasWithSaveLayer,
          child: Center(
               child: Text(
               "Skill${index + 1}",
               textAlign: TextAlign.center,
             ),
          ),
        ),
      ),
    ),
  ),

您的结果屏幕->