Flutter: RenderBox未布局:RenderRepaintBoundary#58c65 relayoutBoundary=up1 NEEDS-PAINT

15

我正在使用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,那么在打开键盘时将得到以下输出。

enter image description here

我需要使我的屏幕可滚动。
我已经查看了以下的 Stack-overflow 链接:
- Flutter: RenderBox was not laid out - 如何解决在卡片小部件中的flutter中的“RenderBox未布局” - 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
@pskink,请检查更新后的问题。 - Goku
你有一个只有一个子元素 ColumnStack - 这个 Column 也只有一个子元素: 另一个 Column - 所以我的问题是,你需要那个 Stack 和第一个 Column 做什么? - pskink
@pskink 我想要添加一张图片作为背景,而不是白色的颜色,所以我使用了 stack。 - Goku
使用 Containerdecoration: BoxDecoration(...),然后移除第一个 Column - pskink
显示剩余2条评论
6个回答

4

我遇到了类似的问题。

发现 Spacer() 组件导致了 UI 渲染问题。

这不是此问题的解决方案,但它可能会帮助别人。

谢谢!


2
您可以使用ListView,而不是在代码的开头使用SingleChildScrollView,因此无需使用列。
@override
Widget build(BuildContext context) {

return Scaffold(
  body: SafeArea(
    child:  ListView(
            shrinkWrap: true,
            children: <Widget>[
              Form(...),
              ],
              ),),
              );

2

在您的列表视图或网格视图中添加 shrinkWrap: true


1

屏幕截图 屏幕截图

我不明白为什么你使用 stack。没有使用 stack 也可以正常工作。

  @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],
                                      ),
                                    ),
                                  )
                                ],
                              ),
                            )),
                      )
                ],
              ) ,
        ),
      )
    );
  }

抱歉,我没有注意到第二列只有一个子元素。 - Poran

0

这很容易,您只需删除SingleChildScrollView。然后在Scaffold中添加一个属性,即

resizeToAvoidBottomInset: true

这可能适用于您。

示例:

return Scaffold(
      resizeToAvoidBottomInset: true,
      body: SafeArea(child: Container())
    );

0
一个重要的点。使用热重载-r不会正确显示您的更改是否解决了问题。这总是发生在渲染框未放置的情况下。为了查看您的更改是否解决了问题,您应该执行热重启-R。

网页内容由stack overflow 提供, 点击上面的
可以查看英文原文,
原文链接