fluttertext最⼤长度_Flutter⼩技巧之TextField换⾏⾃适应
⽆论哪种界⾯框架输⼊⽂本框都是⾮常重要的控件, 但是发现flutter中的输⼊框TextField介绍的虽然多,但是各个属性怎么组合满⾜需要很多⽂章却说不清楚, 再加上控件版本变更频繁很多功能的介绍都是⽐较陈旧的属性.现在就需要⼀个类似的输⼊⽂本框, 这样⼀个⾮常实⽤的效果flutter要如何实现?前提是尽量⽤已有属性,少写或不写代码.
先明确这种输⼊⽂本框有哪些功能点?
1. 能够⾃定义各种间距.主要是控件外边距(margin); 内间距(padding);
2. 能够⾃定义样式. 输⼊框边框(圆⾓(radius),描边(border),颜⾊); 字样(⼤⼩,颜⾊), 提⽰字样(hint);
3. ⾃适应. 字号变⼤控件⾼度也变⾼同时保持指定的内外边距.
4. 最重要的功能: 多⾏⽂本. 并且控件⾼度可以随着换⾏⽽增⾼
5. ⾃定义最⼤⾏数: 即⾼度不是随着换⾏⽆限增⾼, 指定控件最⼤⾏数后,⽂本框内容就可以滚动. 如果以数值⽅式指定控件最⼤⾼度很容
易发⽣⽂本被截断的现象.
html单行文本框代码怎么写1,2,3在flutter中是⾮常⽅便的, decoration属性可以满⾜⼏乎⼀切⾃定义样式.
4,也不⿇烦, 现在的keyboardType: TextInputType.multiline,属性已经能够⽐较好的⽀持多⾏⽂本;
5,单独功能也不⿇烦,已经⽀持属性maxLines指定最⼤⾏数
⿇烦的是这些属性组合起来的效果,却不理想:
随着换⾏⽽增⾼, 这时需要同时添加minLines: 1属性
1. 只指定maxLines. 输⼊框会从⼀开始显⽰指定⾏数的⾼度, 不是随着换⾏⽽增⾼
2. 最好显式的添加keyboardType: TextInputType.multiline,属性, 貌似旧版本默认会⽤, 这样⽀持不了多⾏.
3. 单⾏⽂本时控件过⾼. 这是因为控件有默认⾼度导致内边距失效.
4. ⾃适应失效. 指定了decoration中的contentPadding属性, 结果控件⾼度变化后内边距的数值不对
3,4其实是⼀个问题, 我们期望像Android中的wrap_content属性, 字体的⼤⼩⾃适应,边距不受影响. 这时候需要⽤到InputDecoration中
的isDense, 去掉冗余边距, 只显⽰指定的contentPadding
千万不要是ConstrainedBox或者指定Container的constraints, 现在的控件已经能够⾃⾏控制⾼另外⼀个需要注意的点是, TextField的⽗节点千万不要
度了!
上最终结果:
Row(
children: <Widget>[
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(
gapPadding: 0,
borderRadius: const BorderRadius.all(Radius.circular(4)),
borderSide: BorderSide(
width: 1,
style: ,
),
),
)
,
),
),
Text('222'),
]
)
原⽂作者:林⿅
林⿅
来源:思否
版权声明:本站内容均来自互联网,仅供演示用,请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198,我们将在24小时内删除。
发表评论