【Flutter 问题系列第 42 篇】TextField 如何根据内容自适应换行

这是【Flutter 问题系列第 42 篇】，如果觉得有用的话，欢迎关注专栏。

如果你想让输入框高度随着内容的增加而自适应，直接设置 maxLines ，输入框在开始就会有一定高度，显然这并不是我们想要的，其实你可以这样做。

一：解决方案

TextField(
  maxLines: null,
  minLines: 1,
);

两个属性搞定，没错，就是这么的简单，效果图如下所示

到这里你的问题已经得到解决了，如果你想知道为什么或者其它的解决办法，可以继续往下看。

二：源码分析

如下图所示，查看 TextField 组件的源码可知 minLines 代表最少多少行，默认为 null ，maxLines 代表最多多少行，默认为 1 行。

查看 maxLines 的注释，如处图所示 这也是为什么要将 maxLines 特意设置为空的原因了。

在 stackoverflow 上有人用 LayoutBuilder 的方式也实现了根据内容自动换行的功能，这也是我之前使用的方式，放到这里大家可以参考一下，学习一下这种思路。

博主目前使用的 Flutter 版本：2.2.3，Dart 版本：2.13.4，Android Studio 版本：4.2.2

你的问题得到解决了吗？欢迎在评论区留言。

赠人玫瑰，手有余香，如果觉得文章不错，希望可以给个一键三连，感谢。

结束语 Google 的 Flutter 越来越火，截止 2021年7月29日 GitHub 标星已达 126K，Flutter 毅然是一种趋势，所以作为前端开发者，没有理由不趁早去学习。 无论你是 Flutter 新手还是已经入门了，不妨先点个关注，后续我会将 Flutter 中的常用组件（含有源码分析、组件的用法及注意事项）以及可能遇到的问题写到 CSDN 博客中，希望自己学习的同时，也可以帮助更多的人。