如何解决“RenderBox 未布局：”在卡片小部件中颤动

Question

我有一张卡片，里面有三个容器。前两个有文本，最后一个应该包含一个 TextFormField 和一些文本。所以我有一个排把两个放在一起。唯一的问题是当我添加 TextFormField 小部件时它没有出现并且控制台抛出显示错误

    ══╡ 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(),
                      ),
                    ],
                  )
                ],
              ),
            ),
          ],
        ),
      ),
    ));
    }
     }

Answer 1

TextFormField 导致问题。它需要宽度约束。例如。将其包装到具有宽度的 Expanded widget 或 Container 中。

Answer 2

我在 German Saprykin post 的增强中回复，我也得到了下面相同的错误

════════ (2) Exception caught by rendering library ══════════════════════════ An InputDecorator, which is typically created by a TextField, cannot have an unbounded width. This happens when the parent widget does not provide a finite width constraint. For example, if the InputDecorator is contained by a Row, then its width must be constrained. An Expanded widget or a SizedBox can be used to constrain the width of the InputDecorator or the TextField that contains it. 'package:flutter/src/material/input_decorator.dart': Failed assertion: line 910 pos 7: 'layoutConstraints.maxWidth < double.infinity' User-created ancestor of the error-causing widget was: TextField file:///C:/CommBack/My_Workplace/Flutter/wiremusic/wiremusic_dev/lib/wire/widgets/searchfield.dart:15:14 ══════════════════════════════════════════════════════════

════════ (3) Exception caught by rendering library ══════════════════════════ RenderBox was not laid out: _RenderDecoration#b1ce0 relayoutBoundary=up26 NEEDS-PAINT NEEDS-COMPOSITING-BITS-UPDATE 'package:flutter/src/rendering/box.dart': Failed assertion: line 1681 pos 12: 'hasSize' User-created ancestor of the error-causing widget was: TextField file:///C:/CommBack/My_Workplace/Flutter/wiremusic/wiremusic_dev/lib/wire/widgets/searchfield.dart:15:14 ══════════════════════════════════════════════════════════

因为在前面的源代码行下面。

return Container(
  color: Colors.yellow,
  constraints: BoxConstraints(minWidth: 230.0, minHeight: 25.0),
  child: TextField(),
);

因为 TextField 明确需要祖先 hasSize 并且在向 Container 明确提及宽度后，错误消失了 Thanos

return Container(
  color: Colors.yellow,
  width: 230,
  constraints: BoxConstraints(minWidth: 230.0, minHeight: 25.0),
  child: TextField(),
);

希望这对某人有所帮助。

Answer 3

错误原因：

Row在水平方向展开，TextField也是如此，所以我们需要限制TextField的宽度，您可以尝试以下任何一种方法。

使用Expanded

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

使用Flexible

Row(
  children: <Widget>[
    Flexible(child: TextField()),
  ],
)

将其包裹在Container或SizedBox中并提供width

Row(
  children: <Widget>[
    SizedBox(width: 100, child: TextField()),
  ],
)

Answer 4

花了很多时间，我找到了如下解决方案：

请在ListView.builder()内加上shrinkWrap: true。

它帮助了我。

Answer 5

如果您使用 ListView.builder 并收到此错误，那么这就是解决方案

在构建器中使用== shrinkWrap: true,

ListView.builder(
   itemCount: historyList.length,
   shrinkWrap: true, ///////////////////////Use This Line 
   itemBuilder: (BuildContext context, int index) {
        return historyListItem(historyList[index]['text'], 60, () {}, false, size);
    },
 )

如何解决“RenderBox 未布局：”在卡片小部件中颤动

How to solve ' RenderBox was not laid out:' in flutter in a card widget

dart

flutter

flutter-layout