flutter text 最大长度_Flutter小技巧之TextField换行自适应

06992242ae486db0d71d721988ab8257.png

无论哪种界面框架输入文本框都是非常重要的控件, 但是发现flutter中的输入框TextField介绍的虽然多,但是各个属性怎么组合满足需要很多文章却说不清楚, 再加上控件版本变更频繁很多功能的介绍都是比较陈旧的属性.现在就需要一个类似微信的输入文本框, 这样一个非常实用的效果flutter要如何实现?前提是尽量用已有属性,少写或不写代码.

先明确这种输入文本框有哪些功能点?

  1. 能够自定义各种间距.主要是控件外边距(margin); 内间距(padding);
  2. 能够自定义样式. 输入框边框(圆角(radius),描边(border),颜色); 字样(大小,颜色), 提示字样(hint);
  3. 自适应. 字号变大控件高度也变高同时保持指定的内外边距.
  4. 最重要的功能: 多行文本. 并且控件高度可以随着换行而增高
  5. 自定义最大行数: 即高度不是随着换行无限增高, 指定控件最大行数后,文本框内容就可以滚动. 如果以数值方式指定控件最大高度很容易发生文本被截断的现象.

1,2,3在flutter中是非常方便的, decoration属性可以满足几乎一切自定义样式.

4,也不麻烦, 现在的keyboardType: TextInputType.multiline,属性已经能够比较好的支持多行文本;

5,单独功能也不麻烦,已经支持属性maxLines指定最大行数

麻烦的是这些属性组合起来的效果,却不理想:

  1. 只指定maxLines. 输入框会从一开始显示指定行数的高度, 不是随着换行而增高, 这时需要同时添加minLines: 1属性
  2. 最好显式的添加keyboardType: TextInputType.multiline,属性, 貌似旧版本默认会用TextInputType.text, 这样支持不了多行.
  3. 单行文本时控件过高. 这是因为控件有默认高度导致内边距失效.
  4. 自适应失效. 指定了decoration中的contentPadding属性, 结果控件高度变化后内边距的数值不对

3,4其实是一个问题, 我们期望像Android中的wrap_content属性, 字体的大小自适应,边距不受影响. 这时候需要用到InputDecoration中的isDense, 去掉冗余边距, 只显示指定的contentPadding

另外一个需要注意的点是, TextField的父节点千万不要ConstrainedBox或者指定Containerconstraints, 现在的控件已经能够自行控制高度了!

上最终结果:

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

来源:思否

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/472265.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

【机器学习】分类算法sklearn-朴素贝叶斯算法

分类算法-朴素贝叶斯算法1. 概率基础2. 朴素贝叶斯介绍3. sklearn朴素贝叶斯实现API4. 朴素贝叶斯算法案例1. 概率基础 概率定义为一件事情发生的可能性&#xff1a;扔出一个硬币&#xff0c;结果头像朝上&#xff1b;某天是晴天 联合概率和条件概率“”&#xff1a; 联合概率…

收集的电影网站

迅播影院-Gvod Player-Gvod电影-迅雷电影下载动漫下载|BT|漫画|动画|游戏 - 极影动漫一路电影网&#xff0d;高清电影下载_1080p电影下载_蓝光电影下载_3d电影下载天天美剧人人影视电影天堂电影FMTorrentProject - Torrent Search EngineBT Kitty - Professional torrent searc…

LeetCode 1851. 包含每个查询的最小区间(排序 + 离线查询 + 优先队列)

文章目录1. 题目2. 解题1. 题目 给你一个二维整数数组 intervals &#xff0c;其中 intervals[i] [lefti, righti] 表示第 i 个区间开始于 lefti 、结束于 righti&#xff08;包含两侧取值&#xff0c;闭区间&#xff09;。 区间的 长度 定义为区间中包含的整数数目&#xff…

canvas 判断哪个元素被点击_监听 Canvas 内部元素点击事件的三种方法

canvas内部元素不能像DOM元素一样方便的添加交互事件监听&#xff0c;因为canvas内不存在“元素”这个概念&#xff0c;他们仅仅是canvas绘制出来的图形。这对于交互开发来说是一个必经障碍&#xff0c;想要监听图形的点击事件思路很简单&#xff0c;只要监听canvas元素本身的点…

git 查看某些文档的历史版本_Git 教程(二)log 命令的使用

使用 Git 进行版本控制时&#xff0c;要习惯他的工作流程&#xff0c;Git 的工作流程是&#xff0c;先在工作区创建项目并编写代码&#xff0c;然后将写好的文件添加到暂存区&#xff0c;最后将暂存区里的文件提交到历史版本库。如下图所示&#xff1a;每向版本历史库做一次提交…

【机器学习】sclearn分类算法-决策树、随机森林

分类算法-决策树、随机森林1.决策树1.1 认识决策树1.2 信息论基础-银行贷款分析1.3 决策树的生成1.4 决策树的划分依据之一-信息增益1.5 sklearn决策树API1.6 泰坦尼克号乘客生存分类2. 集成学习方法-随机森林1.决策树 1.1 认识决策树 决策树思想的来源非常朴素&#xff0c;程…

在Java中正确使用注释

