web-dev-qa-db-ja.com

行内のTextFieldによりレイアウト例外が発生する：サイズを計算できません

修正方法がわからないレンダリング例外が表示されます。 3行の列を作成しようとしています。

行[画像]

行[テキストフィールド]

行[ボタン]

コンテナをビルドするための私のコードは次のとおりです。

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

例外はもうありません。行のサイズを計算できない原因となっている行の実装には何が欠けていますか？

dartflutter
76
Matthew Smith

（将来的に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,
            ),
          ),
        ],
      ),
168
Collin Jackson

行内でTextfieldを使用するには、Flexibleを使用する必要があります。

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


              ],//widget
            ),//row
8
Ajit Paul

簡単な解決策は、Text()の中にContainer()をラップすることです。したがって、コードは次のようになります。

Container(
      child: TextField()
)

ここでは、コンテナの幅と高さの属性も取得して、テキストフィールドのルックアンドフィールを調整します。コンテナ内にテキストフィールドをラップする場合は、Flexibleを使用する必要はありません。

1
vs_lala

@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,
          ),
        ));
  }
}
1
Shahzad Akram

解決策は、次のウィジェットのいずれかでText()をラップすることです： Expanded または Flexible 。したがって、Expandedを使用するコードは次のようになります。

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

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(),
  ],
)
0
CopsOnRoad