Im-Kevin / cool_ui

用flutter实现一些我认为好看的UI控件,有Popover,仿Weui的Toast,自定义键盘
Apache License 2.0
460 stars 74 forks source link

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

Open Avalanching-QY opened 4 years ago

Avalanching-QY commented 4 years ago

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

Im-Kevin commented 4 years ago

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

Im-Kevin commented 4 years ago

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

Avalanching-QY commented 4 years ago

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

Im-Kevin commented 4 years ago

你能说下你的具体需求吗

Avalanching-QY commented 4 years ago

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

Im-Kevin commented 4 years ago

你用Scaffold就可以了

Avalanching-QY commented 4 years ago

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

Im-Kevin commented 4 years ago

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

Avalanching-QY commented 4 years ago

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

Avalanching-QY commented 4 years ago

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

lzhuor commented 4 years ago

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

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

image

xuejmnet commented 4 years ago

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

lzhuor commented 4 years ago

@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

xuejmnet commented 3 years ago

@lzhuor 3q

Ancx95328 commented 3 years ago

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

xuejmnet commented 3 years ago

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

YYwishp commented 3 years ago

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

好使,铁汁

lzhuor commented 3 years ago

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

Im-Kevin commented 3 years ago

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

lzhuor commented 3 years ago

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

Im-Kevin commented 3 years ago

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

XiaoMinwm commented 2 years ago

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