Question

我收到一个渲染异常，我不明白如何修复。我正在尝试创建一个包含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实现导致它无法计算该行的大小，我错过了什么？

Answer 1

（我假设您正在使用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,
            ),
          ),
        ],
      ),

Answer 2

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

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


              ],//widget
            ),//row

Answer 3

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

使用Expanded

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

使用Flexible

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

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

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

Answer 4

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

Container(
      child: TextField()
)

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

Answer 5

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

new_poke_ohe = pd.concat([new_poke_df, new_gen_features, new_leg_features], 
axis=1)    
columns = sum([['Name', 'Generation', 'Gen_Label'], 
           gen_feature_labels,
           ['Legendary', 'Lgnd_Label'], leg_feature_labels], [])    
new_poke_ohe[columns]

Answer 6

解决方案是将Text()包装在以下小部件之一中： Expanded或Flexible。因此，您使用Expanded的代码将类似于：

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

Answer 7

我有同样的问题。

如果需要，可以使用 Table 小部件来避免 TextField

这种问题

Answer 8

Row(
      children: [
        Expanded(
          flex: 1,
          child: Padding(
            padding: EdgeInsets.only(left: 5.0,right: 5.0),
            child: TextFormField(
              controller: commentController,
              validator: (String value){
                if(value.isEmpty){
                  // ignore: missing_return
                  return 'Comment cannot be blank.';
                }
              },
              decoration: InputDecoration(
                  labelText: "Comment",
                  labelStyle: TextStyle(
                      fontFamily: 'Montserrat',
                      fontWeight: FontWeight.bold,
                      color: Colors.grey),
                  focusedBorder: UnderlineInputBorder(
                      borderSide: BorderSide(color: Colors.green))),
            ),
          ),
        ),
      ],
    ),

Answer 9

只需用 Flexible 或 Expanded 扩展 Textfield 。

Answer 10

如果您希望 TextField 根据其内容水平调整自身大小，那么您可以使用 IntrinsicWidth 小部件包装它。

Row(
 children: [
    Text("From"),
    SizedBox(width: 10,),
    IntrinsicWidth(child: TextField(
        textAlignVertical: TextAlignVertical.center,
        decoration: InputDecoration(
        hintText:  "Start Date Start Date Start Date",
        hintStyle: TextStyle(color: Colour.pBlue, fontSize: 14),
        border: InputBorder.none,
      ),
    ),),
            SizedBox(width: 10,),
            Text("To"),
            SizedBox(width: 10,),
            IntrinsicWidth(child:  IntrinsicWidth(child: TextField(
     textAlignVertical: TextAlignVertical.center,
      decoration: InputDecoration(
        hintText:  "End Date",
        hintStyle: TextStyle(color: Colour.pBlue, fontSize: 14),
        border: InputBorder.none,
      ),
    ),)),
          ],
        )

但在您的代码中使用它之前，请确保了解 Flutter 对这个小部件的看法。

<块引用>

创建一个将其子级调整为子级固有宽度的小部件。这个班比较贵。尽可能避免使用它。

Row内的TextField导致布局异常：无法计算大小

10 个答案: