行内的TextField导致布局异常:无法计算大小

我得到一个渲染异常，我不知道如何修复。我试图创建一个有3行的列。

行[图片]

行[TextField]

行(按钮)

下面是我构建容器的代码:

Container buildEnterAppContainer(BuildContext context) {
    var container = new Container(
      padding: const EdgeInsets.all(8.0),
      child: new Column(
        mainAxisAlignment: MainAxisAlignment.start,
        children: <Widget>[
          buildImageRow(context),
          buildAppEntryRow(context),
          buildButtonRow(context)
        ],
      ),
    );
    return container;
  }

以及文本容器的buildAppEntryRow代码

Widget buildAppEntryRow(BuildContext context) {
    return new Row(
      children: <Widget>[
        new TextField(
          decoration: const InputDecoration(helperText: "Enter App ID"),
          style: Theme.of(context).textTheme.body1,
        )
      ],
    );
  }

当我运行时，我得到以下异常:

I/flutter ( 7674): BoxConstraints forces an infinite width.
I/flutter ( 7674): These invalid constraints were provided to RenderStack's layout() function by the following
I/flutter ( 7674): function, which probably computed the invalid constraints in question:
I/flutter ( 7674):   RenderConstrainedBox.performLayout (package:flutter/src/rendering/proxy_box.dart:256:13)
I/flutter ( 7674): The offending constraints were:
I/flutter ( 7674):   BoxConstraints(w=Infinity, 0.0<=h<=Infinity)

如果我改变buildAppEntryRow只是一个TextField，而不是像这样

 Widget buildAppEntryRow2(BuildContext context) {
    return new TextField(
      decoration: const InputDecoration(helperText: "Enter App ID"),
      style: Theme.of(context).textTheme.body1,
    );
  }

我不再得到异常。我在Row实现中遗漏了什么，导致它无法计算该行的大小?

当前回答

最好的解决方案是使用绝对空间值

        Row(
          children: <Widget>[
            SizedBox(
              width: MediaQuery.of(context).size.width * 0.3, 
              child: _telephonePrefixInput()
            ),
            SizedBox(width: MediaQuery.of(context).size.width * 0.02),
            Expanded(child: _telephoneInput()),
          ],
        ),

2021-09-03 08:39:15

其他回答

一个简单的解决方案是将Text()包装在Container()中。所以，你的代码会是这样的:

Container(
      child: TextField()
)

在这里，您还可以获得容器的宽度和高度属性，以调整文本字段的外观。如果你在容器中包装文本字段，就不需要使用Flexible。

2018-11-08 02:55:57

你应该使用Flexible来在一行中使用Textfield。

new Row(
              children: <Widget>[
                new Text("hi there"),
                new Container(
                  child:new Flexible(
                        child: new TextField( ),
                            ),//flexible
                ),//container


              ],//widget
            ),//row

2018-06-23 08:42:58

最好的解决方案是使用绝对空间值

        Row(
          children: <Widget>[
            SizedBox(
              width: MediaQuery.of(context).size.width * 0.3, 
              child: _telephonePrefixInput()
            ),
            SizedBox(width: MediaQuery.of(context).size.width * 0.02),
            Expanded(child: _telephoneInput()),
          ],
        ),

2021-09-03 08:39:15

我也有同样的问题。

如果你愿意，你可以使用表格小部件来避免TextField的这种问题

2020-08-17 13:24:57

正如@Asif Shiraz提到的，我也有同样的问题，并通过将列包裹在一个灵活的容器中解决了这个问题，就像这样，

class MyApp extends StatelessWidget {
  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
    return new MaterialApp(
        title: 'Flutter Demo',
        theme: new ThemeData(
          primarySwatch: Colors.blue,
        ),
        home: new Scaffold(
          body: Row(
            children: <Widget>[
              Flexible(
                  child: Column(
                children: <Widget>[
                  Container(
                    child: TextField(),
                  )
                  //container
                ],
              ))
            ],
            mainAxisAlignment: MainAxisAlignment.spaceBetween,
          ),
        ));
  }
}

2018-12-01 02:40:44

行内的TextField导致布局异常:无法计算大小

推荐文章

最新文章

标签