专栏首页恩蓝脚本flutter  TextField换行自适应的实现

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 条评论
登录 后参与评论

相关文章

  • Android自定义View的使用及其原理知识点总结

    在Android开发中,系统提供给我们的UI控件是有限的,当我们需要使用一些特殊的控件的时候,只靠系统提供的控件,可能无法达到我们想要的效果,这时,就需要我们自...

    砸漏
  • Flutter进阶之实现动画效果(三)

    在上一篇文章:Flutter进阶—实现动画效果(二)的最后,我们实现了一个控件,其中包含各种布局和状态处理控件。以及使用自定义的动画感知绘图代码绘制单个Bar的...

    砸漏
  • Python GUI库PyQt5样式QSS子控件介绍

    QSS子控件实际上也是一种选择器,其应用在一些复合控件上,典型的如QComboBox,该控件的外观是,有一个矩形的外边框,右边有一个下拉箭头,点击之后会弹出下拉...

    砸漏
  • MFC-简单的函数使用

    1.   MessageBox(str);很简单的一个函数,该函数参数为字符串.用来弹出一个窗口显示str的内容,str为一个字符串.

    用户2038589
  • iOS之分段控制器UISegmentedControl1. 分段控制器(UISegmentedControl)2. 事件监听3. 手势事件大全

    stanbai
  • OEA 中 WPF 树型表格整体重构

    为什么要重构     上两个月主要做了一件事情,那就是把 OEA 框架中的 TreeGrid 控件,从结构上重新设计,并大量重构现有代码。而花较大精力做这件事的...

    用户1172223
  • 断言和分段控制器1. 断言(Assertions)2. 分段控制器(UISegmentedControl)

    stanbai
  • React Native 大纲

    onety码生
  • CaseStudy(showcase)布局篇-如何做一个自适应窗口大小的布局

    做silvelight也有一段时间了,相册、游戏,刚刚完成的showcase这个小程序算是一个阶段了。这里就以showcase这个项目来做一下CaseStudy...

    用户1172164
  • Visual Studio 2008 每日提示(十九)

    #181、按Ctrl+Shift+F12 在错误列表查看下一个错误记录 原文链接:You can use Ctrl+Shift+F12 to view the...

    Jianbo

扫码关注云+社区

领取腾讯云代金券