先上代码。

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组件自定义高度)的更多相关文章

  1. ios5 中文键盘高度变高覆盖现有ui问题的解决方案(获取键盘高度的方法)(转载)

    背景: ios5之前,iphone上的键盘的高度是固定为216.0px高的,中文汉字的选择框是悬浮的,所以不少应用都将此高度来标注键盘的高度(包括米聊也是这么做的). 可是在ios5中,键盘布局变了, ...

  2. uni-app swiper设置自定义高度

    话不多少先上图, 大家可以看到图片中红色区域是头部区域,黄色区域则是我们要滑动的区域. 大家可以在uni-app官网上看到swiper高度是默认100%,而swiper-item则是要有固定宽高的,要 ...

  3. jquery动态改变div宽度和高度

    效果体验:http://keleyi.com/keleyi/phtml/jquery/23.htm 完整代码: <!DOCTYPE html PUBLIC "-//W3C//DTD X ...

  4. IFrame跨域访问自定义高度

    由于JS禁止跨域访问,如何实现不同域的子页面将高度返回给父页面本身,是解决自定义高度的难点. JS跨域访问问题描述:应用A访问应用B的资源,由于A,B应用分别部署在不同应用服务器(tomcat)上,属 ...

  5. IFrame跨域访问&&IFrame跨域访问自定义高度

    1.IFrame跨域访问: http://blog.csdn.net/fdipzone/article/details/17619673 2.IFrame跨域访问自定义高度: 由于JS禁止跨域访问,如 ...

  6. 小程序笔记三:幻灯片swiper 和图片自定义高度

    滑动组件:scroll-view wxml代码 <view> <scroll-view scroll-x="true" class="tab-h&quo ...

  7. 问题:一球从某高度自由落下,每次落地后反跳回原高度的一半;再落下,求它在第n次落地时,共经过多少米?第n次反弹多高?

    import java.util.Scanner; //题目:一球从100米高度自由落下,每次落地后反跳回原高度的一半:再落下,求它在第10次落地时,共经过多少米?第10次反弹多高? public c ...

  8. 如何改变 select 元素的高度

    mozilla 对于美化 select 元素的样式有这样一段描述(用 CSS 美化 Select 元素): 众所周知,select 元素很难用 CSS 进行高效的设计.你可以影响任何元素的某些方面 - ...

  9. 一球从100米高度自由落下,每次落地后反跳回原高度的一半;再落下,求它在第n次落地时,共经过多少米?第n次反弹多高?(n<=10)

    单纯考逻辑 题目: 一球从100米高度自由落下,每次落地后反跳回原高度的一半:再落下,求它在第n次落地时,共经过多少米?第n次反弹多高?(n<=10) 输入描述: 一行,一个整数n (1< ...

  10. RecyclerView 高度不能随着Item数量 自适应高度

    在最近项目中遇到 ,在RecyclerView加载list数据时,高度无法自适应增长,看了很多博客,各种尝试,都没有解决这个问题,在某个博客中,讲到此解决方法,在此记录下. 即在RecyclerVie ...

随机推荐

  1. web.py 中的分页设计

    1.定义分页类 class Pagination(object): ''' 分页类 参数: per_page:每页数量 total_data:总数目 cur_page:当前页. 用法:(flask,h ...

  2. 9.java单链表初学代码复现及一些不值一提的小问题(2)

    首先写完了update和delete函数,在之前的铺垫下.倒是不难,结构和之前的都相同,遍历找到节点后处理该节点.代码如下 public void update(teamNode node){ tea ...

  3. Python170道面试题

    1. 谈谈对 Python 和其他语言的区别 答:Python 是一门语法简洁优美,功能强大无比,应用领域非常广泛,具有强大完备的第三方库,他是一门强类型的可移植.可扩展,可嵌入的解释型编程语言,属于 ...

  4. global 函数

    x = 15 # 全局变量Gdef func_a(): print(x)def func_b(): print(x)def func_c(): global x # 在定义函数内声明x为全局变量后,才 ...

  5. 火星坐标系 (GCJ-02) 与百度坐标系 (BD-09) 的互转 JAVA

    package com.asiabasehk.cgg.util;   /**火星坐标系 (GCJ-02) 与百度坐标系 (BD-09) 的互转  * Created by macremote on 1 ...

  6. 01java大数据开发_Linux安装

    大数据开发01--linux环境安装配置 1.1软件包和资料 需要安装:VMware.CentOs6.5.Xfth5.Xshell5.Xmind: 需要可加V:zhanjiquan666: 安装注意点 ...

  7. SQLSERVER自动备份数据库

    1. 通过操作系统的定时任务执行 创建两个文件,auto.bat和auto.sql,使用bat调用sql文件中的代码段 auto.bat内容 sqlcmd -S localhost,2433 -U s ...

  8. 修改 Ubuntu 的软件源

    1.将 /etc/apt/ 路径下的 sources.list 的内容修改为如下内容(此内容为 Ubuntu Kylin 里面的内容,直接拿过来用,也可以用其它的国内的源). deb http://m ...

  9. oracle学习之undo的基本知识及事务与undo、数据块的关联

    通过自己学习总结的这些undo知识能够让大家都能深刻了解oracle的undo相关原理. 一.undo撤销表空间的作用 撤销表空间通常称为undo表空间:undo表空间的段也称为撤销段或undo段.回 ...

  10. linux系统:共享库问题之如version `ZLIB_1.2.9‘ not found

    1. 错误提示: Gtk-WARNING **: Error loading image 'file:///usr/share/themes/Ambiance/gtk-3.0/assets/butto ...