OverflowBox RenderBox 未布局：RenderRepaintBoundary#7796e NEEDS-LAYOUT NEEDS-PAINT

Question

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

The following RenderObject was being processed when the exception was fired: RenderConstrainedOverflowBox#8530c NEEDS-LAYOUT NEEDS-PAINT NEEDS-COMPOSITING-BITS-UPDATE: needs compositing creator: OverflowBox ← _BodyBuilder ← MediaQuery ← LayoutId-[<_ScaffoldSlot.body>] ← CustomMultiChildLayout ← AnimatedBuilder ← DefaultTextStyle ← AnimatedDefaultTextStyle ← _InkFeatures-[GlobalKey#f1374 ink renderer] ← NotificationListener ← PhysicalModel ← AnimatedPhysicalModel ← ⋯ parentData: offset=Offset(0.0, 0.0); id=_ScaffoldSlot.body (can use size)
constraints: BoxConstraints(0.0<=w<=331.2, 0.0<=h<=164.8) size: Size(331.2, 164.8) alignment: Alignment.center textDirection: ltr minWidth: Infinity maxWidth: use parent maxWidth constraint
minHeight: 200.0 maxHeight: 200.0 This RenderObject had the following descendants (showing up to depth 5): child: RenderRepaintBoundary#7796e NEEDS-LAYOUT NEEDS-PAINT NEEDS-COMPOSITING-BITS-UPDATE child: RenderCustomPaint#57723 NEEDS-LAYOUT NEEDS-PAINT NEEDS-COMPOSITING-BITS-UPDATE child: RenderRepaintBoundary#6b624 NEEDS-LAYOUT NEEDS-PAINT NEEDS-COMPOSITING-BITS-UPDATE child: _RenderScrollSemantics#80ff2 NEEDS-LAYOUT NEEDS-PAINT NEEDS-COMPOSITING-BITS-UPDATE child: RenderPointerListener#c1da5 NEEDS-LAYOUT NEEDS-PAINT NEEDS-COMPOSITING-BITS-UPDATE ════════════════════════════════════════════════════════════════════════════════════════════════════

Another exception was thrown: RenderBox was not laid out: RenderRepaintBoundary#7796e NEEDS-LAYOUT NEEDS-PAINT

密码是：

 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

试试下面的代码希望对你有帮助。我觉得这个问题是minWidth: double.infinity,把这个去掉，在GridView

里面加上shrinkWrap: true,

参考 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,
             ),
          ),
        ),
      ),
    ),
  ),

您的结果屏幕->

Answer 2

请参考以下代码：

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

OverflowBox RenderBox 未布局：RenderRepaintBoundary#7796e NEEDS-LAYOUT NEEDS-PAINT

OverflowBox RenderBox was not laid out: RenderRepaintBoundary#7796e NEEDS-LAYOUT NEEDS-PAINT

widget

flutter