flutter text 最大长度_Flutter小技巧之TextField换行自适应
无论哪种界面框架输入文本框都是非常重要的控件, 但是发现flutter中的输入框TextField
介绍的虽然多,但是各个属性怎么组合满足需要很多文章却说不清楚, 再加上控件版本变更频繁很多功能的介绍都是比较陈旧的属性.现在就需要一个类似微信的输入文本框, 这样一个非常实用的效果flutter要如何实现?前提是尽量用已有属性,少写或不写代码.
先明确这种输入文本框有哪些功能点?
- 能够自定义各种间距.主要是控件外边距(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: <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: BorderStyle.none,),),),),),Text('222'),]
)
另外网上还有通过LayoutBuilder
来实现换行自适应高度的, 也是非常强大的思路.
https://stackoverflow.com/que...
原文作者:林鹿
原文链接:https://segmentfault.com/a/1190000021672726?utm_source=tag-newest
来源:思否
flutter text 最大长度_Flutter小技巧之TextField换行自适应相关推荐
- flutter怎么手动刷新_Flutter 小技巧实现通用的局部刷新
请移步评论 用官方的吧 前言 在使用GlobalKey局部刷新方式中介绍了如何通过GlobalKey实现局部刷新优化性能,只是每次我们进行局部刷新的时候 都需要定义widget.定义state.实现b ...
- flutter text 左对齐_flutter输入框TextField中文本textAlign对齐分析篇
当我们在使用一个 TextField 构建一个输入框时,会有如下效果: 在实际应用程序的开发中,有时我们会希望输入的文字居中对齐或者是右对齐,那么就应用到了我本文章中所讲述内容,凡是涉及到一个内容,我 ...
- flutter text 左对齐_Flutter基础篇之九-Text文本展示
Text显示文本的组件,一个Text只支持一种样式,如果需要富文本请参考RichText. this.textAlign, // 对齐方式 this.overflow, // 处理文本溢出的样式 th ...
- Sublime Text 3 汉化小技巧
Sublime Text 3 简体中文汉化包使用方法 1.将下载的sublime_text3汉化包文件解压,得到的Default.sublime-package 文件.打开sublime text 3 ...
- Flutter开发常见问题,解决小技巧
1.Android Studio 4.0 以上打包编译报错: Execution failed for task ':app:lintVitalRelease'. > Could not res ...
- 限制EditText只能输入数字、限制输入类型、限制输入长度的小技巧
<EditTextandroid:id="@+id/et_account"android:layout_width="0dp"android:layout ...
- css background-image 高度自适应_每天一个CSS小技巧 - 内容元素的自适应
大家都知道如果不给一个元素设定一个具体的height,它就会自动适应其内容的高度.但是如果我们希望width也有类似的行为,我们该怎么做呢? 下面是我们实际的HTML: Let's assume we ...
- SwiftUI小技巧之TextField文字自动调整大小(2020基础教程)
本文价值与收获 看完本文后,您将能够作出下面的界面 正常显示 完整显示自动调整字体大小 缩略显示
- pre小技巧:强制换行与横向滚动条[转]
两种方法: ① <pre style="white-space: pre-wrap; white-space: -moz-pre-wrap; white-space: -pre-wra ...
最新文章
- 15个创意的电梯广告
- BSON及mongoDB数据类型
- 415. Add Strings
- [Objective-c 基础 - 2.1] 封装
- spring核心之AOP学习总结二
- java字符串除法函数,java – 函数式编程:如何处理函数式编程中的异常或它的等价物...
- elk系列5之syslog的模块使用
- 数据驱动科技赋能,东吴证券打造数据中台“九大能力”
- 安卓程序代写 网上程序代写[原]Android开发技巧--ListView
- 使用PacketSifter从pcap中筛选有价值的信息
- vs中git工具的使用
- C语言程序100例之C#版-019
- 阿里P6、P7、P8级别需要多少年工作经验?
- 关于msn 微软关闭MSN聊天信息超级链接功能
- 小白股市扫盲系列--美联储加息减息对市场究竟有什么影响?
- 计算机基础必修上课是上机吗,关于大学计算机基础论文范文集,与上海财经大学国际工商管理学院相关毕业论文范文...
- shell子串截取的三种用法:
- 嵌入式Linux磁盘(硬盘、SD卡)读写性能测试
- 隐马尔科夫模型模型:原理、实现
- MySQL进阶:触发器