flutter TextField换行自适应的实现

无论哪种界面框架输入文本框都是非常重要的控件, 但是发现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或者指定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

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持我们。

(0)

相关推荐

  • flutter 输入框组件TextField的实现代码

    TextField 顾名思义文本输入框,类似于iOS中的UITextField和Android中的EditText和Web中的TextInput.主要是为用户提供输入文本提供方便.相信大家在原生客户端上都用过这个功能,就不在做具体介绍了,接下来还是具体介绍下Flutter中TextField的用法. 以下内容已更新到 github TextField的构造方法: const TextField({ Key key, this.controller, //控制器,控制TextField文字 thi

  • flutter TextField换行自适应的实现

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

  • 详解Flutter自定义应用程序内键盘的实现方法

    目录 创建关键小部件 文本键 Backspace键 将按键组成键盘 在应用程序中使用键盘 处理文本输入 处理退格 防止系统键盘显示 在系统键盘和自定义键盘之间切换 完整代码 本文将向您展示如何创建自定义键盘小部件,用于在您自己的应用程序中的Flutter TextField中输入文本.使用案例包括特殊字符或语言的文本输入,其中系统键盘可能不存在或用户可能没有安装正确的键盘. 我们今天将制作一个更简单的版本: 注意 :本文不会告诉您如何构建用户在任何应用程序中安装和使用的系统键盘.这只是一种基于小

  • Antd表格滚动 宽度自适应 不换行的实例

    我就废话不多说了,大家还是直接看代码吧~ <Table className={styles.table} rowKey={(record) => record.key} columns={columns} dataSource={dataSource} scroll={{ x: 'max-content' }} // 加上这条 横向滚动 支持此属性的浏览器内容就不会换行了 pagination={false} /> styles.less .table { :global { .ant-

  • Android Flutter自适应瀑布流案例详解

    目录 Flutter自适应瀑布流 根据效果图可以分为四步: 1.图片自适应: 2.自适应标签: 3.上拉刷新和下拉加载 4.底部的点赞按钮 Flutter自适应瀑布流 前言:在电商app经常会看到首页商品推荐的瀑布流,或者类似短视频app首页也是瀑布流,这些都是需要自适应的,才能给用户带来好的体验 (具体代码请联系我,当天会回复) 话不多说先上效果图: 根据效果图可以分为四步: 图片自适应 自适应标签 上拉刷新和下拉加载 底部的点赞按钮可以去掉或者自己修改样式,我这里使用的like_button

  • Django admin实现TextField字段changelist页面换行、空格正常显示

    目录 问题背景 原因 解决方案 使用list_editable 使用format_html--满足只读需求 问题背景 在Django后台的使用admin view绑定model后,可以很方便的通过网页对底层的数据表进行增删查改操作. 在实际工作中有一些数据字段会存储了json或者其他包含换行符.空格符的文本内容,这些文本内容在记录编辑详情页是能正常显示换行.空格的,如下: 但是在changelist页面则会省略所有空格.换行,导致可读性较差,如下: 原因 究其原因,其实是因为在编辑详情页面,存放

  • Flutter输入框TextField属性及监听事件介绍

    textField用于文本输入,它提供了很多属性: const TextField({ ... TextEditingController controller, FocusNode focusNode, InputDecoration decoration = const InputDecoration(), TextInputType keyboardType, TextInputAction textInputAction, TextStyle style, TextAlign textA

  • Android开发组件flutter的20个常用技巧示例总结

    目录 1.map遍历快速实现边距,文字自适应改变大小 2.使用SafeArea 添加边距 3.布局思路 4.获取当前屏幕的大小 5.文本溢出显示省略号 6.一个圆角带搜索icon的搜索框案例 7.修改按钮的背景色 8.tab切换实例 9.点击事件组件点击空白区域不触发点击 10.使用主题色 11.往安卓模拟器中传图片 12.控制text的最大行数显示影藏文字 13.去掉默认的抽屉图标 14.图片占满屏 15.倒计时 16.固定底部 17.添加阴影 18.隐藏键盘 19.获取父级组件大小 20.点

  • Asp.net简单代码设置GridView自适应列宽不变形实现思路与代码

    动态绑定的GridView由于列数不固定,而列又太多(博主做的这个项目有150个左右的字段),这样设置GridView固定宽度就不能满足需求了.为此整理了两种方法来达到GridView自适应列宽不变形的效果. .aspx.cs 复制代码 代码如下: //在GridView的行数据绑定完的事件中设置 protected void gvObjectList_RowDataBound(object sender, GridViewRowEventArgs e) { if (e.Row.RowType

  • iOS实现动态自适应标签

    先上效果图  设计要求 1.标签的宽度是按内容自适应的 2.一行显示的标签个数是动态的,放得下就放,放不下就换行 3.默认选中第一个 4.至少选中一个标签 实现思路 首先我们从这个效果上来看,这个标签是有选中和不选中状态,那我们首选的控件肯定就是用 UIButton来实现了. 这个小程度的重点就在于标签能自动换行,还是智能的,不是固定一行多少个那种,这个我们通过计算每个按钮实际宽度与屏幕的宽度进行比较就能判断是否需要换行了. 还有一点就是处理 至少选中一个标签的功能,我这里有一种方式,就是控制按

随机推荐