想要做一個(gè)類似于手機(jī)編輯短信的樣式，輸入框的高度隨內(nèi)容增加，換行并且適應(yīng)高度。

FLutter中的 textField有一個(gè)屬性是maxLines，初始值是1，就是不管輸入多少內(nèi)容都只有一行不會(huì)換行，但是注意到當(dāng)設(shè)置為null的時(shí)候就是行數(shù)不受限制

image

image

當(dāng)maxLines值為null時(shí)，keyboardType的值就是TextInputType.multiline。這樣輸入框的高度動(dòng)態(tài)的變化。這時(shí)的輸入框是沒(méi)有高度限制的，若要有個(gè)最大高度，在外層包裹一個(gè)Container，設(shè)置maxHeight和minHeigh即可。

       Container(
            constraints: BoxConstraints(
                  maxHeight: 200.0,
                  minHeight: 50.0,
                ),
                decoration: BoxDecoration(
                  color: Colors.grey[200],
                  borderRadius: BorderRadius.all(Radius.circular(10))
                ),
                padding: EdgeInsets.only(
                    left: 16.0, right: 16.0, top: 8.0, bottom: 4.0),
                child: TextField(
                  controller: _remarkTextController,
                  maxLines: null,
                  keyboardType: TextInputType.multiline,
                  autofocus: true,
                  decoration: InputDecoration.collapsed(
                    hintText: "備注",
                  ),
                ),
      )

er.gif

小伙伴們可以試試哦