Flutter , TextField遇到的问题

最新推荐文章于 2023-01-28 18:02:59 发布

追寻自由～

最新推荐文章于 2023-01-28 18:02:59 发布

阅读量1.1k

点赞数 1

CC 4.0 BY-SA版权

分类专栏： Flutter 文章标签： flutter

原文链接：https://blog.youkuaiyun.com/weixin_42869574/article/details/103301302?ops_request_misc=%25257B%252522request%25255Fid%252522%25253A%252522160845652916780288221037%252522%25252C%252522scm%252522%25253A%25252220140713.130102334.pc%25255Fall.%252522%25257D&request

Flutter 专栏收录该内容

48 篇文章

订阅专栏

本文介绍了Flutter中关于文本输入和键盘交互的三个常见问题及解决方案：通过点击空白区域收起软键盘；解决TextField中文本显示位置偏移的问题；以及防止键盘弹出导致页面内容被遮挡。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

一、点击空白，收起键盘

body: GestureDetector(
        behavior: HitTestBehavior.translucent,
        onTap: () {
          FocusScope.of(context).requestFocus(FocusNode()); // 收起键盘
        },
        child: Container( ... ),
      ),

二、文字不居中
问题： 文本靠上
在这里插入图片描述
方案： 文本已经居中（与上图有细微的差别，睁大眼睛看哈！）

设置TextField里面的decoration对应的InputDecoration中的boder参数。线框border会自动校正文字的位置。

TextField(
 InputDecoration(
  focusedBorder: OutlineInputBorder(
      borderSide: BorderSide(width: 0, color: Colors.transparent)),
  disabledBorder: OutlineInputBorder(
      borderSide: BorderSide(width: 0, color: Colors.transparent)),
  enabledBorder: OutlineInputBorder(
      borderSide: BorderSide(width: 0, color: Colors.transparent)),
  border: OutlineInputBorder(
      borderSide: BorderSide(width: 0, color: Colors.transparent)),
  contentPadding: EdgeInsets.symmetric(vertical: 0),
  ),                     
),

三、键盘弹出，底部溢出报错

在这里插入图片描述
方案：
外面套一层SingleChildScrollView

body: SingleChildScrollView(
              child: Column(
                children: [   ...  ],       
              ),
 ),

以上内容的转载链接：