使用 List.view 时如何解决 RenderStack 错误答案

【问题标题】：How to solve RenderStack error when using List.view使用 List.view 时如何解决 RenderStack 错误
【发布时间】：2019-11-02 09:12:17
【问题描述】：

我想在 listView 中实现类似的东西：

但是当我实现下面的代码时，我得到了渲染框错误：

RenderStack 对象在布局期间被赋予了无限大小。 I/flutter (16418)：以下 RenderObject 正在处理时异常被触发：I/flutter (16418): RenderStack#10b27 relayoutBoundary=up5 NEEDS-LAYOUT NEEDS-PAINT I/flutter (16418):
创建者：堆栈 ← RepaintBoundary-[] ← IndexedSemantics ← I/flutter (16418): NotificationListener ← KeepAlive ← AutomaticKeepAlive ← SliverList ← I/flutter (16418): MediaQuery ← SliverPadding ← 视口 ← IgnorePointer-[GlobalKey#7cbed] ← 语义 ←⋯I/flutter(16418):parentData:(可以使用size)I/flutter (16418): 约束: BoxConstraints(w=411.4, 0.0 对齐：中心 I/颤动（16418）：textDirection：ltr I/颤动（16418）：适合：松散的 I/颤振（16418）：溢出：剪辑

如何解决这个问题？

代码：

Scaffold(
        body: ListView.builder(
          itemCount: model.data.length,
          itemBuilder: (BuildContext context, int index) {
            return _buildCard(context, index);
          },
        )
        );
  }
}

Widget _buildCard(
    BuildContext context, int index) {
  return Stack(
    alignment: Alignment.center,
    children: <Widget>[
      Positioned(
        top: 80.0,
        right: 30.0,
        left: 30.0,
        child: Container(
          height: MediaQuery.of(context).size.height * 0.12,
          decoration: BoxDecoration(
              color: Colors.black),
        ),
      ),
      Positioned(
        top: 20,
        child: Container(
          height: 100,
          width: 100,
          decoration: BoxDecoration(
              color: Colors.white,
              shape: BoxShape.circle,
              border: Border.all(color: Colors.black, width: 13.0)),
        ),
      )
    ],
  );

【问题讨论】：

标签： flutter dart flutter-layout

【解决方案1】：

您必须给堆栈一个小部件，堆栈将与第一个小部件的大小相同。

否则，堆栈没有大小，无法定位定位。

Widget _buildCard(BuildContext context, int index) {
return Stack(
    alignment: Alignment.center,
    children: <Widget>[
        Container(
        height: MediaQuery
            .of(context)
            .size
            .height * 0.12,
        decoration: BoxDecoration(
        color: Colors.black),
        ),
        Positioned(
            top: 80.0,
            right: 30.0,
            left: 30.0,
            child: Container(
                height: MediaQuery
                    .of(context)
                    .size
                    .height * 0.12,
                decoration: BoxDecoration(
                    color: Colors.black),
            ),
        ),
        Positioned(
            top: 20,
            child: Container(
                height: 100,
                width: 100,
                decoration: BoxDecoration(
                    color: Colors.white,
                    shape: BoxShape.circle,
                    border: Border.all(color: Colors.black, width: 13.0)),
            ),
        )
    ],
);

}

【讨论】：