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


147

我收到了一个渲染异常,我不知道如何解决。我正在尝试创建具有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,
    );
  }

我不再例外。行实现导致我无法计算该行的大小,我缺少什么?

Answers:


317

(我假设您使用的是a,Row因为TextField将来您想将其他小部件放在旁边。)

Row部件要确定其非柔性孩子的内在大小,因此它知道多少空间,它已经离开了灵活的。但是,TextField没有固有宽度。它只知道如何将自身调整为其父容器的整个宽度。尝试将其包装在Flexible或中,Expanded以告知Row您期望TextField占用剩余空间:

      new Row(
        children: <Widget>[
          new Flexible(
            child: new TextField(
              decoration: const InputDecoration(helperText: "Enter App ID"),
              style: Theme.of(context).textTheme.body1,
            ),
          ),
        ],
      ),

3
这难道不是在扑扑文档中的某个地方吗?
stt106

1
@ stt106是-> flutter.io/docs/development/ui/layout/box-constraints但是我同意,这并不容易找到。他们也没有像Collin Jackson所做的那样使解决方案显而易见。
说唱时间

使用此方法会中断mainAxisAlignmentRow小部件。有了两个文本小部件,就没有问题,但是其中包含一个文本小部件和一个Textfield小部件Flexible就可以向左对齐而没有间距。
哈森

我可以请您在这里查看Flutter相关的问题吗:stackoverflow.com/questions/60565658/…
Istiaque Ahmed

30

您会收到此错误,因为TextField会在水平方向扩展,也会这样做Row,因此我们需要限制的宽度TextField,有很多方法可以做到。

  1. Expanded

     Row(
      children: <Widget>[
        Expanded(child: TextField()),
        OtherWidget(),
      ],
    )
    
  2. Flexible

    Row(
      children: <Widget>[
        Flexible(child: TextField()),
        OtherWidget(),
      ],
    )
    
  3. 将其包装在Container或中SizedBox并提供width

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

2
该建议非常有用。当您TextField在一行中有多个时。

11

您应该使用Flexible在一行内使用Textfield。

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


              ],//widget
            ),//row

我认为您不需要Container,您可以Flexible直接使用。
费利佩·奥古斯托

6

解决方案是将您的Text()内部包装为以下小部件之一:ExpandedFlexible。因此,使用扩展的代码将类似于:

Expanded(
           child: TextField(
             decoration: InputDecoration(
               hintText: "Demo Text",
               hintStyle: TextStyle(fontWeight: FontWeight.w300, color: Colors.red)
              ),
           ),
        ),

5

正如@Asif Shiraz提到的那样,我遇到了同样的问题,并通过在Flexible中包装列解决了此问题,

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

0

一个简单的解决方案是将您的文件包装Text()在其中Container()。因此,您的代码将类似于:

Container(
      child: TextField()
)

在这里,您还可以获取容器的width和height属性,以调整文本字段的外观。Flexible如果将文本字段包装在容器中,则无需使用。


1
不添加就无法解决问题width: n
user3249027 '19
By using our site, you acknowledge that you have read and understand our Cookie Policy and Privacy Policy.
Licensed under cc by-sa 3.0 with attribution required.