flutter TextField 高度問題（包括使用maxlines自適應高度以及改變textfield組件自定義高度）
先上代碼。
Container( color: Colors.blue, constraints: BoxConstraints( minHeight: 10, maxHeight: 20 ), child: TextField( // maxLines: 3, // minLines: 1, // style: TextStyle(fontSize: 7), decoration: InputDecoration( contentPadding: EdgeInsets.symmetric(vertical:1), isCollapsed: true, fillColor: Colors.red, filled: true, prefixIcon: Icon(Icons.label,size: 7,), prefixIconConstraints: BoxConstraints(), // hintText: '請輸入', // hintStyle: TextStyle(fontSize: 16), border: OutlineInputBorder( borderSide: BorderSide.none, borderRadius: BorderRadius.circular(20), ) ), ), ),
首先 先說一下如何使用maxlines 高度問題。
在我們設置了maxlines之后，例如我們設置maxlines為3的時候，那么默認TextField高度會以三倍的方式顯示。我們想要默認是1行，根據用戶的輸入量去動態改變TextField高度，直到到達我們設定的最大行數。
解決辦法：就是在設置maxlines值的時候，同樣加一個minlines為1，那么默認就會是1行，根據用戶輸入會增長到3行。這樣就解決了。
那么還有個問題，如果設置了prefixIcon:icon圖標之后，組件就有一個固定高度，一般都height沒辦法改變。如何將TextField設置成我們自己想要的高度呢。有兩個辦法，往下看。
第一個辦法：設置外部組件的最大高度。
我們用到的是Container的BoxConstraints（）。具體寫法，可以看上面代碼。
有4個參數maxWidth,minWidth,maxHeight,minHeight,也就是容易的最小寬度，最大寬度，最小高度，最大高度。
我們用到的是maxHeight,minHeight這兩個。
詳解：
當我們設置maxheight為30的時候，相對的TextField高度也就改變為30。這時候會碰到一個問題，那就是文字位置不是上下居中的。會跑偏。
這時候我們結合contentPadding: EdgeInsets.symmetric(vertical:8), 這個來用，意思文字上下各添加8像素補白，具體可自己調整像素大小。上面代碼可參考。
第二個辦法：設置isCollapsed為true
isConllapsed 是InputDecoration中的參數。
相當于高度包裹的意思。
通俗一點都講就是根據你設置的字體大小來自適應高度。字體包括hintStyle和style兩個，也就是提示型文字的大小，和普通用戶輸入文字的大小來確定，推薦兩個設置成一樣的。
只要設置了這個值，TextField就會根據字體大小來設置高度。配合contentPadding：EdgeInsets.all（5）來設置文字的內邊距。
沒有特殊要求的情況下推薦第二種方法。
浙公網安備 33010602011771號