flutter TextField换行自适应的实现
作者:林鹿 发布时间:2023-06-21 01:21:39
无论哪种界面框架输入文本框都是非常重要的控件, 但是发现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/questions/51205333/flutter-textfield-that-auto-expands-when-text-is-entered-and-then-starts-scrolli/54215431#54215431
来源:https://segmentfault.com/a/1190000021672726
![](https://www.aspxhome.com/images/zang.png)
![](https://www.aspxhome.com/images/jiucuo.png)
猜你喜欢
- 本文实例为大家分享了Android百度地图之方向感应和模式更改,供大家参考,具体内容如下目标效果:菜单中设置几种模式,点击可查看不同的地图形
- 最近做了一个项目其中有需求,要实现自动登录功能,通过查阅相关资料,打算用session监听来做,下面给大家列出了配置 * 的方法:1.在项目
- 本文实例讲述了C#使用Matrix执行缩放的方法。分享给大家供大家参考。具体实现方法如下:using System;using System
- 本文实例为大家分享了java实现银行家算法的具体代码,供大家参考,具体内容如下题目:初始时,Allocate[i,j]=0,表示初始时没有进
- 前言WebJar官网:https://www.webjars.org/,对于任何与Servlet 3兼容的容器,WEB-INF/lib目录中
- 本文实例讲述了Android开发之DialogFragment用法。分享给大家供大家参考,具体如下:背景Android 官方推荐使用 Dia
- 本文为大家分享了Android网络连接判断与相关处理,供大家参考,具体内容如下获取网络信息需要在AndroidManifest.xml文件中
- Maven Release当我们的项目达到了当前的目标,在经过检测后不需要改变。这时我们就需要将SNAPSHOT版本打包成RELEASE版本
- 情况简介spring项目,controller异步调用service的方法,产生大量并发。具体业务:前台同时传入大量待翻译的单词,后台业务接
- 现象说明maven的java项目,测试用例和main所在的源码文件均符合缺省写法和格式,但是在使用mvn clean sonar:sonar
- 自定义View,1. 自定义一个Runnable线程TouchEventCountThread , 用来统计500ms内的点击次
- 一、了解Spring自动装配的方式采用传统的XML方式配置Bean组件的关键代码如下所示<bean id="userMapp
- 本文实例为大家分享了Android自定义View实现九宫格图形解锁的具体代码,供大家参考,具体内容如下效果:代码:package com.e
- 由C#转入Java一段时间了,总结下个人认为的Java同C#语法之间的不同之处,有不同意见之处还望各位海涵 刚学Java时觉得语法同C#大致
- activity动画方式在AndroidMenifest中添加activity的动画属性windowAnimationStyle <i
- dart 是一个面向对象的语言;面向对象有继承封装多态dart的所有东西都是对象,所有的对象都是继承与object类一个类通常是由属性和方法
- 现象: 1. 表面现象: 方法中输出的日志, 日志文件中找不到, 也没有任何报错(即@Async标注的方法没有执行, 也没有报错)2. 分析
- RestTemplate 是由 Spring 提供的一个 HTTP 请求工具,它提供了常见的REST请求方案的模版,例如 GET 请求、PO
- 在 Java 中,方法的重载(Overloading)和覆盖(Overriding)是两个重要的概念。它们都涉及到方法的定义与使用,但作用和
- Java面向对象编程之多态一.对于多态的理解:通俗点理解,多态其实就是一词多义,就是一种方法的多种状态,即不同的类对象,调用同一个方法名,有