cool_ui icon indicating copy to clipboard operation
cool_ui copied to clipboard

自定义键盘如何抬起ScrollView中的TextField?

Open Avalanching-QY opened this issue 5 years ago • 22 comments

有没有现成的解决方案,如果没有能不能将里面一些做成公用的API,开放给开发者去用?

Avalanching-QY avatar May 28 '20 10:05 Avalanching-QY

我这里抬起TextField主要是靠TextField内部自己的机制,我只是将MediaQuery的值修改了,你如果想实现的话,可以考虑通过计算出控件在滚动条的位置,然后调用animateTo实现

Im-Kevin avatar May 28 '20 10:05 Im-Kevin

具体你可以去参考EditableText 里面的_showCaretOnScreen方法

Im-Kevin avatar May 28 '20 11:05 Im-Kevin

目前采用的方案是采用GlobalKey标识一个TextField去获取一个位置,然后滚动,但我对于GlobalKey不是很了解,了解到它是有限量了,担心会引发一些后续的问题

Avalanching-QY avatar May 28 '20 12:05 Avalanching-QY

你能说下你的具体需求吗

Im-Kevin avatar May 28 '20 12:05 Im-Kevin

就是一个滚动试图上面有多个TextField,输入的时候,不想键盘覆盖输入框

Avalanching-QY avatar May 28 '20 13:05 Avalanching-QY

你用Scaffold就可以了

Im-Kevin avatar May 28 '20 13:05 Im-Kevin

不是很明白您的意思,我这边用cool_ui自定义了一个键盘,然后输入项比较多,已经超出屏幕了,当一些位于srcollView底部的textField获得焦点的时候,希望textfield可以滚到可视范围,不被自定义键盘覆盖。我之前的做法是用GlobalKey,创建多个GlobalKey去无法去释放,多个textfield共用一个又会报错

Avalanching-QY avatar May 28 '20 14:05 Avalanching-QY

你在最外面包个KeyboardMediaQuery,一般是Scaffold的外面

Im-Kevin avatar May 28 '20 14:05 Im-Kevin

目前是这个状态KeyboardMediaQuery包着Scaffold,但是并不能滚动一个对应的位置,有没有可能是Scaffold 里面Stack再包着一个SingleChildScrollView,我去尝试一下,去掉Stack试试

Avalanching-QY avatar May 28 '20 14:05 Avalanching-QY

这边尝试一下,不是每次都可以把TextField滚动到可见范围,有点比较奇怪的是,这边使用TextEditController去监听一个TextField的text的一个变化,点击textField当光标在已经输入文本的前端,可以正常抬起,但是在末端的时候则无法正常抬起

Avalanching-QY avatar May 29 '20 02:05 Avalanching-QY

@Avanlanching 请问问题解决了吗?我遇到了相同的问题。

@Im-Kevin 按照example中的示例其实也不可以抬起TextField, 但是当输入一个数字之后却会自动抬起。请问有什么好的方法吗? image

image

lzhuor avatar Jul 27 '20 06:07 lzhuor

@lzhuor 请问您解决了吗我也遇到这个问题,光标聚焦的时候没办法将输入框至于可视范围,必须要输入第一个字符才可以

xuejmnet avatar Sep 09 '20 01:09 xuejmnet

@xuejmnet The problem has been resolved by:

Modify onUpdateHeight method of keyboard_media_query.dart:

  onUpdateHeight(){
    try{
      setState(()=>{});
    }catch(_){
      Future.delayed(Duration(milliseconds: 16), (){
        this.onUpdateHeight();
      });
    }
  }

cc: @Im-Kevin

lzhuor avatar Sep 22 '20 20:09 lzhuor

@lzhuor 3q

xuejmnet avatar Oct 19 '20 08:10 xuejmnet

@xuejmnet 铁子 你那个修改了onUpdateHeight 好使吗?

Ancx95328 avatar Jul 28 '21 04:07 Ancx95328

@Ancx95328 这个也是1年前的事情了,我翻看了代码已经把自定义按键注释掉了,当初是为了做一个和支付宝微信一样的支付键盘后来换成原生的了

xuejmnet avatar Jul 28 '21 05:07 xuejmnet

@xuejmnet 铁子 你那个修改了onUpdateHeight 好使吗?

好使,铁汁

YYwishp avatar Aug 16 '21 09:08 YYwishp

@Ancx95328 @YYwishp 不客气铁子们。我们生产环境跑了一年多了没毛病。

lzhuor avatar Sep 12 '21 13:09 lzhuor

@lzhuor 我想问一下,为什么要在setState外面加一个try catch ,并且在catch里面再调用一次

Im-Kevin avatar Sep 17 '21 03:09 Im-Kevin

@Im-Kevin 因为发现键盘弹出可能和某个Flutter函数有竞争机制,setState会报渲染错误 (渲染过程中不可以setState那个error,太久了具体名字忘记了). 万一遇到了稍等一下渲染结束就好了。

lzhuor avatar Sep 18 '21 02:09 lzhuor

还有这等事,我找时间排查一下

Im-Kevin avatar Sep 18 '21 02:09 Im-Kevin

我也遇到这个问题,lzhuor的方案也不行呢,代码几乎跟demo一样,真奇怪

XiaoMinwm avatar Sep 19 '22 15:09 XiaoMinwm