Java提供了3种类型的注释&#xff1a; 单行注释&#xff08;C风格&#xff09; 在Java中最简单的注释是单行注释。它以两个正斜杠开始并到行尾结束。例如&#xff1a; // this is a single-line commentx 1; // a single-line comment after code 多行注释&#xff08;C风格&a…

Spark 机器学习中的线性代数库

文章目录1. DenseVector、SparseVector2. DenseMatrix3. SparseMatrix4. Vector 运算5. 矩阵运算6. RowMatrix7. IndexedRowMatrix8. CoordinateMatrix9. BlockMatrix完整代码pom.xml学自&#xff1a;Spark机器学习实战 https://book.douban.com/subject/35280412/ 环境&#…

atitit. orm框架的hibernate 使用SQLQuery createSQLQuery addEntity

atitit. orm框架的hibernate 使用SQLQuery createSQLQuery addEntity 1. addEntity 对原生SQL查询执行的控制是通过SQLQuery接口进行的&#xff0c;通过执行Session.createSQLQuery()获取这个接口。最简单的情况下&#xff0c;我们可以采用以下形式&#xff1a; List cats ses…

【机器学习】回归算法-线性回归分析、回归实例和回归性能评估

回归算法-线性回归分析、回归实例和回归性能评估线性回归损失函数(误差大小)sklearn线性回归正规方程、梯度下降API线性回归实例回归&#xff1a;目标值连续&#xff1b;分类&#xff1a;目标值离散。 预测回归和分类是不一样的。回归问题可以用于预测销售额&#xff0c;比如公…

scrapy使用代理报错keyerror: proxy_爬虫Scrapy框架-Crawlspider链接提取器与规则解析器...

Crawlspider一&#xff1a;Crawlspider简介CrawlSpider其实是Spider的一个子类&#xff0c;除了继承到Spider的特性和功能外&#xff0c;还派生除了其自己独有的更加强大的特性和功能。其中最显著的功能就是”LinkExtractors链接提取器“。Spider是所有爬虫的基类&#xff0c;其…

activity-启动动画的设定(下面弹出出现,弹入下面消失)

1.今天为了把一个activity以dialog的形式显示&#xff0c;而且实现从开始的时候从底部往上弹出&#xff0c;结束的时候&#xff0c;从上往下消失&#xff0c;做了如下的工作。 1&#xff09;如果把一个activity以dialog的形式显示&#xff1f; 这个只需要设置theme的样式为*.di…

传智书城首页设计代码_(自适应手机版)响应式创意餐饮酒店装饰设计类网站织梦模板 html5蓝色餐饮酒店设计网站源码下载...

模板名称&#xff1a;(自适应手机版)响应式创意餐饮酒店装饰设计类网站织梦模板 html5蓝色餐饮酒店设计网站源码下载本套织梦模板采用织梦最新内核开发的模板&#xff0c;这款模板使用范围广&#xff0c;不仅仅局限于一类型的企业&#xff0c;创意设计、装饰设计、餐饮酒店设计…

【机器学习】逻辑回归—良/恶性乳腺癌肿瘤预测

逻辑回归—良&#xff0f;恶性乳腺癌肿瘤预测 逻辑回归的损失函数、优化 与线性回归原理相同,但由于是分类问题&#xff0c;损失函数不一样&#xff0c;只能通过梯度下降求解 sklearn逻辑回归API sklearn.linear_model.LogisticRegressionLogisticRegression sklearn.linear…

mysql分组之后统计数量

select count(*) from(SELECT count(*) FROM 表名 WHERE 条件 GROUP BY id ) a ; 转载于:https://www.cnblogs.com/shenming/p/4343895.html

opencv mat初始化_【OpenCV入门之十二】看起来一样的图像竟然存在这么大的差别!...

小白导读学习计算机视觉最重要的能力应该就是编程了&#xff0c;为了帮助小伙伴尽快入门计算机视觉&#xff0c;小白准备了【OpenCV入门】系列。新的一年文章的内容进行了很大的完善&#xff0c;主要是借鉴了更多大神的文章&#xff0c;希望让小伙伴更加容易理解。如果小伙伴觉…

LeetCode 1854. 人口最多的年份(差分)

文章目录1. 题目2. 解题1. 题目 给你一个二维整数数组 logs &#xff0c;其中每个 logs[i] [birthi, deathi] 表示第 i 个人的出生和死亡年份。 年份 x 的 人口 定义为这一年期间活着的人的数目。 第 i 个人被计入年份 x 的人口需要满足&#xff1a;x 在闭区间 [birthi, dea…

hdu 4280 最大流sap

模板套起来 1   5 7  //5个结点&#xff0c;7个边 3 3  //坐标 3 0   3 1 0 0 4 5 1 3 3  //相连的结点和流 2 3 4 2 4 3 1 5 6 4 5 3 1 4 4 3 4 29 1 #include<cstdio>2 #include<algorithm>3 #include<cstring>4 using namespace std;5 const in…

Opencv visual studio c++ 环境搭建

转载&#xff1a; https://blog.csdn.net/smilife_/article/details/89244189 https://blog.csdn.net/cwj066/article/details/82252764 c 环境搭建 下载链接opencv-3.4.5-vc14_vc15.exe 第一步&#xff1a;去opencv官网(https://opencv.org/)下载opencv源码https://opencv.…