flutter ListView报错

64 阅读1分钟

实现一个类型效果:

image.png


class MyList extends StatelessWidget {
  const MyList({Key? key}):super(key: key);


  @override
  Widget build(BuildContext context) {
    return ListView(
      shrinkWrap: true,
      children: [
        Container(
          width: double.infinity,
          height: 200,
          color: Colors.yellow,
        ),
        Row(
          children: [
            Expanded(
                flex: 2,
                child: Container(
                  height: 180,
                  child: Image.asset("assets/images/1.webp", fit: BoxFit.cover,),
                )
            ),
            Expanded(
                flex: 1,
                child: Column(
                  children: [
                    Expanded(flex: 1, child: Image.asset("assets/images/1.webp", fit: BoxFit.cover,)),
                    Expanded(flex: 1, child: Image.asset("assets/images/1.webp", fit: BoxFit.cover,)),
                  ],
                ))
          ],
        ),
      ],
    );
  }
}

报错:enderFlex children have non-zero flex but incoming height constraints are unbounded 原因是ListView包裹子View,子view需要一个明确的高度。而Column组件中使用Expanded组件填充剩余高度跟ListView有冲突。所以flutter报错。 解决办法就是用

image.png 看了大地老师的课突然想到 既然是高度引起的,那也可以用Container组件包裹设置height也是可以达到效果的。实测出来确实可以。