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）來設置文字的內邊距。

沒有特殊要求的情況下推薦第二種方法。