解决RenderUiKitView object was given an infinite size during layout.

旺仔大牛

于 2021-03-16 21:58:08 发布

阅读量2.3k

点赞数 1

CC 4.0 BY-SA版权

分类专栏： Flutter踩坑集合文章标签： Flutter dart webview UIKitView

本文链接：https://blog.youkuaiyun.com/adojayfan/article/details/114902681

Flutter踩坑集合专栏收录该内容

35 篇文章

订阅专栏

本文介绍了一个关于在Flutter应用中将WebView组件放置于Column布局内时遇到的布局问题及解决方案。错误源于WebView试图占据无限高度，导致布局失败。通过使用Expanded组件包裹WebView，可以有效地限制其大小。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

场景

有个需求，需要在Column中放个Webview。

Column(
	children: [
		Text(....),
		Text(....),
		Webview(
			.....
		)
	]
)

运行后控制台显示以下错误

════════ Exception caught by rendering library ═════════════════════════════════════════════════════
The following assertion was thrown during performLayout():
RenderUiKitView object was given an infinite size during layout.

This probably means that it is a render object that tries to be as big as possible, but it was put inside another render object that allows its children to pick their own size.
The nearest ancestor providing an unbounded height constraint is: RenderFlex#dbb0a relayoutBoundary=up2 NEEDS-LAYOUT NEEDS-COMPOSITING-BITS-UPDATE OVERFLOWING
...  parentData: offset=Offset(30.0, 0.0) (can use size)
...  constraints: BoxConstraints(0.0<=w<=354.0, 0.0<=h<=840.0)
...  size: Size(354.0, 840.0)
...  direction: vertical
...  mainAxisAlignment: start
...  mainAxisSize: max
...  crossAxisAlignment: center
...  verticalDirection: down
The constraints that applied to the RenderUiKitView were: BoxConstraints(0.0<=w<=354.0, 0.0<=h<=Infinity)
The exact size it was given was: Size(354.0, Infinity)

See https://flutter.dev/docs/development/ui/layout/box-constraints for more information.

解决方法

根据错误信息描述，原因是在渲染控件时，Webview是无限大的，在Column中是不允许这样的。我们只需要使用Expanded将其包裹即可。

Column(
	children: [
		Text(....),
		Text(....),
		Expanded(
			child: Webview(
				......
			)
		)
	]
)