Flutter开发 - 花式收键盘&TextField小贴士

最新推荐文章于 2024-08-15 19:40:35 发布

CodingFire

最新推荐文章于 2024-08-15 19:40:35 发布

阅读量1.1k

点赞数

CC 4.0 BY-SA版权

分类专栏： Flutter实用开发技巧合集文章标签： flutter

本文链接：https://blog.youkuaiyun.com/CodingFire/article/details/126870956

Flutter实用开发技巧合集专栏收录该内容

34 篇文章 ¥19.90 ¥99.00

订阅专栏

超级会员免费看

本文介绍了在Flutter开发中如何调整TextField的高度，避免过高，并展示了如何通过ConstrainedBox和Align修复文字位置。此外，文章详细讲解了两种键盘收起方法，包括针对单个键盘的处理和全局键盘收起设置，以及在main.dart中实现全局禁用、置灰和字体不变的配置。最后提到了避免页面底部Widget被键盘顶起的解决方案。

最近偶然间看到有人关于Flutter中TextField的高度问题，所以就写了这篇博客，另外附上收键盘的几种方式。

一.先说说设置TextField的高度问题

默认的TextField是没有任何效果的，只有底部的一条线，当我们设置完一些样式后，效果如下：

这个效果看着还行，但是吧，为什么这么高呢？博主可没设置过高度，来看看代码：

TextField(
            focusNode: focusNode,
            decoration: const InputDecoration(
              fillColor: Color(0x30cccccc),
              filled: true,
              enabledBorder: OutlineInputBorder(
                  borderSide: BorderSide(color: Color(0x00FF0000)),
                  borderRadius: BorderRadius.all(Radius.circular(60))),
              hintText: '请输入',
              focused