先明確這種輸入文字框有哪些功能點?
能夠自定義各種間距.主要是控制項外邊距(margin); 內間距(padding);
能夠自定義樣式. 輸入框邊框(圓角(radius),描邊(border),顏色); 字樣(大小,顏色), 提示字樣(hint);
自適應. 字型大小變大控制項高度也變高同時保持指定的內外邊距.
最重要的功能: 多行文字. 並且控制項高度可以隨著換行而增高
自定義最大行數: 即高度不是隨著換行無限增高, 指定控制項最大行數後,文字框內容就可以滾動. 如果以數值方式指定控制項最大高度很容易發生文字被截斷的現象.
1,2,3在flutter中是非常方便的,decoration屬性可以滿足幾乎一切自定義樣式.
4,也不麻煩, 現在的keyboardtype: textinputtype.multiline,屬性已經能夠比較好的支援多行文字;
5,單獨功能也不麻煩,已經支援屬性maxlines指定最大行數
麻煩的是這些屬性組合起來的效果,卻不理想:
只指定maxlines. 輸入框會從一開始顯示指定行數的高度, 不是隨著換行而增高, 這時需要同時新增minlines: 1屬性
最好顯式的新增keyboardtype: textinputtype.multiline,屬性, 貌似舊版本缺省會用textinputtype.text, 這樣支援不了多行.
單行文字時控制項過高. 這是因為控制項有預設高度導致內邊距失效.
自適應失效. 指定了decoration中的contentpadding屬性, 結果控制項高度變化後內邊距的數值不對
3,4其實是乙個問題, 我們期望像android中的wrap_content屬性, 字型的大小自適應,邊距不受影響. 這時候需要用到inputdecoration中的isdense, 去掉冗餘邊距, 只顯示指定的contentpadding
另外乙個需要注意的點是, textfield的父節點千萬不要是constrainedbox或者指定container的constraints, 現在的控制項已經能夠自行控制高度了!
上最終結果:
row(
children: [
text('111'),
expanded(
child: textfield(
keyboardtype: textinputtype.multiline,
maxlines: 5,
minlines: 1,
decoration: const inputdecoration(
hinttext: '輸入',
filled: true,
fillcolor: colors.white,
contentpadding: const edgeinsets.symmetric(horizontal: 10, vertical: 5),
isdense: true,
border: const outlineinputborder(
borderradius: const borderradius.all(radius.circular(4)),
borderside: borderside(
width: 1,
style: borderstyle.none,
),),
),),
),text('222'),
])
layoutbuilder來實現換行自適應高度的, 也是非常強大的思路. Android ImageView高度自適應
最近有個需求，是往乙個linearlayout中去新增imageview，imageview是動態生成的，然後設定imageview的屬性，但是不管怎麼設定scaletype，都達不到自己喜歡的狀態，顯示原圖大小的話會在imageview的上下有留白，如圖 初步猜想是由於原始 比較大，然後縮放後im...
UILabel和UITextView自適應高度
uilabel自動換行，自適應高度 uilabel label uilabel alloc initwithframe cgrectzero label setbackgroundcolor uicolor clearcolor label setfont uifont systemfontofsi...
Qt QTableWidget 最後一覽自適應寬度
以前使用qtablewidget時，視窗固定大小，可以設定最後一覽固定大小，但是如果視窗自適應，那最後一覽常常出現問題，還好qt有自己的解決方法，qtablewidget logtablewidget new qtablewidget ui logtablewidget setcolumncount...