水平视口被赋予了无限的高度

Posted 2023-02-23

【中文标题】水平视口被赋予了无限的高度

【英文标题】：Horizontal viewport was given unbounded height

【发布时间】：2020-06-06 00:11:19

【问题描述】：

我想在“正文：”部分的列下查看轮播，但收到此错误： 在 performResize() 期间抛出了以下断言：

水平视口的高度没有限制。

视口在横轴上展开以填充其容器并约束其子级以匹配其在横轴上的范围。在这种情况下，水平视口被赋予了无限量的垂直空间来扩展。 相关的导致错误的小部件是：

ListView file:///Users/ahmed/androidStudioProjects/flutter_app_service2/lib/screens/home/profile_list.dart:27:21
When the exception was thrown, this was the stack: 
#0      RenderViewport.performResize.<anonymous closure> (package:flutter/src/rendering/viewport.dart:1289:15)
#1      RenderViewport.performResize (package:flutter/src/rendering/viewport.dart:1301:6)
#2      RenderObject.layout (package:flutter/src/rendering/object.dart:1746:9)
#3      RenderProxyBoxMixin.performLayout (package:flutter/src/rendering/proxy_box.dart:110:13)
#4      RenderObject.layout (package:flutter/src/rendering/object.dart:1767:7)
...
The following RenderObject was being processed when the exception was fired: RenderViewport#d699b NEEDS-LAYOUT NEEDS-PAINT NEEDS-COMPOSITING-BITS-UPDATE
...  needs compositing
...  parentData: <none> (can use size)
...  constraints: BoxConstraints(0.0<=w<=414.0, 0.0<=h<=Infinity)
...  size: MISSING
...  axisDirection: right
...  crossAxisDirection: down
...  offset: ScrollPositionWithSingleContext#209bd(offset: 0.0, range: null..null, viewport: null, ScrollableState, BouncingScrollPhysics, IdleScrollActivity#ac774, ScrollDirection.idle)
...  anchor: 0.0
RenderObject: RenderViewport#d699b NEEDS-LAYOUT NEEDS-PAINT NEEDS-COMPOSITING-BITS-UPDATE
  needs compositing
  parentData: <none> (can use size)
  constraints: BoxConstraints(0.0<=w<=414.0, 0.0<=h<=Infinity)
  size: MISSING
  axisDirection: right
  crossAxisDirection: down
  offset: ScrollPositionWithSingleContext#209bd(offset: 0.0, range: null..null, viewport: null, ScrollableState, BouncingScrollPhysics, IdleScrollActivity#ac774, ScrollDirection.idle)
  anchor: 0.0
...  center child: RenderSliverPadding#201ae NEEDS-LAYOUT NEEDS-PAINT NEEDS-COMPOSITING-BITS-UPDATE
...    parentData: paintOffset=Offset(0.0, 0.0)
...    constraints: MISSING
...    geometry: null
...    padding: EdgeInsets.zero
...    textDirection: ltr
...    child: RenderSliverList#b683f NEEDS-LAYOUT NEEDS-PAINT
...      parentData: paintOffset=Offset(0.0, 0.0)
...      constraints: MISSING
...      geometry: null
...      no children current live

这是我在家里的代码：

body: Column(
      children: <Widget>[
        ProfileList(),
      ],
    ),

这里是指向 ProfileCarousel 的 ProfileList：

class _ProfileListState extends State<ProfileList> 
@override
Widget build(BuildContext context) 
final profiles = Provider.of<List<Profile>>(context);

profiles.forEach((profile) 
  print(profile.firstName);
  print(profile.lastName);
  print(profile.country);
  print(profile.city);
  print(profile.imgUrl);
);

return ListView.builder(
  scrollDirection: Axis.horizontal,
  itemBuilder: (context, index) 

  ,
  itemCount: profiles.length,
);

这里是 ProfileCarousel：

class ProfileCarousel extends StatelessWidget 
final Profile profile;
ProfileCarousel(this.profile);
@override
Widget build(BuildContext context) 
return Container(
  margin: EdgeInsets.all(10.0),
  width: 210.0,
  child: Stack(
    alignment: Alignment.topCenter,
    children: <Widget>[
      Container(
        decoration: BoxDecoration(
          color: Colors.white,
          borderRadius: BorderRadius.circular(10.0),
          boxShadow: [
            BoxShadow(
              color: Colors.black26,
              offset: Offset(0.0, 2.0),
              blurRadius: 6.0,
            ),
          ],
        ),
        child: Stack(
          children: <Widget>[
            Hero(
              tag: profile.imgUrl,
              child: ClipRRect(
                borderRadius: BorderRadius.circular(10.0),
                child: Image(
                  height: 180.0,
                  width: 180.0,
                  image: NetworkImage(profile.imgUrl),

                ),
              ),
            ),
            Positioned(
              left: 10.0,
              bottom: 10.0,
              child: Column(
                crossAxisAlignment: CrossAxisAlignment.start,
                children: <Widget>[
                  Text(
                    profile.firstName,
                    style: TextStyle(
                        fontWeight: FontWeight.w600,
                        fontSize: 24.0,
                        letterSpacing: 1.2,
                        color: Colors.white),
                  ),
                  Row(
                    children: <Widget>[
                      Icon(
                        Icons.arrow_upward,
                        size: 10.0,
                        color: Colors.white,
                      ),
                      SizedBox(width: 5.0),
                      Text(
                        profile.city,
                        style: TextStyle(color: Colors.white),
                      ),
                    ],
                  )
                ],
              ),
            )
          ],
        ),
      )
    ],
  ),
);

【参考方案1】：

我设法通过用 SizedBox 小部件包装 ProfileList 并给它一个适当的高度来找到它的解决方案：

body: Column(
      children: <Widget>[
        SizedBox(height: 500, child: ProfileList()),
      ],
    ),

【参考方案2】：

给ProfileList()一个简单的区域以便可以正常查看

return Scaffold(
  body: Container(
    width: double.infinity,
    height: double.infinity,
    child: ProfileList(),
  ),
),