Flutter：RenderBox 未布置：RenderRepaintBoundary#58c65 relayoutBoundary=up1 NEEDS-PAINT
Posted
技术标签:
【中文标题】Flutter：RenderBox 未布置：RenderRepaintBoundary#58c65 relayoutBoundary=up1 NEEDS-PAINT【英文标题】：Flutter : RenderBox was not laid out: RenderRepaintBoundary#58c65 relayoutBoundary=up1 NEEDS-PAINT 【发布时间】：2020-04-12 16:03:53 【问题描述】：我正在使用SingleChildScrollView 使我的屏幕滚动，但是当我添加SingleChildScrollView 时，我遇到了错误
RenderBox was not laid out: RenderRepaintBoundary#58c65 relayoutBoundary=up1 NEEDS-PAINT
'package:flutter/src/rendering/box.dart':
Failed assertion: line 1681 pos 12: 'hasSize
我的代码
class _RegisterPage extends State<RegisterApp>
final _formKey = GlobalKey<FormState>();
@override
Widget build(BuildContext context)
return MaterialApp(
debugShowCheckedModeBanner: false,
theme:
ThemeData(primarySwatch: Colors.blue, brightness: Brightness.light),
darkTheme: ThemeData(brightness: Brightness.dark),
home: SafeArea(
child: Scaffold(
backgroundColor: Colors.white,
body: SingleChildScrollView(
child: Stack(
fit: StackFit.expand,
children: <Widget>[
Column(
children: <Widget>[
Column(
children: <Widget>[
Form(
key: _formKey,
child: new Theme(
data: ThemeData(
accentColor: Colors.purple,
primaryColor: Colors.blue,
inputDecorationTheme: new InputDecorationTheme(
labelStyle: new TextStyle(
color: Colors.lightBlue,
fontSize: 20.0,
))),
child: Padding(
padding: const EdgeInsets.all(20.0),
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: <Widget>[
Text(
"Register",
style: TextStyle(
fontSize: 30.0,
fontWeight: FontWeight.bold),
),
Container(
margin: const EdgeInsets.only(top: 20.0),
child: Text(
"Full Name",
style: TextStyle(
fontSize: 20.0,
),
),
),
TextFormField(
style: TextStyle(color: Colors.grey),
decoration: new InputDecoration(
labelStyle: TextStyle(
color: Colors.grey,
),
enabledBorder: UnderlineInputBorder(
borderSide:
BorderSide(color: Colors.grey),
),
focusedBorder: UnderlineInputBorder(
borderSide:
BorderSide(color: Colors.blue),
),
border: UnderlineInputBorder()),
keyboardType: TextInputType.emailAddress,
),
Container(
margin: const EdgeInsets.only(top: 20.0),
child: Text(
"Address",
style: TextStyle(
fontSize: 20.0,
),
),
),
TextFormField(
style: TextStyle(color: Colors.grey),
decoration: new InputDecoration(
labelStyle: TextStyle(
color: Colors.grey,
),
enabledBorder: UnderlineInputBorder(
borderSide:
BorderSide(color: Colors.grey),
),
focusedBorder: UnderlineInputBorder(
borderSide:
BorderSide(color: Colors.blue),
),
border: UnderlineInputBorder()),
keyboardType: TextInputType.emailAddress,
),
Container(
margin: const EdgeInsets.only(top: 20.0),
child: Text(
"Phone Number",
style: TextStyle(
fontSize: 20.0,
),
),
),
TextFormField(
style: TextStyle(color: Colors.grey),
decoration: new InputDecoration(
labelStyle: TextStyle(
color: Colors.grey,
),
enabledBorder: UnderlineInputBorder(
borderSide:
BorderSide(color: Colors.grey),
),
focusedBorder: UnderlineInputBorder(
borderSide:
BorderSide(color: Colors.blue),
),
border: UnderlineInputBorder()),
keyboardType: TextInputType.emailAddress,
),
Container(
margin: const EdgeInsets.only(top: 20.0),
child: Text(
"Company Name",
style: TextStyle(
fontSize: 20.0,
),
),
),
TextFormField(
style: TextStyle(color: Colors.grey),
decoration: new InputDecoration(
labelStyle: TextStyle(
color: Colors.grey,
),
enabledBorder: UnderlineInputBorder(
borderSide:
BorderSide(color: Colors.grey),
),
focusedBorder: UnderlineInputBorder(
borderSide:
BorderSide(color: Colors.blue),
),
border: UnderlineInputBorder()),
keyboardType: TextInputType.emailAddress,
),
Container(
margin: const EdgeInsets.only(top: 20.0),
child: Text(
"Email Address",
style: TextStyle(
fontSize: 20.0,
),
),
),
TextFormField(
style: TextStyle(color: Colors.grey),
decoration: new InputDecoration(
labelStyle: TextStyle(
color: Colors.grey,
),
enabledBorder: UnderlineInputBorder(
borderSide:
BorderSide(color: Colors.grey),
),
focusedBorder: UnderlineInputBorder(
borderSide:
BorderSide(color: Colors.blue),
),
border: UnderlineInputBorder()),
keyboardType: TextInputType.emailAddress,
),
Container(
margin: const EdgeInsets.only(top: 20.0),
child: Text(
"Password",
style: TextStyle(
fontSize: 20.0,
),
),
),
TextFormField(
style: TextStyle(color: Colors.grey),
decoration: new InputDecoration(
labelStyle: TextStyle(
color: Colors.grey,
),
enabledBorder: UnderlineInputBorder(
borderSide:
BorderSide(color: Colors.grey),
),
focusedBorder: UnderlineInputBorder(
borderSide:
BorderSide(color: Colors.blue),
),
border: UnderlineInputBorder()),
keyboardType: TextInputType.emailAddress,
),
Align(
alignment: Alignment.center,
child: Container(
margin: const EdgeInsets.only(top: 40.0),
child: new MaterialButton(
textColor: Colors.white,
minWidth: 250.0,
padding: const EdgeInsets.all(15.0),
color: Colors.blue[400],
child: new Text(
"Register",
style: TextStyle(
color: Colors.white,
// fontWeight: FontWeight.bold,
fontSize: 20.0),
),
shape: RoundedRectangleBorder(
borderRadius:
BorderRadius.circular(50.0)),
onPressed: ()
if (_formKey.currentState
.validate())
,
splashColor: Colors.redAccent[100],
),
),
)
],
),
)),
)
],
)
],
)
],
),
),
)),
);
如果我从布局中删除SingleChildScrollView，那么我在打开键盘时会低于输出
我需要让我的屏幕可以滚动
我已经在 Stack-overflow 链接下方查看过
Flutter: RenderBox was not laid out How to solve ' RenderBox was not laid out:' in flutter in a card widget Flutter Another exception was thrown: RenderBox was not laid out: RenderRepaintBoundary#eaea6 NEEDS-LAYOUT NEEDS-PAINT如果需要更多信息，请告诉我。提前致谢。您的努力将不胜感激。
整个异常日志
════════ Exception caught by rendering library ═════════════════════════════════════════════════════
The following assertion was thrown during performLayout():
BoxConstraints forces an infinite height.
These invalid constraints were provided to RenderFlex's layout() function by the following function, which probably computed the invalid constraints in question:
RenderStack.performLayout (package:flutter/src/rendering/stack.dart:510:15)
The offending constraints were: BoxConstraints(w=392.7, h=Infinity)
User-created ancestor of the error-causing widget was:
SingleChildScrollView file:///home/ctpl119/Documents/NEW_PROJECT/oricon/oricon/lib/register.dart:23:15
When the exception was thrown, this was the stack:
#0 BoxConstraints.debugAssertIsValid.<anonymous closure>.throwError (package:flutter/src/rendering/box.dart:501:9)
#1 BoxConstraints.debugAssertIsValid.<anonymous closure> (package:flutter/src/rendering/box.dart:548:21)
#2 BoxConstraints.debugAssertIsValid (package:flutter/src/rendering/box.dart:552:6)
#3 RenderObject.layout (package:flutter/src/rendering/object.dart:1618:24)
#4 RenderStack.performLayout (package:flutter/src/rendering/stack.dart:510:15)
【问题讨论】：
发布其他一些堆栈帧（不仅是顶部的）：例如 5-8 个您的异常的顶部堆栈帧 @pskink 请检查更新的问题 你有一个只有一个孩子的Stack：Column - 这个专栏还有一个孩子：另一个Column - 所以我的问题是你需要Stack和第一个@ 987654336@为？
@pskink 我想添加一张图片作为背景而不是白色，这就是我使用堆栈的原因
使用Container 和decoration: BoxDecoration(...) 然后（并删除第一个Column）
【参考方案1】：
我遇到了类似的问题
发现 Spacer() 小部件正在创建 UI 渲染问题
这不是这个问题的解决方案，但它可能对某人有所帮助
谢谢！
【讨论】：
【参考方案2】：您可以使用ListView 代替SingleChildScrollView，因此代码的开头不需要列。
@override
Widget build(BuildContext context)
return Scaffold(
body: SafeArea(
child: ListView(
shrinkWrap: true,
children: <Widget>[
Form(...),
],
),),
);
【讨论】：
【参考方案3】：截图
我不明白你为什么使用堆栈。没有堆栈它可以正常工作。
@override
Widget build(BuildContext context)
return Scaffold(
body: SafeArea(
child: SingleChildScrollView(
child:Column(
children: <Widget>[
Form(
key: _formKey,
child: new Theme(
data: ThemeData(
accentColor: Colors.purple,
primaryColor: Colors.blue,
inputDecorationTheme: new InputDecorationTheme(
labelStyle: new TextStyle(
color: Colors.lightBlue,
fontSize: 20.0,
))),
child: Padding(
padding: const EdgeInsets.all(20.0),
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: <Widget>[
Text(
"Register",
style: TextStyle(
fontSize: 30.0,
fontWeight: FontWeight.bold),
),
Container(
margin: const EdgeInsets.only(top: 20.0),
child: Text(
"Full Name",
style: TextStyle(
fontSize: 20.0,
),
),
),
TextFormField(
style: TextStyle(color: Colors.grey),
decoration: new InputDecoration(
labelStyle: TextStyle(
color: Colors.grey,
),
enabledBorder: UnderlineInputBorder(
borderSide:
BorderSide(color: Colors.grey),
),
focusedBorder: UnderlineInputBorder(
borderSide:
BorderSide(color: Colors.blue),
),
border: UnderlineInputBorder()),
keyboardType: TextInputType.emailAddress,
),
Container(
margin: const EdgeInsets.only(top: 20.0),
child: Text(
"Address",
style: TextStyle(
fontSize: 20.0,
),
),
),
TextFormField(
style: TextStyle(color: Colors.grey),
decoration: new InputDecoration(
labelStyle: TextStyle(
color: Colors.grey,
),
enabledBorder: UnderlineInputBorder(
borderSide:
BorderSide(color: Colors.grey),
),
focusedBorder: UnderlineInputBorder(
borderSide:
BorderSide(color: Colors.blue),
),
border: UnderlineInputBorder()),
keyboardType: TextInputType.emailAddress,
),
Container(
margin: const EdgeInsets.only(top: 20.0),
child: Text(
"Phone Number",
style: TextStyle(
fontSize: 20.0,
),
),
),
TextFormField(
style: TextStyle(color: Colors.grey),
decoration: new InputDecoration(
labelStyle: TextStyle(
color: Colors.grey,
),
enabledBorder: UnderlineInputBorder(
borderSide:
BorderSide(color: Colors.grey),
),
focusedBorder: UnderlineInputBorder(
borderSide:
BorderSide(color: Colors.blue),
),
border: UnderlineInputBorder()),
keyboardType: TextInputType.emailAddress,
),
Container(
margin: const EdgeInsets.only(top: 20.0),
child: Text(
"Company Name",
style: TextStyle(
fontSize: 20.0,
),
),
),
TextFormField(
style: TextStyle(color: Colors.grey),
decoration: new InputDecoration(
labelStyle: TextStyle(
color: Colors.grey,
),
enabledBorder: UnderlineInputBorder(
borderSide:
BorderSide(color: Colors.grey),
),
focusedBorder: UnderlineInputBorder(
borderSide:
BorderSide(color: Colors.blue),
),
border: UnderlineInputBorder()),
keyboardType: TextInputType.emailAddress,
),
Container(
margin: const EdgeInsets.only(top: 20.0),
child: Text(
"Email Address",
style: TextStyle(
fontSize: 20.0,
),
),
),
TextFormField(
style: TextStyle(color: Colors.grey),
decoration: new InputDecoration(
labelStyle: TextStyle(
color: Colors.grey,
),
enabledBorder: UnderlineInputBorder(
borderSide:
BorderSide(color: Colors.grey),
),
focusedBorder: UnderlineInputBorder(
borderSide:
BorderSide(color: Colors.blue),
),
border: UnderlineInputBorder()),
keyboardType: TextInputType.emailAddress,
),
Container(
margin: const EdgeInsets.only(top: 20.0),
child: Text(
"Password",
style: TextStyle(
fontSize: 20.0,
),
),
),
TextFormField(
style: TextStyle(color: Colors.grey),
decoration: new InputDecoration(
labelStyle: TextStyle(
color: Colors.grey,
),
enabledBorder: UnderlineInputBorder(
borderSide:
BorderSide(color: Colors.grey),
),
focusedBorder: UnderlineInputBorder(
borderSide:
BorderSide(color: Colors.blue),
),
border: UnderlineInputBorder()),
keyboardType: TextInputType.emailAddress,
),
Align(
alignment: Alignment.center,
child: Container(
margin: const EdgeInsets.only(top: 40.0),
child: new MaterialButton(
textColor: Colors.white,
minWidth: 250.0,
padding: const EdgeInsets.all(15.0),
color: Colors.blue[400],
child: new Text(
"Register",
style: TextStyle(
color: Colors.white,
// fontWeight: FontWeight.bold,
fontSize: 20.0),
),
shape: RoundedRectangleBorder(
borderRadius:
BorderRadius.circular(50.0)),
onPressed: ()
if (_formKey.currentState
.validate())
,
splashColor: Colors.redAccent[100],
),
),
)
],
),
)),
)
],
) ,
),
)
);
【讨论】：
对不起，我没有注意到第二列只有一个孩子。【参考方案4】：在您的列表视图或网格视图中添加shrinkWrap: true
【讨论】：
【参考方案5】：这很简单，您只需删除 SingleChildScrollView。 之后向 Scaffold 添加一个属性，即
resizeToAvoidBottomInset: true
它可能对你有用。
例子：
return Scaffold(
resizeToAvoidBottomInset: true,
body: SafeArea(child: Container())
);
【讨论】：
【参考方案6】：很重要的一点。执行热重载 - 如果您的更改解决了问题，r 将无法正确显示。它总是发生在这个渲染框未放置的情况下。为了查看您的更改是否解决了问题，您应该执行热重启 - R。
【讨论】：
以上是关于Flutter：RenderBox 未布置：RenderRepaintBoundary#58c65 relayoutBoundary=up1 NEEDS-PAINT的主要内容，如果未能解决你的问题，请参考以下文章
RenderBox 未布局，Flutter Listview Builder 未显示
错误：未布置 RenderBox，断言失败：第 1940 行 pos 12：'hasSize'
RenderBox 未布置：RenderFlex#4a60a 需要-油漆需要-合成-位-更新
引发了另一个异常： RenderBox 未布置：CustomRenderShrinkWrappingViewport#f6727 relayoutBoundary=up17 NEEDS-PAINT N
垂直视口被赋予了无限的高度。 RenderBox 未布置：RenderViewport#34d12 NEEDS-LAYOUT NEEDS-PAINT NEEDS-COMPOSITING-BITS-UP