The overflowing RenderFlex has an orientation of Axis.horizontal. The edge of the RenderFlex that is

Posted 2021-09-03 安果移不动

错误日志：

Performing hot reload...
Syncing files to device MI 8...
Reloaded 9 of 1380 libraries in 963ms.

======== Exception caught by rendering library =====================================================
The following assertion was thrown during layout:
A RenderFlex overflowed by 289 pixels on the right.

The relevant error-causing widget was: 
  Row file:///H:/project/flutter/anguo/flutter_ad/lib/page/res_detail_page.dart:29:8
The overflowing RenderFlex has an orientation of Axis.horizontal.
The edge of the RenderFlex that is overflowing has been marked in the rendering with a yellow and black striped pattern. This is usually caused by the contents being too big for the RenderFlex.

Consider applying a flex factor (e.g. using an Expanded widget) to force the children of the RenderFlex to fit within the available space instead of being sized to their natural size.
This is considered an error condition because it indicates that there is content that cannot be seen. If the content is legitimately bigger than the available space, consider clipping it with a ClipRect widget before putting it in the flex, or using a scrollable container rather than a Flex, like a ListView.

导致原因：

Row或者是Column这种没有确定宽高度的Widget中使用了同样没有确定宽高度的子Widget导致的，例如ListView、Wrap、GridView等，Flutter不知道该用什么样的宽高来渲染widget，所以就会显示不出来。

代码：

_buildBody() {
    return Stack(
      children: [
        //第一层
        Row(
          children: [
            Lottie.asset('assets/lottie/background.json'),
          ],
        ),
        //第二层
        ListView(
          children: [],
        )
      ],
    );
  }

如何解决？

Flutter Expanded

Expanded是一个用展开Row、Column、或者Flex子控件的一个Widget，用于填充可用空间。这个好像可以满足我们的需求，下面我们详细看看它。

  _buildBody() {
    return Stack(
      children: [
        //第一层
  
          Row(
            children: [
              Expanded(child: Lottie.asset('assets/lottie/background.json')),
            ],
          ),
        //第二层
        ListView(
          shrinkWrap: true,
          children: [],
        )
      ],
    );

Flutter Flexible

这要也可以

   Row(
            children: [
              Flexible(child: Lottie.asset('assets/lottie/background.json')),
            ],
          ),

如果是ListView出现的问题可以使用

ListView(
  shrinkWrap: true,
  children: [],
)

shrinkWrap 使用子组件高度。