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)来设置文字的内边距。
没有特殊要求的情况下推荐第二种方法。
flutter TextField 高度问题(包括使用maxlines自适应高度以及改变textfield组件自定义高度)的更多相关文章
- ios5 中文键盘高度变高覆盖现有ui问题的解决方案(获取键盘高度的方法)(转载)
背景: ios5之前,iphone上的键盘的高度是固定为216.0px高的,中文汉字的选择框是悬浮的,所以不少应用都将此高度来标注键盘的高度(包括米聊也是这么做的). 可是在ios5中,键盘布局变了, ...
- uni-app swiper设置自定义高度
话不多少先上图, 大家可以看到图片中红色区域是头部区域,黄色区域则是我们要滑动的区域. 大家可以在uni-app官网上看到swiper高度是默认100%,而swiper-item则是要有固定宽高的,要 ...
- jquery动态改变div宽度和高度
效果体验:http://keleyi.com/keleyi/phtml/jquery/23.htm 完整代码: <!DOCTYPE html PUBLIC "-//W3C//DTD X ...
- IFrame跨域访问自定义高度
由于JS禁止跨域访问,如何实现不同域的子页面将高度返回给父页面本身,是解决自定义高度的难点. JS跨域访问问题描述:应用A访问应用B的资源,由于A,B应用分别部署在不同应用服务器(tomcat)上,属 ...
- IFrame跨域访问&&IFrame跨域访问自定义高度
1.IFrame跨域访问: http://blog.csdn.net/fdipzone/article/details/17619673 2.IFrame跨域访问自定义高度: 由于JS禁止跨域访问,如 ...
- 小程序笔记三:幻灯片swiper 和图片自定义高度
滑动组件:scroll-view wxml代码 <view> <scroll-view scroll-x="true" class="tab-h&quo ...
- 问题:一球从某高度自由落下,每次落地后反跳回原高度的一半;再落下,求它在第n次落地时,共经过多少米?第n次反弹多高?
import java.util.Scanner; //题目:一球从100米高度自由落下,每次落地后反跳回原高度的一半:再落下,求它在第10次落地时,共经过多少米?第10次反弹多高? public c ...
- 如何改变 select 元素的高度
mozilla 对于美化 select 元素的样式有这样一段描述(用 CSS 美化 Select 元素): 众所周知,select 元素很难用 CSS 进行高效的设计.你可以影响任何元素的某些方面 - ...
- 一球从100米高度自由落下,每次落地后反跳回原高度的一半;再落下,求它在第n次落地时,共经过多少米?第n次反弹多高?(n<=10)
单纯考逻辑 题目: 一球从100米高度自由落下,每次落地后反跳回原高度的一半:再落下,求它在第n次落地时,共经过多少米?第n次反弹多高?(n<=10) 输入描述: 一行,一个整数n (1< ...
- RecyclerView 高度不能随着Item数量 自适应高度
在最近项目中遇到 ,在RecyclerView加载list数据时,高度无法自适应增长,看了很多博客,各种尝试,都没有解决这个问题,在某个博客中,讲到此解决方法,在此记录下. 即在RecyclerVie ...
随机推荐
- Delphi 移除窗口最大化按钮
很遗憾,好像没有直接的代码可以操作,可以试试以下代码: var GWL_Result: Integer; begin GWL_Result:= GetWindowLong(Handle,GWL_STY ...
- js,php中的面向对象
面向对象 js中的面向对象: 面向对象(OOP):通过函数封装得到的一个类 1.类的本质还是函数 每个类(函数)天生有一个prototype的属性,这个prototype又是一个对象,这个对象里有个c ...
- AFNI 教程 步骤5:统计和建模
第一部分 时间序列 用AFNI打开fMRI数据, Graph按钮可以打开信号界面,中心的信号是该像素的信号随着时间的变化图,m 可以显示更少的体素,M可以显示更多的体素.V 可以浏览整个图像,+ 可以 ...
- 小白之Python-基础中的基础01
Python-基础中的基础01 第一次写博客笔记,尝试并监督下自己. 每一天都值得期待! 20170803 -----------------华丽的分界线------------- Python之-- ...
- linux express配置ssl证书,开启https访问
1.下载ssl证书的Nginx版本,在项目根目录新建https空文件夹,把crt文件和key文件复制到https文件夹中; 2.安装依赖:npm i fs http https 3.修改www文件的内 ...
- C# VS2019修改工程名
1.修改解决方案的名称:选择解决方案的名称,右键重命名即可 2.修改项目名称,方法同上,不再赘述 3.修改项目的程序集名称和默认命名空间:选择项目,右键属性,弹出如下对话框 4.替换项目或解决方案中的 ...
- 学习高速PCB设计,这些走线方式你要知道! 高速射频百花潭 2022-01-21 08:53
1.电源布局布线相关 数字电路很多时候需要的电流是不连续的,所以对一些高速器件就会产生浪涌电流. 如果电源走线很长,则由于浪涌电流的存在进而会导致高频噪声,而此高频噪声会引入到其他信号中去. 而在高速 ...
- 高级测试工程师&资深测试工程师应实现的价值
一 技能 自动化: 接口自动化 web ui 自动化(selenium) 移动端自动化 二 项目支撑----项目集,不是单个项目(大小项目) 1.具体功能web 2.小程序 3.移动端 三 项目职责 ...
- SQL执行定时任务JOB,包教包会
什么是JOB? 数据库中可以定时执行任务的功能组件,那就是JOB. JOB的作用 它可以按我们设置好的参数定时执行查询语句或存储过程,特别适合一些每天,每周,每月,每年这种需要循环执行任务的场景,当然 ...
- UART之名词定义@@@(通用异步收发传输器:Universal Asynchronous Receiver/Transmitter),通常称作UART。
通用异步收发传输器(Universal Asynchronous Receiver/Transmitter),通常称作UART.它将要传输的资料在串行通信与并行通信之间加以转换.作为把并行输入信号转成 ...