web-dev-qa-db-ja.com

フラッターTextFieldの高さをコンテナの親に合わせる方法は？

TextFieldの高さをコンテナの高さと同じにします。以下のコードを確認し、コンテナのTextField match_parentを作成する方法を教えてください。この質問を確認しました flutterのwrap_contentとmatch_parentに相当しますか？ ですが、解決策が見つかりませんでした。コンテナの高さと幅を完全に取得するには、TextFieldを作成する必要があります。

 new Container(
            height: 200.0,
            decoration: new BoxDecoration(
                border: new Border.all(color: Colors.black)
            ),

            child: new SizedBox.expand(
              child: new TextField(
                maxLines: 2,
                style: new TextStyle(
                    fontSize: 16.0,
                   // height: 2.0,
                    color: Colors.black
                ),
                  decoration: const InputDecoration(
                    hintText: "There is no data",
                    contentPadding: const EdgeInsets.symmetric(vertical: 40.0),
                  )
              ),
            ),
          )

下のスクリーンショットを確認してください。TextFieldの全高を取得するにはContainerが必要です

enter image description here

dartflutterflutter-layout
5
Ammy Kang

私の解決策は次のとおりです。

Container(
            height: 200,
            color: Color(0xffeeeeee),
            padding: EdgeInsets.all(10.0),
            child: new ConstrainedBox(
              constraints: BoxConstraints(
                maxHeight: 200.0,
              ),
              child: new Scrollbar(
                child: new SingleChildScrollView(
                  scrollDirection: Axis.vertical,
                  reverse: true,
                  child: SizedBox(
                    height: 190.0,
                    child: new TextField(
                      maxLines: 100,
                      decoration: new InputDecoration(
                        border: InputBorder.none,
                        hintText: 'Add your text here',
                      ),
                    ),
                  ),
                ),
              ),
            ),
          ),

それは私にとってはかなり良いです。そして、これがスクリーンショットです。

enter image description here

2
Jack Sun

コードの数行を削除して、フラッターの仕組みを理解しましょう。

  1. 高さを与える理由200 toContainer。 Containerはその子（この場合はSizedBox.expand）に基づいて高さを調整できません
  2. 高さ200を削除すると、Containerが画面全体（を占有しましたSizedBox.expand
  3. ユースケースにSizedBoxが本当に必要なのでしょうか。それを削除して、何が起こるか見てみましょう。
  4. ContainerはTextFieldをラップします。しかし、上下にいくらかのスペースがあります。
  5. 誰がそのスペースを決めましたか？ TextFieldの装飾のcontentPadding。それも削除しましょう。 textFieldがContainerでラップされた場所は次のようになります。これがあなたの望むものであることを願っています。そうでない場合は、コメントしてください、私たちは少し調整して、あなたが望むものを手に入れることができます。乾杯 enter image description here

上記の画像を表示するコードの最終バージョン

 new Container(
   //   height: 200.0,
      decoration: new BoxDecoration(
          border: new Border.all(color: Colors.black)
      ),

      child: new TextField(
          maxLines: 2,
          style: new TextStyle(
              fontSize: 16.0,
              // height: 2.0,
              color: Colors.black
          ),
          decoration: const InputDecoration(
            hintText: "There is no data",
//                contentPadding: const EdgeInsets.symmetric(vertical: 40.0),
          )
      ),
    )
1
Dinesh Balasubramanian