Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

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

Open
Avalanching-QY opened this issue May 28, 2020 · 22 comments
Open

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

Avalanching-QY opened this issue May 28, 2020 · 22 comments

Comments

@Avalanching-QY
Copy link

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

@Im-Kevin
Copy link
Owner

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

@Im-Kevin
Copy link
Owner

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

@Avalanching-QY
Copy link
Author

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

@Im-Kevin
Copy link
Owner

你能说下你的具体需求吗

@Avalanching-QY
Copy link
Author

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

@Im-Kevin
Copy link
Owner

你用Scaffold就可以了

@Avalanching-QY
Copy link
Author

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

@Im-Kevin
Copy link
Owner

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

@Avalanching-QY
Copy link
Author

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

@Avalanching-QY
Copy link
Author

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

@lzhuor
Copy link

lzhuor commented Jul 27, 2020

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

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

image

@xuejmnet
Copy link

xuejmnet commented Sep 9, 2020

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

@lzhuor
Copy link

lzhuor commented Sep 22, 2020

@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
Copy link

@lzhuor 3q

@Ancx95328
Copy link

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

@xuejmnet
Copy link

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

@YYwishp
Copy link

YYwishp commented Aug 16, 2021

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

好使,铁汁

@lzhuor
Copy link

lzhuor commented Sep 12, 2021

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

@Im-Kevin
Copy link
Owner

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

@lzhuor
Copy link

lzhuor commented Sep 18, 2021

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

@Im-Kevin
Copy link
Owner

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

@XiaoMinwm
Copy link

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

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

7 participants