如何解决卡片小部件中的“ RenderBox未布局：” [英] How to solve ' RenderBox was not laid out:' in flutter in a card widget

问题描述

我有一张有三个容器的卡。前两个包含文本，最后一个包含文本旁边的TextFormField。所以我要排成一排，将两者保持在一起。唯一的事情是，当我添加TextFormField小部件时，它没有出现，并且控制台抛出的错误显示

I have a card that has three containers. The first two have text and the last one is supposed to hold a TextFormField alongside some text. So i have a row to hold the two along one another. Only thing is when i add the TextFormField widget it does not appear and the console throws shows an error

    ══╡ EXCEPTION CAUGHT BY RENDERING LIBRARY 
    ╞═════════════════════════════════════════════════════════
    I/flutter (14101): The following assertion was thrown during 
    performLayout():
    I/flutter (14101): BoxConstraints forces an infinite width.
    I/flutter (14101): These invalid constraints were provided to 
    RenderRepaintBoundary's layout() function by the
    I/flutter (14101): following function, which probably computed the invalid 
    constraints in question:
    I/flutter (14101):   _RenderDecoration._layout.layoutLineBox 
    (package:flutter/src/material/input_decorator.dart:750:11)
    I/flutter (14101): The offending constraints were:
    I/flutter (14101):   BoxConstraints(w=Infinity, 0.0<=h<=100.0)



    I/flutter (14101): Another exception was thrown: RenderBox was not laid out: 
    RenderPadding#150b0 relayoutBoundary=up3 NEEDS-PAINT
    I/flutter (14101): Another exception was thrown: 
    'package:flutter/src/rendering/shifted_box.dart': Failed assertion: line 310 
    pos 12: 'child.hasSize': is not true.
    I/flutter (14101): Another exception was thrown: RenderBox was not laid out: 
    RenderPhysicalShape#1d998 relayoutBoundary=up4

代码类似于

    import 'package:flutter/material.dart';

    class Home extends StatefulWidget {
    @override
    _HomeState createState() => _HomeState();
    }

    class _HomeState extends State<Home> {
    @override
    Widget build(BuildContext context) {
    return Container(
        child: Center(
      child: Card(
        elevation: 2.0,
        child: Column(
          mainAxisSize: MainAxisSize.min,
          children: <Widget>[
            Container(
              height: 100.0,
              color: Colors.purple,
            ),
            Container(
              height: 200.0,
              color: Colors.pink,
              child: Column(
                children: <Widget>[
                  new RichText(
                    textAlign: TextAlign.center,
                    text: TextSpan(
                      text: 'Some Text',
                      style: TextStyle(
                          color: Colors.grey[800],
                          fontWeight: FontWeight.bold,
                          fontSize: 17.0),
                    ),
                  ),
                  new RichText(
                    softWrap: true,
                    textAlign: TextAlign.center,
                    text: TextSpan(
                      text:
                          'Some other text',
                      style: TextStyle(
                          color: Colors.black54,
                          fontWeight: FontWeight.normal,
                          fontSize: 17.0),
                      ),
                        ),
                      Row(
                    children: <Widget>[
                      Text('adfa'),
                      Text('data'),
                      Form(
                        child: TextFormField(),
                      ),
                    ],
                  )
                ],
              ),
            ),
          ],
        ),
      ),
    ));
    }
     }

推荐答案

简短的答案是，在孩子没有尺寸之前，父级没有尺寸。

The short answer is that the parent doesn't have a size until the child has a size.

TextFormField 会导致问题。它需要限制宽度。

TextFormField causes the issue. It needs constraints for width.

例如将其包装到 Expanded 小部件或容器的宽度，下面的示例。

E.g. wrap it into Expanded widget or Container with width, Example below.

Row(
 children: <Widget>[
   Expanded(
    child: TextFormField()
   ),
  ],
)

这篇关于如何解决卡片小部件中的“ RenderBox未布局：”的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！